Color Palette

Display your brand’s named color swatches with optional print values.

<ColorPalette />

Usage

Display every configured swatch using the current page’s brand. Define their names, categories, and color values in Colors.

<ColorPalette />

Examples

Show primary colors

Use category to show one configured group of swatches.

<ColorPalette category="primary" />

Show secondary colors

Use category="secondary" for supporting colors. Each swatch’s category is set in brand.colors.swatches; the sample brand assigns Gray to this group. The primary and secondary examples filter the same configured palette.

<ColorPalette category="secondary" />

Select and order swatches

Pass swatch IDs to only in the order you want them displayed. This example takes the first two configured swatches and reverses their order.

<ColorPalette
  only={props.brand.colors.swatches
    .slice(0, 2)
    .map((color) => color.id)
    .reverse()}
/>

Hide print values

Set print={false} for a simpler palette without the CMYK and RGB breakdowns.

<ColorPalette print={false} />

Override the brand for one palette

Pass brand to replace the automatic brand value for this component. This example derives a brand with just its first configured swatch. Spread both the brand and its colors object to preserve the remaining fields; overrides are not deep-merged. For ordinary filtering, prefer only or category. The page and other components continue using the original brand.

<ColorPalette
  brand={{
    ...props.brand,
    colors: {
      ...props.brand.colors,
      swatches: props.brand.colors.swatches.slice(0, 1),
    },
  }}
/>

Selection behavior

Without a selector, the palette shows every entry in brand.colors.swatches. only takes precedence over category, even when both are provided. An unknown ID in only throws an error; a category with no matching swatches renders no swatches.

These selectors use named swatch IDs. For shade families from brand.colors.palette, use ColorScale.

API reference