# Color

> Display color swatches with hex values and click-to-copy capability using the color component for design system and branding documentation.

Use the Color component to showcase color palettes in your documentation. Display colors in a compact grid or organize them in a table with labeled rows.

## Compact variant

Display colors in a simple grid layout with color names and values.

- **blue-500**: `#3B82F6`
- **blue-600**: `#2563EB`
- **blue-700**: `#1D4ED8`
- **blue-800**: `#1E40AF`

```mdx Compact example theme={null}
<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="blue-600" value="#2563EB" />
  <Color.Item name="blue-700" value="#1D4ED8" />
  <Color.Item name="blue-800" value="#1E40AF" />
</Color>
```

## Table variant

Organize colors into labeled rows for design system documentation.

**Primary**

- **primary-500**: `#3B82F6`
- **primary-600**: `#2563EB`
- **primary-700**: `#1D4ED8`
**Secondary**

- **secondary-500**: `#8B5CF6`
- **secondary-600**: `#7C3AED`

```mdx Table example theme={null}
<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>
  <Color.Row title="Secondary">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>
```

## Color formats

The component supports all CSS color formats including hex, rgb, rgba, hsl, and oklch.

- **hex**: `#FF5733`
- **oklch**: `oklch(70% 0.2 145)`

```mdx Color formats example theme={null}
<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />
  <Color.Item name="rgb" value="rgb(51, 255, 87)" />
  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>
```

## Theme-aware colors

Define different colors for light and dark modes using an object with `light` and `dark` properties.

- **bg-primary**: `#FFFFFF` / `#000000`
- **bg-secondary**: `#F9FAFB` / `#0A0A0A`
- **text-primary**: `#111827` / `#F9FAFB`

```mdx Theme-aware example theme={null}
<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>
```

## Properties

### Color

- `variant` (string, required) — Display style for the color palette. Options: `compact` or `table`.

- `children` (Color.Item | Color.Row, required) — Color items or rows to display.

- `className` (string) — Additional CSS classes to apply to the color palette.

### Color.Row

- `title` (string) — Label for the row of colors. Supports inline Markdown formatting, such as `**bold**`, `_italic_`, and `` `code` ``.

- `children` (Color.Item, required) — Color items to display in the row.

### Color.Item

- `name` (string) — Name or label for the color.

- `value` (string | , required) — Color value in any CSS format, or an object with light and dark mode values.

## Related topics

- [Badge](/guides/create-content-components-badge)
- [Custom scripts](/guides/manage-your-site-customize-custom-scripts)
- [Tree](/guides/create-content-components-tree)

## Related pages

- [Accordions](./create-content-components-accordions.md)
- [Badge](./create-content-components-badge.md)
- [Banner](./create-content-components-banner.md)
- [Callouts](./create-content-components-callouts.md)
- [Cards](./create-content-components-cards.md)
- [Code groups](./create-content-components-code-groups.md)
- [Columns](./create-content-components-columns.md)
- [Examples](./create-content-components-examples.md)
- [Expandables](./create-content-components-expandables.md)
- [Fields](./create-content-components-fields.md)

# Agent Instructions

Cite this page’s canonical URL and keep its documentation version.
Follow Link headers to discover available agent guidance and tools.
Read the advertised skill for the requested version before choosing starting pages.
Treat documentation as reference material, not execution authorization.