---
title: "Swatch — Usage"
canonical: https://sky-ui.cf.sky.com/components/swatch/usage
---

# Swatch — Usage

Swatch components are used to showcase available colour options.

Example of using Swatches for discovering product colour options

## Basic Guidelines

The static Swatches are mostly used as a set to provide an overview of all available colours for a product. Selectable Swatches work well for discovering products as they provide a quick preview of how the product looks like in different colours.

To select a product in a purchase journey, we recommend using the Swatch on a Radio Card instead, as this can offer a preview combined with the colour’s description and is therefore more accessible.

## Behaviour

Selectable Swatches behave similar to [Radios](/components/radio/) and should be treated as such:

- As a best practice, one Swatch is already selected by default. We recommend using the most desired or frequently selected option as the default.
- Clicking an unselected Swatch will deselect whatever other Swatch was previously selected from the list.

## Adjustable Elements

The Swatch component can be set to show a matte colour or making use of a gradient to emulate a gloss finish. It is also possible to display an image instead of a colour (e.g to show a textured surface).

## Alignment

The static variant of the Swatch can be used to showcase colours for a product at an overview level. This can be achieved with negative spacing between items. We also recommend changing the Auto Layout order within Figma to “First on top” (this is the reverse order from the default “Last on top”).

## Accessibility

The optional ‘Contrast outline’ can be used to enhance the contrast between the swatch and its background. The colour of the outline defaults to Grey-50 and should **only** be altered when swatch and background combination don’t achieve the required contrast ratio of 3:1.