A gorgeous, accessible color system for user interfaces

Comprehensive color system for designing beautiful, accessible websites and apps.

Get started
123456789101112
Gray
Mauve
Slate
Sage
Olive
Sand
Tomato
Red
Ruby
Crimson
Pink
Plum
Purple
Violet
Iris
Indigo
Blue
Cyan
Teal
Jade
Green
Grass
Bronze
Gold
Brown
Orange
Amber
Yellow
Lime
Mint
Sky

Accessibility made easy

Each step is designed for a specific use case, with multiple combinations guaranteed to pass WCAG contrast ratio.

Automatic dark mode

Switching to dark theme is as simple as applying a class to a container. Dark mode Just Works™.

Transparent variants

Each scale has a matching transparent variant, which is handy for UI components that need to blend into colored backgrounds.