> ## Documentation Index
> Fetch the complete documentation index at: https://docs.holydocs.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Color

Visual color swatch with hex value and optional name, useful for design system documentation.

**Interactive playground** For isolated previews, theme switching, and sandbox editing, open [the Color playground on holydocs.com](https://holydocs.com/components/color).

## When to use

Use this component when the reader benefits from an active surface such as a form, quiz, chart, or draggable visual.

## Live Examples

Every example below renders the real component directly inside HolyDocs, followed by the exact MDX you can paste into a page.

### Named

Color swatch with a label.

**Gold Accent**

~~~mdx
<Color hex="#D4A853" name="Gold Accent" />
~~~

### Hex Only

Color swatch with hex value only.



~~~mdx
<Color hex="#1C1020" />
~~~

### Color Row

Grouped swatches under a labeled category.

**Brand Colors**

**Primary**
  **Dark**
  **Light**

~~~mdx
<ColorRow label="Brand Colors">
  <ColorItem name="Primary" value="#D4A853" />
  <ColorItem name="Dark" value="#1C1020" />
  <ColorItem name="Light" value="#F5F0E8" />
</ColorRow>
~~~

## Props

| Prop | Type | Default | Description |
| --- | --- | --- | --- |
| `hex` | `string` | `#000000` | Hex color value to display. |
| `name` | `string` | `--` | Human-readable name for the color. |

## Usage

Start from this baseline shape and then tailor the copy, data, or nesting to the page you are writing.

~~~mdx
<Color hex="#D4A853" name="Gold Accent" />
~~~

## Tips

- Explain what changes when a reader interacts with the component. Motion or controls alone should not carry the full meaning.
- Keep a non-interactive fallback in mind for screenshots, exported docs, and AI-driven readers that only see the resulting HTML.
- Verify keyboard behavior and focus states whenever the component includes inputs, toggles, or draggable controls.

## Related Components

**[Form](/components/form)**

Embeddable forms that collect user input and send it via email.
**[Carousel](/components/carousel)**

Embla-style carousel for screenshots, product tours, quotes, and gallery cards with optional autoplay.
**[Prompt](/components/prompt)**

Display pre-built AI prompts with a one-click copy button for easy reuse.

## More

- Interactive playground: [Color on holydocs.com](https://holydocs.com/components/color)
- Component library index: [/components](/components)