--- title: "Color picker | Customer's Canvas On-Premises" canonical: "https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/color-picker/" --- # Color picker > When editing product designs, you can change the colors of text and shapes, the fill and outline colors, the background color, and more. The following Color picker is used for this purpose. ![The Color picker.](images/ColorPicker.png) The Color picker may either be configured globally through the **~/Configuration/clientConfig.json** file, or individually for each product - or even [for a single page](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/editor-configuration/multipage-config.md) - using the [IConfiguration](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) interface. In this topic, we will configure the Color picker through [IColorPickerConfig](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/WidgetConfigurationInterfaces.IColorPickerConfig.md). ## Configuring the Color Field This field allows you to select colors in either HEX, RGB, or CMYK format by clicking a color or typing in channel values. To save the selected color in the **Recent palette** and continue with the selection process, click **Add to palette**. You can specify which color input formats will be available to your users as follows: ```js title="Specifying a color space" let configuration = { widgets: { ColorPicker: { colorTypeDropdownEnabled: true, defaultColorType: "cmyk", availableColorTypes: ["cmyk", "rgb", "hex"] } } }; ``` If `colorTypeDropdownEnabled` is `false`, your users will define the colors in the format specified in the `defaultColorType` property. When the `availableColorSpaces` array contains only one element, the **Color type** box will not appear. When several formats are defined, you can select one by using this drop-down box. To disable the color field and allow your users to select colors only from the predefined palettes, you can set `showPaletteOnly` to `true`. ```js title="Disabling the color field" let configuration = { widgets: { ColorPicker: { showPaletteOnly: true } } }; ``` ## Configuring Palettes The Color picker allows you to enable the following palettes: - [NoColorSection](#nocolorsection) of the transparent color. - [RecentSection](#recentsection) of previously selected colors. - [ThemeSection](#themesection) of colors specified in product themes. - [PaletteSection](#palettesection) of predefined color swatches. A color picker may contain as many `PaletteSection` palettes as you need. However, `NoColorSection`, `RecentSection`, and `ThemeSection` can be represented in a single copy. To define a palette, you can use the [IColorPickerConfigSection](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) interface. This is how you can specify the section type and other properties. ```js title="Color sections" let configuration = { widgets: { ColorPicker: { showPaletteOnly: true, sections: [ { // The section type. type: "PaletteSection", // The section name. translationKey: "Text colors", // The appearance of the color swatches. viewType: "Line", // A target color property. targets: [ "Text" ], // Color swatches. palette: [["rgb(0, 0, 0)","rgb(255, 255, 255)"]] } ] } } }; ``` Note that section names are only displayed when a color picker has two or more sections. In this case, you can also set the `sectionCollapseEnabled` property to `true` to allow your users to collapse these sections by clicking their headers. Now, let's see how you can configure these sections. ### NoColorSection This section only contains the swatch of the transparent color and it appears as follows: ![NoColorSection in the Color picker.](images/ColorPickerNoColor.png) To allow your users to reset a color, specify the `NoColorSection` type. In `targets`, you can set [specific properties](https://customerscanvas.com/docs/on-premises/design-editor/iframe-api/reference/design-editor-iframe/interfaces/ConfigurationInterfaces.IConfiguration.md) for this section, which will appear in the Color picker. You can assume that when you define `targets`, you create different pickers for different color properties. ```js title="NoColor section" sections: [ { type: "NoColorSection", targets: [ "Fill", "Border", "Background" ] } ] ``` ### RecentSection When the user assigns a color, this color will be automatically added to the `RecentSection`. To enable this section in the Color picker, you can only specify the section `type`. ```js title="Recent section" sections: [ { type: "RecentSection" } ] ``` ### ThemeSection You can enable a section of theme colors when defining product themes in the editor. For example, this section may look as follows: ![ThemeSection in the Color picker.](images/ColorPickerThemes.png) Here, we organized the colors as a `Line` to display the names of color categories. These swatches come from an active theme, and you don't need to explicitly list them. The following example illustrates how you can define product themes and the editor's configuration to set up the Color picker in this way. ```js title="Theme section" // Define two color sets. let themeColors = { "violetSet": { "main": "rgb(102,45,145)", "alternative": "rgb(150,67,214)", "text": "rgb(32,18,77)" }, "roseSet": { "main": "rgb(241,160,175)", "alternative": "rgb(255,200,214)", "text": "rgb(224,102,102)" } }; // Configure the editor. let configuration = { // Pass these color sets into the editor. productThemes: themeColors, // Select an active theme. defaultProductTheme: "roseSet", widgets: { ColorPicker: { // Disable the color field. showPaletteOnly: true, // Display the colors of the active theme. sections: [ { type: "ThemeSection", viewType: "Line" } ] } } }; ``` ### PaletteSection When you need to predefine color swatches, you can configure the `PaletteSection` and list the colors in a two-dimensional array. Let us assume that we want to display the following colors: ![A custom palette.](images/CustomPalette.png) The following palette configuration defines these colors in the `rgb` and `cmyk` formats. ```js title="A palette" let configuration = { widgets: { ColorPicker: { showPaletteOnly: true, sections: [ { type: "PaletteSection", palette: [["rgb(0, 0, 0)", "rgb(255, 255, 255)"], ["cmyk(0, 1, 1, 0, 1)", "cmyk(0%, 0%, 100%, 0%, 100%)", "rgb(0, 255, 0)", "rgb(0, 255, 255)", "rgb(0, 0, 255)", "cmyk(0, 0.9, 0, 0, 1.0)"]] } ] } } }; ``` For more details on how to define the color swatches in different color spaces, refer to the [defining colors](https://customerscanvas.com/docs/on-premises/design-editor/apis/defining-colors.md) topic. You can define titles for your color swatches that appear when the user hovers over a specific color, for example: ```js title="Color titles" let configuration = { widgets: { ColorPicker: { showPaletteOnly: true, paletteHintsEnabled: true, sections: [{ type: "PaletteSection", palette: [[ { "color": "rgb(25,25,112)", "title": "Midnight blue" }, { "color": "rgb(139,0,130)", "title": "Dark magenta" }, { "color": "rgb(189,183,107)", "title": "Dark khaki" }, { "color": "rgb(255,99,71)", "title": "Tomato" } ]] }] } } }; ``` This palette will look as follows: ![Color swatch titles.](images/ColorPickerHover.png) When you specify the `viewType` as a `line`, these titles also appear next to the swatches. ![Color swatch titles.](images/ColorPickerTitles.png) To disable the color titles, set `paletteHintsEnabled` to `false`.