Color swatch

The Color Swatch item field is a color-related field which can be used to:

  • Specify or generate a palette of colors – 5 brand colors & 5 neutral colors
  • Select a color – or a shade of a brand color – which can then be used in frontend like any normal item field value

Most importantly, Color Swatch items are persistent across a website, so when the color palette is changed on one color swatch field the palette changes everywhere. Crucially, the selector color – e.g. brand color 1 – does not change or reset. This makes it possible to change color schemes dynamically across a whole website without the need to reconfigure all color swatch fields.

A color swatch field looks like Figure 1.1 when used on an item type. 

Figure 1.1 The color swatch in Rapido

On each color swatch you have following:

  1. Five brand colors - hover over any of these to select a shade of that color
  2. Five neutral colors
  3. A color picker where you can select any color
  4. Transparent option
  5. A pencil icon to open the Edit palette interface

The Edit palette interface is used to select or generate a set of brand colors and neutral colors for all color swatch fields on a website. Whether the pencil icon is shown can be controlled on the item type, in the parameters for the color swatch field. Set it to Only admin, Show, or Hide.

The Edit palette interface (Figure 2.1) is used to select or generate brand colors and neutral colors for all color swatch fields on a website. The interface can be accessed by clicking the pencil-icon at the far right of any color swatch field.

Brand colors are generated on the left side and neutral colors (based on a brand color) on the right side - it is also possible to override each generated color manually.

To generate brand colors (left side) you can choose between three different methods (Figure 2.1):

  • Color guide
  • Based on image
  • Business palette
Figure 2.1 Generating color schemes

Selecting color guide (Figure 3.1), you set a base color and can then choose between the following palette options:

  • Analogous (rainbow pattern)
  • Monochromatic
  • Triad (suggestions based on the RGB or CMY triad)
  • Complementary
  • Compound
  • Shades
Figure 3.1 The color guide option

Selecting based on image (Figure 3.2), you select an image and will then get suggested brand colors based on that image.

Figure 3.2 The based on image option

Selecting business palette (Figure 3.3), you can choose between predefined color themes in Dynamicweb where you can select a type and then a specific palette for this type.

Figure 3.3 The business palette option

On the right side, you can get suggestions on the neutral colors (Figure 4.1). Select a brand color as the base and you will get a palette of five suggested neutral colors based on the brand color.