Confusion around selects

So in the documentation it gives this example:

Select fields will store the value of the chosen option or options. Given this configuration…

handle: select
  field:
    display: Select
    options:
      face: "So's your face."
      know: "I know you are, but what am I?"
      hand: "Talk to the hand."
      beeswax: "Mind your own beeswax."
    placeholder: 'Choose your snappy comeback'
    type: select

Your saved data will be:

select: face

Template data: <p id="{{ select | raw }}"> Oh yeah? {{ select }}</p>

<p id="face">Oh yeah? So's your face.</p>

For a list of content this is really useful for a list of content but is really annoying for a list of classes or colors

For example:

options:
  '#000': Black
  '#fff': White
  '#95999D': 'Body Copy Subtile Text'
  '#3C4E5E': 'Toolbar sub-nav'
  '#373745': 'Page Anchor/Links'
  '#0BCA49': 'Primary Button'
  '#25693B': 'Primary Button Hover'
  '#4BF0FD': 'Header Text'
  '#D2FBFE': 'Body Copy Text'
  '#182a4b': 'Background'
  '#0C1526': 'Background, Body Copy Text'
  '#050517': 'Toolbar'
  '#4e445c': 'Subtile Button'

With the new way I need to update all of my templates to be {{ color | raw }} which I think will look pretty bad all over the place. A lot of time I'm using selects to make it easier for my co-workers to make choices.

My ideal solution would be for the select field to have an option for rendering the key or the value.

statamic / cms

Confusion around selects #1031