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

# Color selector

> This widget displays color swatches that users can select. Unlike the [color-picker](https://customerscanvas.com/docs/on-premises/ui-framework/widgets/color-picker.md) widget, it displays not only the color box but also an alternative color and their names, if needed.

![Color-selector widget.](images/color-selector.png)

## Configuring widget

To add a color selector to your editor, you must configure a widget for the `color-selector` type.

```json
{
    "name": "color-selector",
    "type": "color-selector",
    "params": {
        ...
    }
}
```

In `params`, you can define the widget caption `text` that appears on panels, `popupText` that appears as a hint in the pop-up box, and an array of color swatches.

```json
{
    "name": "color-selector",
    "type": "color-selector",
    "params": {
        "text": "Selected colors",
        "popupText": "Select a color set",
        "colors": [
            ...
        ]
    }
}
```

This widget allows you to implement scenarios when selecting a single color as well as a pair or more colors at once. You can define a color by passing a HEX or CSS-style color value as a string.

```json
{
    "title": "Deep Sky Blue",
    "value": "#00BFFF"
}
```

You can also specify it as an array with a single element.

```json
{
    "title": "Coral",
    "value": ["rgb(255, 127, 80)"]
}
```

If you add two colors to the array, a pair of colors will be selected.

```json
{
    "title": "Pale Green / Dark Green",
    "value": [
        "#98FB98",
        "#006400"
    ]
}
```

Note that you can define any number of colors in this array. If you refer to the `value` of this widget in the config, you will get the entire array.

```json
{
    "type": "static-text",
    "name": "txt",
    "params": {
        "text": "{{JSON.stringify($['color-selector']._.value)}}"
    }
}
```

## Visualization of color selector items

When you define a set of single colors, they will fill the background of the circle corresponding to the element.

![Color selector single swatches.](images/selector-plain.png)

When you define a set of color pairs, the circle will split into two parts.

![Color selector pair swatches.](images/selector-pair.png)

In some cases, you may need to overlay these colors on top of each other to display, for example, how text may look on a background. You can provide a custom inline SVG string in which you must refer to `currentColor`.

```json
{
    "name": "color-selector",
    "type": "color-selector",
    "params": {
        "text": "Selected colors",
        "popupText": "Select a color set",
        "svg": "<svg viewBox='0 0 20 20'><path d='m5 5h10v10h-10z' fill='currentColor'/></svg>",
        ...
    }
```

The `currentColor` corresponds to the first color in the array, and the second color fills the background.

![Color selector swatches with an overlay.](images/selector-svg.png)

If you use SVG with one color, this color is used to draw the SVG on a white circle.

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

## Config example

The following example illustrates how you can define five color pairs in the color selector displayed above. When a swatch is selected, its colors and title will appear in the text widgets.

```json
{
    "widgets": [
    {
      "name": "sidebar",
      "type": "group",
      "params": {
        "type": "noncollapsible",
        "tabs": [
          {
            "widgets": [
            {
                "name": "color-selector",
                "type": "color-selector",
                "params": {
                    "text": "Selected colors",
                    "popupText": "Select a color set",
                    "svg": "<svg width='57' height='60' viewBox='0 0 57 60' fill='none' xmlns='http://www.w3.org/2000/svg'>\n<path d='m15.29 53.57 10.996-28.633h4.082l11.719 28.633h-4.3164l-3.3398-8.6719h-11.973l-3.1445 8.6719zm8.2617-11.758h9.707l-2.9883-7.9297q-1.3672-3.6133-2.0312-5.9375-.54687 2.7539-1.543 5.4688z' fill='currentColor'/></svg>",
                    "colors": [
                    {
                        "title": "Pastel Pink / Salmon",
                        "value": [ "#F4CDD3", "#E08697" ]
                    },
                    {
                        "title": "Coral / Maroon",
                        "value": [ "FF7F50", "#800000" ]
                    },
                    {
                        "title": "Snow / Navy",
                        "value": [ "#FFFAFA", "#151B4E" ]
                    },
                    {
                        "title": "Pale Green / Dark Green",
                        "value": [ "#98FB98", "#006400" ]
                    },
                    {
                        "title": "Azure / DeepSky Blue",
                        "value": [ "#F0FFFF", "#00BFFF" ]
                    }
                    ]
                }
            },
            {
                "type": "static-text",
                "name": "txt1",
                "params": {
                    "text": "{{$['color-selector']._.title}}",
                    "style": {
                        "color": "{{$['color-selector']._.value[0]}}"
                    }
                }
            },
            {
                "type": "static-text",
                "name": "txt2",
                "params": {
                    "text": "{{$['color-selector']._.title}}",
                    "style": {
                        "color": "{{$['color-selector']._.value[1]}}"
                    }
                }
            }]
          }
        ]
      }
    }
}
```