---
title: "Colors"
canonical: https://customerscanvas.com/docs/cc4/colors.htm
archived: true
applies_to:
  - product: "Customer's Canvas On-Premises"
  - product: "Design Editor"
    versions: ["4.4.25", "4.x (may differ)"]
---

**You’re viewing outdated documentation.** [View the latest Customer’s Canvas On-Premises documentation](https://customerscanvas.com/docs/on-premises/).

# Colors

**Applies to:** Customer's Canvas On-Premises; Design Editor 4.4.25, 4.x (may differ) · **Archived documentation**
 
When editing texts and vector elements in the editor, you can change the fill or outline colors. The following Color picker is used for this purpose.
 
![The Color picker.](https://customerscanvas.com/docs/cc4/images/ColorPicker.png)
 
By using the **Color space** menu, you can select either **RGB** or **CMYK**. To save a new color, click **Add to palette**.
 
The Color picker may be configured either globally, through the `~\Configuration\clientConfig.json` file, or individually for each product, or even [for a single page](https://customerscanvas.com/docs/cc4/customizing-widgets.htm.md), using the [IConfiguration](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface. For the purposes of this article, we will configure the Color picker by using the [IConfiguration](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.configuration.iconfiguration.htm.md) interface.
 
You can specify the color spaces available to your users as follows:
 
```
configuration = {
    widgets: {
        ColorPicker: {
            defaultColorSpace: "cmyk",
            availableColorSpaces: ["rgb", "cmyk"]
        }
    }
};
```
 
When you print certain products, you may want to limit the colors available to a user by a specific list of values, corresponding to the spot colors of your printer. Customer's Canvas allows for editing the fixed palette and disabling a continuous color selection. First, let us turn off the continuous color selection functionality and leave only the palette:
 
```
configuration = {
    widgets: {
        ColorPicker: {
            showPaletteOnly: true
        }
    }
};
```
 
Now we can configure the palette. To do this, we should set up the **ColorPicker.palette** property. It accepts a JSON two-dimensional array of colors in a CSS-compatible format. Let us assume that we want to display the following colors:
 
![A custom palette.](https://customerscanvas.com/docs/cc4/images/CustomPalette.png)
 
The following palette configuration defines these colors in the `rgb` and `cmyk` formats.
 
```
configuration = {
    widgets: {
        ColorPicker: {
            showPaletteOnly: true
            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)"]]
        }
    }
};
```
 
When you have CMYK templates, you may find it important to specify colors in the CMYK color space. The previous example illustrates how you can specify CMYK components and an alpha channel in percentage and values in the range [`0`..`1`].
 
**Note** 
You can specify CMYK colors in your palette in the deprecated `device-cmyk` format, where the first four values are the CMYK components in the range from `0` to `255` (similar to RGB). In this case, Customer's Canvas automatically converts CMYK colors to the RGB equivalents that the user sees on a screen. For example, `device-cmyk(0, 255, 255, 0, 1, rgb(255, 0, 0))`
 
## See Also
  
### Manual
 
- [Color Management in Customer's Canvas](https://customerscanvas.com/docs/cc4/color-management.htm.md)
- [Understanding Print Products](https://customerscanvas.com/docs/cc4/understanding-print-products.htm.md)
- [Customizing the User Interface](https://customerscanvas.com/docs/cc4/customizing-user-interface.htm.md)

### IFrame API Reference
 
- [IConfiguration](https://customerscanvas.com/docs/cc4/customerscanvas.iframeapi.configuration.iconfiguration.htm.md)