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.

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.

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, using the IConfiguration interface.

For the purposes of this article, we will configure the Color picker using the IConfiguration interface.

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.

The following palette configuration defines these colors.

configuration = { widgets: {
    ColorPicker: {
        showPaletteOnly: true,
        palette: [["rgb(0, 0, 0)","rgb(255, 255, 255)"],
                  ["device-cmyk(29, 231, 255, 7, 1, rgb(255, 0, 0))","rgb(255, 255, 0)","rgb(0, 255, 0)","rgb(0, 255, 255)","rgb(0, 0, 255)","rgb(255, 0, 255)"]]

When you have CMYK templates, you may find it important to specify not just RGB values, but also precise CMYK equivalents for them. This way, you do not have to convert CMYK <-> RGB to be sure that you will always have exactly the colors you expect. You can do it using the device-cmyk function:

device-cmyk(29, 231, 255, 7, 1, rgb(255, 0, 0))

The first four values are the CMYK components in the range from 0 to 255 (similar to RGB), the fifth value is an alpha channel (i.e. the color opacity in the range [0..1]), and the last one is an RGB equivalent that the user will see on a screen.


Be careful! It is your responsibility to specify the correct color. If your CMYK color is, for example, green, while your RGB value is yellow, the user will be misled as they will expect that you will print yellow. That is why you should carefully pick all values, e.g. using Adobe Photoshop.

See Also


IFrame API Reference