---
title: Color Swatch
description: Display one named brand color with its source value and optional print specifications.
sidebar:
  order: 15
---

import previewCode from "../../snippets/color-swatch.mdx?raw";
import variantCode from "../../snippets/color-swatch-print.mdx?raw";

<ComponentPreview path="color-swatch" code={previewCode} />

## Usage

Pass a configured swatch object, not its ID. This example needs at least one
entry in `brand.colors.swatches`; define those entries in [Colors](/colors).
The wrapper scopes the built-in copy interaction to this swatch.

```mdx
<div data-color-palette>
  <ColorSwatch color={props.brand.colors.swatches[0]} />
</div>
```

## Examples

### Show the source color only

The opening preview selects the configured Blue swatch and sets `print={false}`
for a compact display. The source value and usage note remain visible.

```mdx
<div data-color-palette>
  <ColorSwatch
    color={
      props.brand.colors.swatches.find((swatch) => swatch.id === "blue") ??
      props.brand.colors.swatches[0]
    }
    print={false}
  />
</div>
```

### Include print specifications

The opening preview hides supplementary values with `print={false}`. Omit that
prop to show RGB, any configured CMYK and Pantone values, and a hex conversion
when the source color uses a different color space.

<ComponentPreview path="color-swatch-print" code={variantCode} />

### Supply production specifications

Add `cmyk` and `pantone` to the relevant object in `brand.colors.swatches` to
include production specifications when `print` is enabled. For example, the
optional fields have this shape; replace the values with approved print data
rather than treating them as a conversion of the preview blue:

```ts
cmyk: [100, 75, 0, 0],
pantone: "Your approved Pantone reference",
```

`usage`, `name`, and `on` also come from that swatch entry. Color values may use
any supported source color space; see [Colors](/colors) for the complete schema.

## Swatch resolution

The component looks up `color.id` in the current brand’s swatches and uses the
matching localized entry when available. If the ID is absent, it uses the
supplied object. The source value and configured usage note remain visible when
`print={false}`.

There is no `class` prop; place layout classes on a wrapper. For a group of
swatches with selection and ordering, use [Color Palette](/components/color-palette).

## API reference

| Prop | Type | Default | Description |
| - | - | - | - |
| `brand?` | `BrandConfig` | `props.brand` | Override the resolved brand for this component. Supplied automatically in Brandtree MDX. |
| `ui?` | `UIStrings` | `props.ui` | Override interface strings for this component. Supplied automatically in Brandtree MDX. |
| `color` | `BrandSwatch` | - | |
| `print?` | `boolean` | `true` | |