Colors
Explore the complete color palette. Click any color to copy its class name.
Semantic Colors
Primary
--color-primary#3b82f6Main brand color
Secondary
--color-secondary#64748bSecondary accent
Success
--color-success#22c55eSuccess states
Danger
--color-danger#ef4444Error states
Warning
--color-warning#f59e0bWarning states
Info
--color-info#0ea5e9Info states
Light
--color-light#f3f4f6Light backgrounds
Dark
--color-dark#1f2937Dark backgrounds
Color Palettes
Gray
Click any shade to copy its CSS variable
Blue
Click any shade to copy its CSS variable
Green
Click any shade to copy its CSS variable
Red
Click any shade to copy its CSS variable
Yellow
Click any shade to copy its CSS variable
Purple
Click any shade to copy its CSS variable
Accessibility Contrast Checker
Sample Text
The quick brown fox jumps over the lazy dog.
17.74
Contrast Ratio
AAA
WCAG Rating