Color
Visual color swatch with hex value and optional name, useful for design system documentation.
For isolated previews, theme switching, and sandbox editing, open the Color playground on holydocs.com .
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
#D4A853
mdx<Color hex="#D4A853" name="Gold Accent" />
Hex Only
Color swatch with hex value only.
#1C1020
mdx<Color hex="#1C1020" />
Color Row
Grouped swatches under a labeled category.
Brand Colors
Primary
#D4A853
Dark
#1C1020
Light
#F5F0E8
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
More
- Interactive playground: Color on holydocs.com
- Component library index: /components