Color Palette

Overview

ColorPalette displays labeled color collections as horizontal or vertical strips—perfect for documenting color ramps, scales, brand palettes, and semantic token sets.

These layouts are intentionally flexible and easy to reshape. You get a pre-composed ColorPalette for speed, plus primitives (ColorSwatch, ColorSwatchLabel, ColorPaletteLabel) to build custom layouts like grids or asymmetric compositions.

Installation

npx shadcn add @tokenui/color-palette

Usage

Blue

#f0f9ff

#e0f2fe

#bae6fd

#7dd3fc

#38bdf8

#0ea5e9

#0284c7

#0369a1

#075985

Red

#fef2f2

#fee2e2

#fecaca

#fca5a5

#f87171

#ef4444

#dc2626

#b91c1c

#991b1b

Yellow

#fefce8

#fef9c3

#fef08a

#fde047

#facc15

#eab308

#ca8a04

#a16207

#854d0e

Green

#f0fdf4

#dcfce7

#bbf7d0

#86efac

#4ade80

#22c55e

#16a34a

#15803d

#166534

Composition

A pre-composed ColorPalette component is provided for convenience. Compose the low-level primitives (ColorSwatch, ColorSwatchLabel, ColorPaletteLabel) when you need full control over layout, spacing, or custom behavior.

White Mink

Matt Black

Sequoia Dusk

Roycroft Bottle Green

Gentle Doe

Champagne Pink

#MindfulPalettes no 056 by @AlexCristache