Hello! 

Not great at coding but hoping somebody can help. I have a SharePoint that I’d like to custom color the choice pills based on the hex codes below. 

1-CORP#67a3c75-MPE

#5f497a

6-THETIS#e5bd0010-ENERGY#82990011-MPI#6a153214-MUSI#0b2e6a15-MPLI#0b5b5818-MUCI#c88ca420-MICON#8bc19f21-MCI#ff7b2e22-AMI#0a7e8c24-MRSI#7f5c3326-MTI#bf4f5160-MTG#a4348261-JDH#4f2cd0101-MTPL#9c7c38201-MTCI#005b39202-MCJV#902d0eAC#a6a6a6

This is the current JSON in the list:

{
“$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”: [
“[$KCO]”,
“1-CORP”
]
},
“sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“5-MPE”
]
},
“sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“6-THETIS”
]
},
“sp-css-backgroundColor-BgGold sp-css-color-GoldFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“”
]
},
“”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“10-MEG”
]
},
“sp-css-backgroundColor-BgCoral sp-css-color-CoralFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“11-MPI”
]
},
“sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“14-MUSI”
]
},
“sp-css-backgroundColor-BgCyan sp-css-color-CyanFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“15-MPLI”
]
},
“sp-css-backgroundColor-BgPeach sp-css-color-PeachFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“18-MUCI”
]
},
“sp-css-backgroundColor-BgSage sp-css-color-SageFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“20-MICON”
]
},
“sp-css-backgroundColor-BgLightPurple sp-css-color-LightPurpleFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“21-MCI”
]
},
“sp-css-backgroundColor-BgViolet sp-css-color-VioletFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“22-AMI”
]
},
“sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“24-MRSI”
]
},
“sp-css-backgroundColor-BgMauve sp-css-color-MauveFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“26-MTI”
]
},
“sp-css-backgroundColor-BgLilac sp-css-color-LilacFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“60-MTG”
]
},
“sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“61-JDH”
]
},
“sp-css-backgroundColor-BgBlue sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“101-MTPL”
]
},
“sp-css-backgroundColor-BgGreen sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“201-MTCI”
]
},
“sp-css-backgroundColor-BgBrown sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“202-MCJV”
]
},
“sp-css-backgroundColor-BgDarkRed sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“AC”
]
},
“sp-css-backgroundColor-BgRed sp-css-color-WhiteFont”,
“sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary”
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
},
“txtContent”: “[$KCO]”
}
]
}

​Hello!  Not great at coding but hoping somebody can help. I have a SharePoint that I’d like to custom color the choice pills based on the hex codes below.  1-CORP#67a3c75-MPE#5f497a6-THETIS#e5bd0010-ENERGY#82990011-MPI#6a153214-MUSI#0b2e6a15-MPLI#0b5b5818-MUCI#c88ca420-MICON#8bc19f21-MCI#ff7b2e22-AMI#0a7e8c24-MRSI#7f5c3326-MTI#bf4f5160-MTG#a4348261-JDH#4f2cd0101-MTPL#9c7c38201-MTCI#005b39202-MCJV#902d0eAC#a6a6a6  This is the current JSON in the list:  {
“$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”: [
“[$KCO]”,
“1-CORP”
]
},
“sp-css-backgroundColor-BgCornflowerBlue sp-css-color-CornflowerBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“5-MPE”
]
},
“sp-css-backgroundColor-BgMintGreen sp-css-color-MintGreenFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“6-THETIS”
]
},
“sp-css-backgroundColor-BgGold sp-css-color-GoldFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“”
]
},
“”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“10-MEG”
]
},
“sp-css-backgroundColor-BgCoral sp-css-color-CoralFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“11-MPI”
]
},
“sp-css-backgroundColor-BgDustRose sp-css-color-DustRoseFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“14-MUSI”
]
},
“sp-css-backgroundColor-BgCyan sp-css-color-CyanFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“15-MPLI”
]
},
“sp-css-backgroundColor-BgPeach sp-css-color-PeachFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“18-MUCI”
]
},
“sp-css-backgroundColor-BgSage sp-css-color-SageFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“20-MICON”
]
},
“sp-css-backgroundColor-BgLightPurple sp-css-color-LightPurpleFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“21-MCI”
]
},
“sp-css-backgroundColor-BgViolet sp-css-color-VioletFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“22-AMI”
]
},
“sp-css-backgroundColor-BgLightBlue sp-css-color-LightBlueFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“24-MRSI”
]
},
“sp-css-backgroundColor-BgMauve sp-css-color-MauveFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“26-MTI”
]
},
“sp-css-backgroundColor-BgLilac sp-css-color-LilacFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“60-MTG”
]
},
“sp-css-backgroundColor-BgLightGray sp-css-color-LightGrayFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“61-JDH”
]
},
“sp-css-backgroundColor-BgBlue sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“101-MTPL”
]
},
“sp-css-backgroundColor-BgGreen sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“201-MTCI”
]
},
“sp-css-backgroundColor-BgBrown sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“202-MCJV”
]
},
“sp-css-backgroundColor-BgDarkRed sp-css-color-WhiteFont”,
{
“operator”: “:”,
“operands”: [
{
“operator”: “==”,
“operands”: [
“[$KCO]”,
“AC”
]
},
“sp-css-backgroundColor-BgRed sp-css-color-WhiteFont”,
“sp-field-borderAllRegular sp-field-borderAllSolid sp-css-borderColor-neutralSecondary”
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
]
}
},
“txtContent”: “[$KCO]”
}
]
}    Read More

​