---
title: Color
description: The Color component displays color palettes for documenting design systems, brand guidelines, or any color specification.
---

> **For AI agents:** the complete documentation index is at [llms.txt](/docs/llms.txt). Append `.md` to any page URL for its markdown version.

Color displays hex, RGB, and RGBA values as click-to-copy swatches. Two layout variants -- a compact grid and a grouped table -- with built-in light/dark mode support.

Use Color when:
- **Documenting design systems** with brand colors
- **Showing theme colors** for light and dark modes
- **Displaying color scales** (primary-100 through primary-900)
- **Sharing brand guidelines** with hex/RGB values

## Usage

```mdx
<Color>
  <ColorItem name="Primary" value="#635BFF" />
</Color>
```

## Compact Variant

The default layout displays colors in a responsive grid:

<Color>
  <ColorItem name="Primary" value="#3b82f6" />
  <ColorItem name="Success" value="#22c55e" />
  <ColorItem name="Warning" value="#f59e0b" />
  <ColorItem name="Error" value="#ef4444" />
</Color>

```mdx
<Color>
  <ColorItem name="Primary" value="#3b82f6" />
  <ColorItem name="Success" value="#22c55e" />
  <ColorItem name="Warning" value="#f59e0b" />
  <ColorItem name="Error" value="#ef4444" />
</Color>
```

## Table Variant

Group colors into labeled rows for organized palettes:

<Color variant="table">
  <ColorRow title="Brand Colors">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedback Colors">
    <ColorItem name="Success" value="#22c55e" />
    <ColorItem name="Error" value="#ef4444" />
  </ColorRow>
</Color>

```mdx
<Color variant="table">
  <ColorRow title="Brand Colors">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedback Colors">
    <ColorItem name="Success" value="#22c55e" />
    <ColorItem name="Error" value="#ef4444" />
  </ColorRow>
</Color>
```

## Color Naming Conventions

| Pattern | Example | Use For |
|---------|---------|---------|
| Semantic | `success`, `error`, `warning` | Feedback colors |
| Numeric scale | `primary-500`, `gray-100` | Color palettes |
| Descriptive | `brand-blue`, `accent-gold` | Brand colors |

## Theme-Aware Colors

Define different colors for light and dark modes by passing an object with `light` and `dark` properties:

<Color>
  <ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>

```mdx
<Color>
  <ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>
```

## Color Formats

The component supports standard CSS color formats:

<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>

```mdx
<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>
```

## Props

### Color

<ParamField name="variant" type="string" default="compact">
  Layout style: `compact` (grid) or `table` (grouped rows).
</ParamField>

<ParamField name="children" type="node">
  `ColorItem` or `ColorRow` elements.
</ParamField>

### ColorRow

<ParamField name="title" type="string">
  Label displayed above the row.
</ParamField>

<ParamField name="children" type="node">
  `ColorItem` elements.
</ParamField>

### ColorItem

<ParamField name="name" type="string">
  Display name for the color.
</ParamField>

<ParamField name="value" type="string | object">
  Color value as CSS string, or `{ light: string, dark: string }` for theme-aware colors.
</ParamField>

## What's Next?

<Columns cols={2}>
  <Card title="Components Overview" icon="puzzle-piece" href="/components/overview">
    Browse all available components
  </Card>
  <Card title="MDX Basics" icon="file-code" href="/content/mdx-basics">
    Learn how to use components in MDX
  </Card>
</Columns>