SharePoint lists are great for tracking work, but they can look flat. When a column stores a status, a category, or a priority, all you usually see is text. A field that holds a color is even worse: a value like #2E86C1 or red tells you almost nothing at a glance. People end up scanning rows one by one instead of spotting what matters instantly.

The good news is that SharePoint lets you change how a column looks without changing the data underneath. With a small piece of JSON called column formatting, you can turn that plain color value into a real swatch—a small colored square sitting right next to the value. The result feels like a built-in color picker, and it takes a couple of minutes to set up.

The solution: a color swatch with column formatting

Column formatting is a feature built into modern SharePoint lists and libraries. You give SharePoint a short JSON definition that describes how each cell should be rendered, and SharePoint draws it for you. The data stays exactly as it was—you are only styling the display.

For a color field, the idea is simple: render a small box, fill it with the color stored in the field, and show the text value beside it. @currentField is the placeholder SharePoint replaces with whatever value the current cell holds.

Step 1: Create the site column

Creating it as a site column (rather than a column inside a single list) means you can reuse the same color field across many lists and libraries in the site.

1. Go to Site Settings → Site columns → Create.
2. Give the column a clear name, such as Color.
3. Choose the type. You have two good options:
   • Single line of text — users type any color value freely (#2E86C1 or red). Most flexible.
   • Choice — users pick from a dropdown of colors you define. Best for a clean, consistent interface. (See A friendlier option below.)
4. Pick or create a group so the column is easy to find later (for example, Custom Columns).
5. Save the column, then add it to any list or library where you want it.

The same formatting JSON works for both types, because @currentField simply returns whatever value the cell holds—typed or selected.

Step 2: Apply the formatting JSON

Once the column appears in a list:

1. Click the Color column header → Column settings → Format this column.
2. Choose Advanced mode.
3. Paste the JSON below and click Save.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "align-items": "center",
    "gap": "8px"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "width": "16px",
        "height": "16px",
        "border-radius": "4px",
        "background-color": "@currentField",
        "border": "1px solid #ccc"
      }
    },
    {
      "elmType": "span",
      "txtContent": "@currentField"
    }
  ]
}

Here is what each part does:

1. The outer div is a flexible row that lines up the swatch and the text, with an 8px gap between them.
2. The first child div is the swatch—a 16×16 pixel box with slightly rounded corners and a light gray border so even white or very pale colors stay visible.
3. "background-color": "@currentField" fills that box with whatever color the cell contains.
4. The span prints the raw value next to the swatch, so people can still read and copy the exact color.

Can I use color names instead of hex values?

Yes—and this is one of the nicest parts. The background-color property here is plain CSS, exactly like writing color: red; in a stylesheet. CSS accepts named colors, so SharePoint accepts them too.

That means a user can type any of these into the Color field and the swatch will render correctly:

1. red, blue, green, orange
2. royalblue, seagreen, tomato, gold
3. #2E86C1 or any other hex code

In other words, the same column happily handles both friendly names and precise hex values. Names are easier for everyday users to remember, while hex codes give designers exact control. You do not have to choose one—the field supports both at the same time.

Tip: If someone types a value that is not a valid CSS color (a misspelling like redd, or an internal code), the swatch simply renders empty or transparent. The text beside it still shows what they typed, which makes the mistake easy to spot and fix.

A friendlier option: a Choice field with preset colors

Free typing is flexible, but it puts the responsibility on the user to remember exact color names or hex codes—and one typo means a blank swatch. For most teams, a Choice column gives a much better experience: instead of typing, users pick a color from a dropdown.

To set it up, create the site column as a Choice type (or change the type in Column settings → Edit) and fill the choices with valid CSS color values, one per line:

red
green
gold
royalblue
tomato
seagreen

Then apply the exact same formatting JSON from Step 2—nothing changes. Because @currentField returns the selected choice, the swatch fills with that color automatically.

The benefits of the Choice approach:

1. No typos. Users can only pick valid colors you approved, so every swatch always renders.
2. Consistency. Everyone uses the same palette, which keeps lists looking uniform across the team.
3. Speed. Selecting from a short dropdown is faster than typing a hex code.
4. Guidance. New users immediately see which colors are available, with no need to know CSS.

You can mix friendly names and hex codes in the choice list too—for example, offer red and green for everyday use, plus a precise #2E86C1 for your brand color. SharePoint even lets you set a default choice, so new items start with a sensible color already selected.

Going further: If you would rather show business labels like High / Medium / Low but still color them, keep the choices as those labels and add a small piece of conditional logic to the JSON that maps each label to a color. The free-text or color-named Choice approach above is the simplest path; label-to-color mapping is the next step when you need it.

Where this helps

A color picker column is small, but it pays off anywhere color carries meaning:

1. Status and priority fields—green for done, red for blocked, at a glance.
2. Category or label libraries—give each category a consistent brand color.
3. Design and asset lists—store and preview palette colors next to each item.
4. Project or team trackers—color-code rows so the whole list is scannable in a second.

With one site column and a few lines of JSON, you turn an invisible text value into something people can actually see—and you keep the door open for both simple color names and precise hex codes.

Want to learn more? We're here to help.

Contact Us