# Color

Shows a palette. Clicking a swatch copies its value.

<Color>
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="violet-500" value="#8B5CF6" />
  <Color.Item name="background" value={{ light: "#FFFFFF", dark: "#0A0A0A" }} />
</Color>

```mdx
<Color>
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="violet-500" value="#8B5CF6" />
  <Color.Item name="background" value={{ light: "#FFFFFF", dark: "#0A0A0A" }} />
</Color>
```

A value can be any CSS color (hex, `rgb()`, `rgba()`, `hsl()`, `oklch()`, ...). A `{ light, dark }` pair switches with the site's theme, and copies the value for the theme that's showing.

## Table

`variant="table"` groups swatches into titled rows with `Color.Row`:

<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
  </Color.Row>
  <Color.Row title="Neutral">
    <Color.Item name="gray-500" value="#6B7280" />
  </Color.Row>
</Color>

```mdx
<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
  </Color.Row>
  <Color.Row title="Neutral">
    <Color.Item name="gray-500" value="#6B7280" />
  </Color.Row>
</Color>
```

**`Color` props**

<Parameter name="variant" type='"compact" | "table"' default='"compact"' />

**`Color.Row` props**

<Parameter name="title" type="string">
  The row's label. Accepts `code`, `**bold**`, and `*italic*`.
</Parameter>

**`Color.Item` props**

<Parameter name="name" type="string" />

<Parameter name="value" type="string | { light, dark }">
  Any CSS color, or a light/dark pair.
</Parameter>