How to add custom hex color to SharePoint list choice pills?

[JohnBloggs950]

I'm afraid I'm too bad at coding. I've tried to go through all the materials but seem to not be able to land on a solution. Basically just need to assign custom hex colors to each of the choice options (Ex. If Sales, then #ff0000, If Marketing then #006aff)

Also how can I add border color to the choice pill and different colored fonts? As you will see, I have tried to change the json but it gives me an error

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Sales"
              ]
            },
              "SalesClass",
              "style":
                  {"background-color":"#ff0000"}
              
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Retention"
                  ]
                },
                "#ff0000",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "@currentField",
                        "Marketing"
                      ]
                    },
                    "#ff0000",
                    {
                      "operator": ":",
                      "operands": [
                        {
                          "operator": "==",
                          "operands": [
                            "@currentField",
                            ""
                          ]
                        },
                        "",
                        "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                      ]
                    }
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField"
    }
  ]
}

[#2]

Hi @JohnBloggs950,

JSON formatting allows you to control how data is displayed in SharePoint lists. In your case, you want to change the appearance of choice field values, including adding custom colors, borders, and font colors. The key here is to use conditional logic to apply different styles based on the choice field value.

You can try to use this JSON code snippet for achieving this:

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "row",
    "flex-wrap": "wrap"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "padding": "4px 8px",
        "border-radius": "16px",
        "margin": "4px",
        "font-weight": "bold",
        "color": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Sales"
              ]
            },
            "#ff0000",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Marketing"
                  ]
                },
                "#006aff",
                "#000000"  // Default font color
              ]
            }
          ]
        },
        "background-color": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Sales"
              ]
            },
            "#ff0000",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Marketing"
                  ]
                },
                "#006aff",
                "#ffffff"  // Default background color
              ]
            }
          ]
        },
        "border": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Sales"
              ]
            },
            "1px solid #ff0000",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Marketing"
                  ]
                },
                "1px solid #006aff",
                "1px solid #000000"  // Default border color
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField"
    }
  ]
}

• We define a div element to wrap the choice field values.
• Each choice field value is represented by a child div element.
• We use the elmType property to specify the HTML element type.
• The style property allows us to set various CSS styles for each choice.
• We use the operator property to apply conditional logic. If the choice matches a specific value (e.g., "Sales" or "Marketing"), the corresponding styles are applied.
• If the choice doesn't match any conditions, default styles are applied.

You need to adjust the color codes, font styles, and other CSS properties as needed to match your design preferences. 

Please click Mark as Best Response & Like if my post helped you to solve your issue.
This will help others to find the correct solution easily. It also closes the item.

If the post was useful in other ways, please consider giving it Like.

Kindest regards,

Leon Pavesic

[#3 · Accepted solution]

@JohnBloggs950 you can simplify the JSON consderably by using the following instead, adjusting it as necessary. It's also easier to read & debug.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "txtContent": "@currentField",
  "style": {
    "color": "=if(@currentField == 'Sales', '#ff0000', if(@currentField == 'Marketing', '#006aff', if(@currentField == 'Warehouse', '#b882d7','green')))",
    "background-color": "#f8f8f8",
    "border": "1px solid",
    "box-sizing": "border-box",
    "padding": "4px 8px 5px",
    "border-radius": "16px",
    "margin": "4px"
  }
}

 The result is:

Rob
Los Gallardos
Microsoft Power Automate Community Super User.
Intranet, SharePoint and Power Platform Manager (and classic 1967 Morris Traveller driver) 

[#4]

I would have marked this as the best response but the JSON is not working when I place it in the Format Column JSON code area. I'm trying to change colors of a Choice column (formatted as choice pills).

[#5]

@JohnBloggs950 when you say it is not working, what is not working? What is the JSON code you are using?

[#6]

@Rob_Elliott I just copy pasted the one you shared into my SharePoint format column JSON editor and the Preview button remained disabled.

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "display": "flex",
    "flex-direction": "row",
    "flex-wrap": "wrap"
  },
  "children": [
    {
      "elmType": "div",
      "style": {
        "padding": "4px 8px",
        "border-radius": "16px",
        "margin": "4px",
        "font-weight": "bold",
        "color": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Sales"
              ]
            },
            "#ff0000",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Marketing"
                  ]
                },
                "#006aff",
                "#000000"  // Default font color
              ]
            }
          ]
        },
        "background-color": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Sales"
              ]
            },
            "#ff0000",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Marketing"
                  ]
                },
                "#006aff",
                "#ffffff"  // Default background color
              ]
            }
          ]
        },
        "border": {
          "operator": "?",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "@currentField",
                "Sales"
              ]
            },
            "1px solid #ff0000",
            {
              "operator": "?",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "@currentField",
                    "Marketing"
                  ]
                },
                "1px solid #006aff",
                "1px solid #000000"  // Default border color
              ]
            }
          ]
        }
      },
      "txtContent": "@currentField"
    }
  ]
}

[#7]

YOur JSON is totally different to what I pasted. Delete what you have and paste in what I posted!

[#8]

I realized that you are not the person I responded to. I was responding to LeonPavesic's answer (which wasn't working). Yours is actually, I marked it best response :)

In fact, yours worked beautifully, one line and easy to read and debug. Really appreciate it. Worked like a charm

[#9]

I used this code, it works great for a list choice column but not for SharePoint library choice column (with choice pill colors). All choices look green (default color) @Rob_Elliott @LeonPavesic 

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "style": {
    "flex-wrap": "wrap",
    "display": "flex"
  },
  "children": [
    {
      "forEach": "__INTERNAL__ in @currentField",
      "elmType": "div",
      "style": {
	    "color": "=if(@currentField == 'Sales', '#ff0000', if(@currentField == 'Marketing', '#006aff', if(@currentField == 'Warehouse', '#b882d7','green')))",
        "background-color": "=if(@currentField == 'Sales', '#FAA0A0', if(@currentField == 'Marketing', '#c1d3f7', if(@currentField == 'Warehouse', '#e4c1f7','#DAF7A6')))",
        "box-sizing": "border-box",
        "padding": "4px 8px 5px 8px",
        "overflow": "hidden",
        "text-overflow": "ellipsis",
        "display": "flex",
        "border-radius": "16px",
        "height": "24px",
        "align-items": "center",
        "white-space": "nowrap",
        "margin": "4px 4px 4px 4px"
      },
      "attributes": {
        "class": {
          "operator": ":",
          "operands": [
            {
              "operator": "==",
              "operands": [
                "[$__INTERNAL__]",
                "Sales"
              ]
            },
            "sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont",
            {
              "operator": ":",
              "operands": [
                {
                  "operator": "==",
                  "operands": [
                    "[$__INTERNAL__]",
                    "Marketing"
                  ]
                },
                "sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont",
                {
                  "operator": ":",
                  "operands": [
                    {
                      "operator": "==",
                      "operands": [
                        "[$__INTERNAL__]",
                        "Warehouse"
                      ]
                    },
                    "sp-css-backgroundColor-BgGold sp-css-color-GoldFont",
                    "sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary"
                  ]
                }
              ]
            }
          ]
        }
      },
      "txtContent": "[$__INTERNAL__]"
    }
  ]
}

[#10]

@JohnBloggs950 

Use [$__INTERNAL__] instead of @currentField in conditions like: 

=if([$__INTERNAL__] == 'Sales', '#ff0000', if([$__INTERNAL__] == 'Marketing', '#006aff', if([$__INTERNAL__] == 'Warehouse', '#b882d7','green')))

---

Please consider giving a Like if my post helped you in any way.