> ## Documentation Index
> Fetch the complete documentation index at: https://mintlify.manicule.dev/llms.txt
> Use this file to discover all available pages before exploring further.
> For every page in one file, fetch https://mintlify.manicule.dev/llms-full.txt (large).
> To search and read these docs as tools, connect the MCP server at https://mintlify.manicule.dev/api/mcp.
> Every agent surface: https://mintlify.manicule.dev/.well-known/llms-manifest.json

# Color (/components/color)

<!-- agent-signals: reading_time_min: 2 · est_tokens: 1036 · updated: 2026-07-31 -->
Related: [Accordions](/components/accordions.md), [Badge](/components/badge.md), [Banner](/components/banner.md), [Callouts](/components/callouts.md), [Cards](/components/cards.md), [Code groups](/components/code-groups.md)

> Display color swatches with hex values and click-to-copy capability using the color component for design system and branding documentation.

Use the Color component to showcase color palettes in your documentation. Display colors in a compact grid or organize them in a table with labeled rows.

## Compact variant

Display colors in a simple grid layout with color names and values.

<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />

  <Color.Item name="blue-600" value="#2563EB" />

  <Color.Item name="blue-700" value="#1D4ED8" />

  <Color.Item name="blue-800" value="#1E40AF" />
</Color>

```mdx title="Compact example"
<Color variant="compact">
  <Color.Item name="blue-500" value="#3B82F6" />
  <Color.Item name="blue-600" value="#2563EB" />
  <Color.Item name="blue-700" value="#1D4ED8" />
  <Color.Item name="blue-800" value="#1E40AF" />
</Color>
```

## Table variant

Organize colors into labeled rows for design system documentation.

<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />

    <Color.Item name="primary-600" value="#2563EB" />

    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>

  <Color.Row title="Secondary">
    <Color.Item name="secondary-500" value="#8B5CF6" />

    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>

```mdx title="Table example"
<Color variant="table">
  <Color.Row title="Primary">
    <Color.Item name="primary-500" value="#3B82F6" />
    <Color.Item name="primary-600" value="#2563EB" />
    <Color.Item name="primary-700" value="#1D4ED8" />
  </Color.Row>
  <Color.Row title="Secondary">
    <Color.Item name="secondary-500" value="#8B5CF6" />
    <Color.Item name="secondary-600" value="#7C3AED" />
  </Color.Row>
</Color>
```

## Color formats

The component supports all CSS color formats including hex, rgb, rgba, hsl, and oklch.

<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />

  <Color.Item name="rgb" value="rgb(51, 255, 87)" />

  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />

  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />

  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>

```mdx title="Color formats example"
<Color variant="compact">
  <Color.Item name="hex" value="#FF5733" />
  <Color.Item name="rgb" value="rgb(51, 255, 87)" />
  <Color.Item name="rgba" value="rgba(51, 87, 255, 0.7)" />
  <Color.Item name="hsl" value="hsl(180, 70%, 55%)" />
  <Color.Item name="oklch" value="oklch(70% 0.2 145)" />
</Color>
```

## Theme-aware colors

Define different colors for light and dark modes using an object with `light` and `dark` properties.

<Color variant="compact">
  <Color.Item name="bg-primary" value="{ light: &#x22;#FFFFFF&#x22;, dark: &#x22;#000000&#x22; }" />

  <Color.Item name="bg-secondary" value="{ light: &#x22;#F9FAFB&#x22;, dark: &#x22;#0A0A0A&#x22; }" />

  <Color.Item name="text-primary" value="{ light: &#x22;#111827&#x22;, dark: &#x22;#F9FAFB&#x22; }" />
</Color>

```mdx title="Theme-aware example"
<Color variant="compact">
  <Color.Item name="bg-primary" value={{ light: "#FFFFFF", dark: "#000000" }} />
  <Color.Item name="bg-secondary" value={{ light: "#F9FAFB", dark: "#0A0A0A" }} />
  <Color.Item name="text-primary" value={{ light: "#111827", dark: "#F9FAFB" }} />
</Color>
```

## Properties

### Color

<ResponseField name="variant" type="string" required>Display style for the color palette. Options: `compact` or `table`.</ResponseField>

<ResponseField name="children" type="Color.Item | Color.Row" required>Color items or rows to display.</ResponseField>

### Color.Row

<ResponseField name="title" type="string">Label for the row of colors.</ResponseField>

<ResponseField name="children" type="Color.Item" required>Color items to display in the row.</ResponseField>

### Color.Item

<ResponseField name="name" type="string">Name or label for the color.</ResponseField>

<ResponseField name="value" type="string | { light: string, dark: string }" required>Color value in any CSS format, or an object with light and dark mode values.</ResponseField>