---
title: Color
description: Display a color swatch with hex value — ideal for brand and design token documentation.
url: https://pr-7-a9c4e9fe1b6c.thally.app/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 `<Columns>` to lay out multiple swatches side by side:

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

## Full brand palette

```mdx
<Columns cols={4}>
  <Color hex="#0F172A" name="Slate 900" />
  <Color hex="#1E293B" name="Slate 800" />
  <Color hex="#334155" name="Slate 700" />
  <Color hex="#64748B" name="Slate 500" />
</Columns>
```

## Props

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