Color Scale

Display the published shade stops for each configured palette family.

<ColorScale />

Usage

Display all families from brand.colors.palette. Define the shade values in Colors.

<ColorScale />

Examples

Show every shade family

The opening preview omits only, so every configured palette family appears in configuration order. Each family supplies its own eleven published shade values.

<ColorScale />

Select and order families

Pass palette family IDs to only in display order. This example takes the first two configured families and reverses their order.

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

Selection behavior

Family IDs come from brand.colors.palette, rather than the named swatches in brand.colors.swatches. An unknown family ID throws an error; only={[]} renders the shade headers without any family rows.

Each row displays the eleven published stops from 50 through 950. The component uses those configured values directly rather than generating a new ramp. Each shade is a copy button in the standard Brandtree runtime.

API reference