---
title: "Pantone color picker | Customer's Canvas On-Premises"
canonical: "https://customerscanvas.com/docs/on-premises/ui-framework/widgets/pantone-color-picker/"
---

# Pantone color picker

> A widget displaying color swatches to allow your users to change colors of design elements. This is an improved [Color picker](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/color-picker.md) widget for working with Pantone colors. It displays color options and can apply filters to the color set, for example, filter them by name.

![Pantone color picker widget.](images/pantone-color-picker.png)

## General info

- **type**: `pantone-color-picker`

## Params

- `colors` - an array of color swatches available for the user in the value-tags format:
  - `value` - the color value in the format `spot(PANTONE 123 C, rgba(1,2,3,1))`.
  - `tags` an array of strings corresponding to filter tags.
- `filters` - an array of filters:
  - `title` the filter name displayed when the filter is activated.
  - `displayColor` - the preview of the selected color.
  - `tag` - the tag bound to the colors
- `height` - the widget height in pixels, optional. The default value is `"275px"`.

## Example

```json
{
  "name": "pantone-color-picker",
  "type": "pantone-color-picker",
  "params": {
      "colors": [
        {
          "value": "spot(PANTONE Lorem C,rgba(5,255,0,1))",
          "tags": ["green"]
        },
        {
          "value": "spot(PANTONE ipsum C,rgba(255,5,0,1))",
          "tags": ["red"]
        },
        {
          "value": "spot(PANTONE sit C,rgba(255,105,0,1))",
          "tags": ["red"]
        },
        {
          "value": "spot(PANTONE dolor C,rgba(5,255,255,1))",
          "tags": ["others", "green"]
        },
      ],
      "filters": [
        {
          "title": "green",
          "displayColor": "#0f0",
          "tag": "green"
        },
        {
          "title": "red",
          "displayColor": "#F00",
          "tag": "red"
        },
        {
          "title": "not sure",
          "displayColor": "#fff",
          "tag": "others"
        }
      ],
    "height": "600"
  }
}
```

---
You can find more details about the properties of this widget in the [AuWidgetPantoneColorPicker class](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-pantone-color-picker.AuWidgetPantoneColorPickerConfig.md#pantone-color-picker.auwidgetpantonecolorpickerconfig).

For more details about configuration parameters, refer to [AuWidgetPantoneColorPickerConfig](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/reference/au-widget-pantone-color-picker.AuWidgetPantoneColorPickerConfig.md#pantone-color-picker.auwidgetpantonecolorpickerconfig).