A gorgeous, accessible
color system

An open-source color system for designing beautiful, accessible websites and apps.

1
2
3
4
5
6
7
8
9
10
11
12
Gray
Mauve
Slate
Sage
Olive
Sand
Tomato
Red
Crimson
Pink
Plum
Purple
Violet
Indigo
Blue
Cyan
Teal
Green
Grass
Brown
Orange
Sky
Mint
Lime
Yellow
Amber
Gold
Bronze

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.