> For the complete documentation index, see [llms.txt](https://modutheme.gitbook.io/helix/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://modutheme.gitbook.io/helix/theme-blocks/basic/colors.md).

# Colors

A row of color swatches, each built from a nested **Item** block. Use it to hint at a product's available colorways on a banner or card — the swatches are decorative, so link each one to the matching product or collection.

## Settings

| Setting     | Description                                                                                                   |
| ----------- | ------------------------------------------------------------------------------------------------------------- |
| Gap         | Space between the swatches — set separately for desktop and mobile.                                           |
| Size        | **Width** and **Height** of each swatch, with independent mobile values via **Custom for mobile**.            |
| Item border | Corner radius of the swatches: Inherit, Square, Rounded, Full, or Custom.                                     |
| Animation   | Entrance effect (Fade, Scale, Slide from left / right / bottom) played on scroll, with an optional **Delay**. |
| Padding     | Outer spacing: top / bottom, with independent mobile values via **Custom for mobile**.                        |

The swatches follow the alignment of the block that holds them, and wrap onto a new line when they run out of room. Adding the block from the picker starts you with three items.

## Available blocks

### Item

A single swatch inside a Colors block.

| Setting          | Description                                                         |
| ---------------- | ------------------------------------------------------------------- |
| Color            | Fill color of the swatch. Supports transparency.                    |
| Link             | Makes the swatch clickable — for example the product in that color. |
| Open in new tab  | Opens the link in a new browser tab.                                |
| Border thickness | Width of the swatch outline. Useful for white or very light colors. |
| Type             | **Inherit** the scheme's border color, or set a **Custom** one.     |
| Border           | The custom border color, when Type is Custom.                       |

{% hint style="info" %}
Colors is a display block, not a variant picker — clicking a swatch does not change the variant on the page. Give each item a **Link** if you want it to lead somewhere.
{% endhint %}