SharePoint List Formatting
Back to view formats
View formattingSharePoint Online

Color Picker

This sample contains pre-defined palettes of color (default matches Power Apps). These palettes are then made available as a color picker setting the value on selection.

Get this format View on GitHub

Shared by André Lage
Updated Jan 17, 2022

Color Picker formatting preview
Sample preview · View original animation

Copy. Apply. Make it yours.

Get this format

3 definitions

Review the requirements below, then paste this JSON into the matching formatting panel. Show me where.

Use your list's internal column names and replace any tenant-specific URLs or flow IDs. Formatting is presentation, not a way to secure data.

View formatting
Download JSON
{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/row-formatting.schema.json",
  "hideColumnHeader": true,
  "hideSelection": true,
  "rowFormatter": {
    "elmType": "div",
    "children": [
      {
        "elmType": "div",
        "children": [
          {
            "elmType": "div",
            "style": {
              "display": "flex"
            },
            "children": [
              {
                "elmType": "div",
                "style": {
                  "padding": "10px"
                },
                "txtContent": "Color Picker - 12 sections"
              },
              {
                "elmType": "div",
                "style": {
                  "padding": "5px",
                  "border-radius": "5px",
                  "cursor": "pointer",
                  "heigth": "20px",
                  "width": "20px"
                },
                "attributes": {
                  "class": "ms-bgColor-gray30--hover ms-fontSize-20",
                  "iconName": "color"
                },
                "customCardProps": {
                  "openOnEvent": "click",
                  "isBeakVisible": false,
                  "directionalHint": "topCenter",
                  "formatter": {
                    "elmType": "div",
                    "style": {
                      "padding": "5px"
                    },
                    "children": [
                      {
                        "elmType": "div",
                        "children": [
                          {
                            "elmType": "div",
                            "style": {
                              "display": "flex"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#ffff00",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Yellow",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#ffff00"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#adff2f",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Yellow-Green",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#adff2f"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#008000",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Green",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#008000"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#0d98ba",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Blue-green",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#0d98ba"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#0000ff",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Blue",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#0000ff"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#8a2be2",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Blue-violet",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#8a2be2"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          },
                          {
                            "elmType": "div",
                            "style": {
                              "display": "flex"
                            },
                            "children": [
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#ee82ee",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Violet",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#ee82ee"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#953553",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Red-Violet",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#953553"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#ff0000",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Red",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#ff0000"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#ff4500",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Red-Orange",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#ff4500"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#ffa500",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Orange",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#ffa500"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              },
                              {
                                "elmType": "div",
                                "children": [
                                  {
                                    "elmType": "div",
                                    "style": {
                                      "display": "flex"
                                    },
                                    "children": [
                                      {
                                        "elmType": "div",
                                        "attributes": {
                                          "class": "ms-bgColor-gray30--hover"
                                        },
                                        "style": {
                                          "border-radius": "5px"
                                        },
                                        "children": [
                                          {
                                            "elmType": "div",
                                            "style": {
                                              "border": "1px solid #eeeeee",
                                              "background-color": "#FFAE42",
                                              "border-radius": "50%",
                                              "height": "10px",
                                              "width": "10px",
                                              "padding": "5px",
                                              "margin": "5px",
                                              "cursor": "pointer"
                                            },
                                            "attributes": {
                                              "title": "Yellow-Orange",
                                              "class": "ms-bgColor-gray30--hover"
                                            },
                                            "customRowAction": {
                                              "action": "setValue",
                                              "actionInput": {
                                                "ColorP": "#FFAE42"
                                              }
                                            }
                                          }
                                        ]
                                      }
                                    ]
                                  }
                                ]
                              }
                            ]
                          }
                        ]
                      }
                    ]
                  }
                }
              }
            ]
          },
          {
            "elmType": "div",
            "style": {
              "background-color": "[$ColorP]",
              "border": "1px solid #eeeeee",
              "width": "100px",
              "height": "50px",
              "border-radius": "10px"
            }
          }
        ]
      }
    ]
  }
}
View sourceLink to this definitioncolor-picker-12sections-palette.json

From the contributor

How to use this sample

Summary

This sample contains pre defined palettes of color as listed here: color enumeration in Power Apps. These palettes are then made available as a color picker setting the value on selection. 2 additional color palettes, "12 sections" and "Basic", are also provided as separate formats.

screenshot of the sample

Main sample (color-picker.json)

This format allow users to select up to 140 colors existing in Power Apps, it's also possible to select what colors can be displayed using the field ColorF as filter and include only the names of the colors you wish to include. Fot instance: red,azure,gold.

color picker format

If ColorF is empty then all 140 colors are displayed.

View requirements

  • The format expect the following fields:
Field Type
Title Single line of text
ColorP Single lines of text
ColorF Single lines of text

Sample

Solution Author(s)
color-picker.json André Lage
color-picker-12Sections-palette.json André Lage
color-picker-basic-palette.json André Lage

Version history

Version Date Comments
1.0 January 17, 2022 Initial release

Disclaimer

THIS CODE IS PROVIDED AS IS WITHOUT WARRANTY OF ANY KIND, EITHER EXPRESS OR IMPLIED, INCLUDING ANY IMPLIED WARRANTIES OF FITNESS FOR A PARTICULAR PURPOSE, MERCHANTABILITY, OR NON-INFRINGEMENT.

Additional notes

None

Keep exploring

More formats like this

Key Dates Timeline Checklist

A modern horizontal timeline view that displays key dates or milestones as monthly columns.

Explore format

Sports Card

This SharePoint JSON view formatting sample transforms list items into vertical sports trading cards with header bar, country badge, player silhouette, name band, star rating and three stat bars.

Explore format

Credit / Loyalty Card

Transforms list items into realistic credit / loyalty cards with a brand name, tier pill, EMV chip, contactless symbol, embossed card number, cardholder, expiry, and network logo. The card colour is driven by the Tier value.

Explore format