---
title: Color Scale
description: Display the published shade stops for each configured palette family.
sidebar:
  order: 16
---

import previewCode from "../../snippets/color-scale.mdx?raw";
import variantCode from "../../snippets/color-scale-selected.mdx?raw";

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

## Usage

Display all families from
`brand.colors.palette`. Define the shade values in [Colors](/colors).

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

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

<ComponentPreview path="color-scale-selected" code={variantCode} />

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

| 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. |
| `only?` | `string[]` | - | Limit and order shade families by id. Defaults to every configured scale. |
| `class?` | `string` | - | Additional class on the outer element. |