Colour swatch

How to use the colour swatch

The colour swatch is used to demonstrate what colour variants of a product are available or to present the user with a choice of colours to choose from.

When using the colour swatch:

• Use truncation when there are more colour swatches than the space can allow
• Don't use truncation when a colour swatch is being used to select a colour
• Always include a visible label to show the name of the selected colour
• Use the disabled state when a colour variant is not available or sold out

Types of colour swatch

There are two sizes of colour swatches for different experiences.

Large Colour Swatch

The large colour swatch comes in the individual swatch size of 32px x 32px. It should be used where a colour needs to be selected from a group, for example on a product page. This swatch includes a label where the selected colour name is displayed.

Small Colour Swatch

The small colour swatch comes in the individual swatch size of 24px x 24px. It should be used to demonstrate what colours are available, but not to select a colour from a group, for example on a product card on a listing page. It includes optional truncation to show there are more colour variants available than the amount that can be displayed in the space.

Styles of colour swatch

You can use the colour swatch to display block colours or metallic and wood effect patterns.

Colour

Any colour can be selected in each individual swatch within the swatch group.

Metallic

Metallic patterns can be activated within each individual swatch within the colour swatch group.

Wood

Wood patterns can be individually activated within the colour swatch group.

Mixed

Colour, metallic and wood patterns can be displayed individually in the same group swatch.

Was this page helpful?