Color Swatch

Display one named brand color with its source value and optional print specifications.

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

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. The wrapper scopes the built-in copy interaction to this swatch.

<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.

<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.

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

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:

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 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.

API reference