Color Preview Pluginfor VitePress

Automatic color swatches for your documentation

Inline colors: #3b82f6 rgb(239, 68, 68) hsl(142, 71%, 45%) rebeccapurple

Tailwind classes: bg-blue-500 text-emerald-600 border-rose-400

#ef4444

#f97316

#eab308

#22c55e

#3b82f6

#8b5cf6

#ec4899

#1e3a8a

#1e40af

#1d4ed8

#2563eb

#3b82f6

#60a5fa

#93c5fd

#bfdbfe

#dbeafe

#eff6ff

Features

Inline code swatches — write any color in backticks and get a preview. Learn more →
Code block swatches — colors inside fenced code blocks get inline swatches, including var() references. Learn more →
Color palettes — :::colors container for visual palette display. Learn more →
Color strips — :::colors-strip renders a continuous horizontal color bar. Learn more →
Token table — document tokens with color, name, CSS variable, and purpose in a table. Click any cell to copy. Learn more →
Token comparison — :::colors-compare shows token variants (states, scales, themes) side by side with auto-detected swatches. Learn more →
Contrast checker — :::colors-contrast computes WCAG contrast ratios between foreground and background colors. Learn more →
Tailwind classes — detects Tailwind v3 color utilities automatically. Learn more →
Click to copy — click any swatch to copy the color value, or click any table cell to copy its text
Hover tooltips — WCAG contrast ratios + HEX/RGB/HSL conversions
Dark mode — adapts to VitePress light/dark theme