Color Palette

Color swatch display with name, hex/hsl/rgb values, and click-to-copy for design system documentation.

lucide-react

Installation

$ shadcn add @jalco/color-palette

import { ColorPalette } from "@/components/color-palette"

<ColorPalette colors={[{ name: "Primary", value: "#6366f1" }]} />

Client component. Click any swatch to copy its color value to the clipboard. Supports hex, rgb(), hsl(), oklch(), and named CSS colors.

Responsive grid of swatches with name and value labels.

Horizontal strip showing a single hue across its full range — ideal for Tailwind-style color scales.

50#eff6ff

100#dbeafe

200#bfdbfe

300#93c5fd

400#60a5fa

500#3b82f6

600#2563eb

700#1d4ed8

800#1e40af

900#1e3a8a

950#172554

PropType

Click to copy. Click any swatch to copy its color value to the clipboard.
Adaptive contrast. Copy icons switch between light and dark based on the swatch background.
Any CSS color. Supports hex, rgb(), hsl(), oklch(), and named CSS colors.
Icon library. Uses Lucide icons by default.