Color

Color displays hex, RGB, and RGBA values as click-to-copy swatches. Two layout variants -- a compact grid and a grouped table -- with built-in light/dark mode support.

Use Color when:

Documenting design systems with brand colors
Showing theme colors for light and dark modes
Displaying color scales (primary-100 through primary-900)
Sharing brand guidelines with hex/RGB values

Usage

<Color>
  <ColorItem name="Primary" value="#635BFF" />
</Color>

Compact Variant

The default layout displays colors in a responsive grid:

Primary

#3b82f6

Success

#22c55e

Warning

#f59e0b

Error

#ef4444

<Color>
  <ColorItem name="Primary" value="#3b82f6" />
  <ColorItem name="Success" value="#22c55e" />
  <ColorItem name="Warning" value="#f59e0b" />
  <ColorItem name="Error" value="#ef4444" />
</Color>

Table Variant

Group colors into labeled rows for organized palettes:

Brand Colors

Primary#3b82f6

Secondary#6366f1

Feedback Colors

Success#22c55e

Error#ef4444

<Color variant="table">
  <ColorRow title="Brand Colors">
    <ColorItem name="Primary" value="#3b82f6" />
    <ColorItem name="Secondary" value="#6366f1" />
  </ColorRow>
  <ColorRow title="Feedback Colors">
    <ColorItem name="Success" value="#22c55e" />
    <ColorItem name="Error" value="#ef4444" />
  </ColorRow>
</Color>

Color Naming Conventions

Pattern	Example	Use For
Semantic	`success`, `error`, `warning`	Feedback colors
Numeric scale	`primary-500`, `gray-100`	Color palettes
Descriptive	`brand-blue`, `accent-gold`	Brand colors

Theme-Aware Colors

Define different colors for light and dark modes by passing an object with light and dark properties:

Theme

Background

#ffffff

Theme

Foreground

#171717

Theme

Border

#e5e5e5

<Color>
  <ColorItem name="Background" value={{ light: "#ffffff", dark: "#0a0a0a" }} />
  <ColorItem name="Foreground" value={{ light: "#171717", dark: "#ededed" }} />
  <ColorItem name="Border" value={{ light: "#e5e5e5", dark: "#404040" }} />
</Color>

Color Formats

The component supports standard CSS color formats:

Hex

#3b82f6

RGB

rgb(59, 130, 246)

RGBA

rgba(59, 130, 246, 0.8)

<Color>
  <ColorItem name="Hex" value="#3b82f6" />
  <ColorItem name="RGB" value="rgb(59, 130, 246)" />
  <ColorItem name="RGBA" value="rgba(59, 130, 246, 0.8)" />
</Color>

Props

Color

stringdefault: compact

Layout style: compact (grid) or table (grouped rows).

node

ColorItem or ColorRow elements.

ColorRow

string

Label displayed above the row.

node

ColorItem elements.

ColorItem

string

Display name for the color.

string | object

Color value as CSS string, or { light: string, dark: string } for theme-aware colors.

What's Next?

Components Overview

Browse all available components

MDX Basics

Learn how to use components in MDX