> This page is for 文档.

> For clean Markdown content of this page, append .md to this URL. For the complete documentation index, see https://buildwithfern.com/learn/llms.txt.

# Color

> Display color palettes as swatches with names and values.

The `<Color>` component displays color swatches, for example to document a design system's palette. Each `<Color.Item>` shows a swatch with its name and value. A value can differ between light and dark mode.

## Usage

**`Markdown`**

```jsx Markdown
<Color variant="compact">
  <Color.Item name="primary" value="#16a34a" />
  <Color.Item name="surface" value={{ light: "#ffffff", dark: "#0b0b0b" }} />
</Color>
```

## Variants

### Table

The `table` variant groups swatches into titled rows with `<Color.Row>`.

#### Brand

#### Neutral

**`Markdown`**

```jsx Markdown
<Color variant="table">
  <Color.Row title="Brand">
    <Color.Item name="brand-500" value="#0ea5e9" />
    <Color.Item name="brand-700" value="#0369a1" />
  </Color.Row>
  <Color.Row title="Neutral">
    <Color.Item name="gray-100" value="#f3f4f6" />
    <Color.Item name="gray-900" value="#111827" />
  </Color.Row>
</Color>
```

## Properties

### Color

**`variant`** `'compact' | 'table'` — default: compact

`compact` lays out swatches in a grid. `table` lays out `<Color.Row>` children as titled rows.

---

### Color.Row

**`title`** `string`

The row's label.

---

### Color.Item

**`value`** `string | { light?: string; dark?: string }` — required

A CSS color, or separate colors for light and dark mode. If only one of `light` or `dark` is set, it's used in both modes.

---

**`name`** `string`

The name shown under the swatch.

---