White paper: Templates in web-to-print.  Free download

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.

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 - using the IConfiguration interface. In this article, we will configure the Color picker through IConfiguration.

Configuring the Color Field

This field allows you to select colors in either RGB or CMYK 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 spaces will be available to your users as follows:

JavaScript
let configuration = {
    widgets: {
        ColorPicker: {
            defaultColorSpace: "cmyk",
            availableColorSpaces: ["rgb", "cmyk"]
        }
    }
};

When the availableColorSpaces array contains only one element, the Color space box will not appear. When both RGB and CMYK 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.

JavaScript
let configuration = {
    widgets: {
        ColorPicker: {
            showPaletteOnly: true
        }
    }
};

Configuring Palettes

The Color picker allows you to enable the following palettes:

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 interface. This is how you can specify the section type and other properties.

JavaScript
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.

To allow your users to reset a color, specify the NoColorSection type. In targets, you can set specific properties 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.

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.

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.

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.

JavaScript
// 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.

The following palette configuration defines these colors in the rgb and cmyk formats.

JavaScript
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)"]]
              }
            ]
        }
    }
};

Defining Color Swatches

RGB Colors

Customer's Canvas supports both RGB and RGBA color models to display products in the Design Editor. To define the alpha channel in RGBA, use values in the range [0, 1].

"rgb(0, 255, 255)"
"rgba(0,121,0,0.8)"

CMYK Colors

When you have CMYK templates, you may find it important to specify colors in the CMYK color space.

The following example illustrates how you can specify CMYK components and the alpha channel as percentages and values in the range [0, 1].

"cmyk(0%, 0%, 100%, 0%, 100%)"
"cmyk(0, 0.9, 0, 0, 1.0)"

Spot Colors

When you print certain products, you may want to limit the colors available to a user by a specific list of values, which correspond to the spot colors of your printer.

To add a spot color to the Color picker, define it in the following format: spot('Color name', altColor, solidity, tint). Here, you need to specify the name of the ink, an alternative color for the color preview, a solidity value in the range [0, 1], and a tint of the spot color, for example:

"spot(PANTONE Rubine Red C, cmyk(30%,100%,90%,36%,100%), 1, 100%)"

Lab Colors

To add a Lab color, you need to define its components as follows: lab(lightness, a, b, alpha). For example:

"lab(62, -44, -50, 50%)"

See Also

Manual