# Color
Use color swatches to document Plandalf palette values, tokens, and theme-aware pairs.
Source: /docs/components/color
Last modified: 2026-06-20
Color blocks make design tokens copyable and inspectable.

## Compact variant

Use `Color.Item` when porting Mintlify-style MDX. The compound alias maps to Plandalf's swatch component.


- blue-500: #3B82F6


- blue-600: #2563EB


- blue-700: #1D4ED8


- blue-800: #1E40AF


```mdx title="color-compact.mdx"


- blue-500: #3B82F6


- blue-600: #2563EB


- blue-700: #1D4ED8


- blue-800: #1E40AF


```

## Table variant

Use `Color.Row` to group related colors in a table-style palette.


#### Primary


- primary-500: #3B82F6


- primary-600: #2563EB


- primary-700: #1D4ED8


#### Secondary


- secondary-500: #8B5CF6


- secondary-600: #7C3AED


```mdx title="color-table.mdx"


#### Primary


- primary-500: #3B82F6


- primary-600: #2563EB


- primary-700: #1D4ED8


#### Secondary


- secondary-500: #8B5CF6


- secondary-600: #7C3AED


```

## Color formats

The component supports CSS color formats such as hex, rgb, rgba, hsl, and oklch.


- hex: #FF5733


- rgb: rgb(51, 255, 87)


- rgba: rgba(51, 87, 255, 0.7)


- hsl: hsl(180, 70%, 55%)


- oklch: oklch(70% 0.2 145)


## Theme-aware colors

Pass `{ light, dark }` when a token has light and dark mode values.


- bg-primary: { light: "#FFFFFF", dark: "#000000" }


- bg-secondary: { light: "#F9FAFB", dark: "#0A0A0A" }


- text-primary: { light: "#111827", dark: "#F9FAFB" }


```mdx title="color-theme-aware.mdx"


- bg-primary: { light: "#FFFFFF", dark: "#000000" }


- bg-secondary: { light: "#F9FAFB", dark: "#0A0A0A" }


- text-primary: { light: "#111827", dark: "#F9FAFB" }


```

## Plandalf palette example


- Primary teal: #0f766e


- Aqua surface: #ecfeff


- Charcoal: #171717


- Theme pair: { light: "#ffffff", dark: "#0a0f0e" }


```mdx title="color-example.mdx"


- Primary teal: #0f766e


- Aqua surface: #ecfeff


- Charcoal: #171717


- Theme pair: { light: "#ffffff", dark: "#0a0f0e" }


```

## Palette groups

Use a palette group when a page documents a family of tokens. Keep the group title specific so the color values are searchable.


- Surface: #ffffff


- Soft aqua: #edf7f5


- Border: #d6e8e5


- Text: #171717


- Success: #047857


- Warning: #b45309


- Critical: #b91c1c


- Info: #0f766e


```mdx title="color-groups.mdx"


- Surface: #ffffff


- Soft aqua: #edf7f5


- Border: #d6e8e5


- Text: #171717


```

## Theme-aware pairs

Pass `{ light, dark }` when the token has a light and dark value. The swatch splits into two halves and copies both values.


- Canvas: { light: "#f8fffd", dark: "#08110f" }


- Panel: { light: "#ffffff", dark: "#101918" }


- Muted text: { light: "#737373", dark: "#a3a3a3" }


- Accent: { light: "#0f766e", dark: "#5eead4" }


```mdx title="theme-aware-colors.mdx"


- Canvas: { light: "#f8fffd", dark: "#08110f" }


- Accent: { light: "#0f766e", dark: "#5eead4" }


```

## Single swatches

You can render `Color` itself as an item when you only need one value inside another component or example.

<div class="not-prose my-6 grid gap-3 sm:grid-cols-2">

- Primary action: #0f766e


- Glass border: { light: "#d6e8e5", dark: "#29413f" }

</div>

```mdx title="single-color-items.mdx"

- Primary action: #0f766e


- Glass border: { light: "#d6e8e5", dark: "#29413f" }

```

## Authoring rules


### Color usage


- `Use exact values` (hex or token value):
    Show the value a reader can copy into code. Avoid vague labels such as “teal-ish” or “brand blue”.


- `Group by job` (palette section):
    Group values by surface, status, theme pair, or component state rather than dumping every token into one long list.


- `Prefer real Plandalf tokens` (product truth):
    Use Plandalf’s cool glass palette for docs examples. Do not introduce unrelated decorative palettes in docs.


## Properties

### Color


- `variant` (compact | table; default: compact):
  Display style for the color palette. Use `compact` for grid swatches and `table` for grouped rows.


- `children` (Color.Item | Color.Row; required):
  Color items or color rows to display inside the palette.


### Color.Row


- `title` (string; required):
  Label for a row of related colors.


- `children` (Color.Item; required):
  Color items displayed in the row.


### Color.Item


- `name` (string; required):
  Name or label for the color.


- `value` (string | { light: string; dark: string }; required):
  Copyable CSS color value, or a theme-aware pair with light and dark values.


## Plandalf extensions


- `title` (string):
  Palette heading when `Color` wraps several `ColorItem` children.


- `name` (string):
  Renders `Color` itself as a single swatch item when paired with `value`.


- `class | className` (string):
  Adds a class to the palette, row, or item for rare layout-specific cases.


## Related


  - [Icons](/docs/components/icons): Show icon usage.
  - [Frames](/docs/components/frames): Present screenshots and previews.
  - [Visual context](/docs/components/visual-context): Use diagrams, trees, and screenshots.