---
title: Color
description: Display a color swatch with hex value — ideal for brand and design token documentation.
url: http://localhost:3040/components/color
---

# Color

Display a color swatch with hex value — ideal for brand and design token documentation.

`<Color>` renders a color preview chip with an optional name and hex label. Use it on brand guidelines pages or design system documentation.

## Example

```mdx
<Color hex="#10B981" name="Emerald" />
<Color hex="#8B5CF6" name="Violet" />
<Color hex="#F59E0B" name="Amber" />
<Color hex="#EF4444" name="Rose" />
```

## In a grid

Use `` to lay out multiple swatches side by side:

```mdx

  <Color hex="#10B981" name="Emerald" />
  <Color hex="#8B5CF6" name="Violet" />
  <Color hex="#F59E0B" name="Amber" />
  <Color hex="#EF4444" name="Rose" />

```

## Full brand palette

```mdx

  <Color hex="#0F172A" name="Slate 900" />
  <Color hex="#1E293B" name="Slate 800" />
  <Color hex="#334155" name="Slate 700" />
  <Color hex="#64748B" name="Slate 500" />

```

## Props

| Prop | Type | Description |
|---|---|---|
| `hex` | `string` | Hex color value including `#` (e.g. `#10B981`) |
| `name` | `string` | Optional display name shown above the hex code |