A gorgeous, accessible color system for user interfaces

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

Backgrounds
Interactive components
Borders and separators
Solid colors
Accessible text
1
2
3
4
5
6
7
8
9
10
11
12
GrayMauveSlateSageOliveSandTomatoRedRubyCrimsonPinkPlumPurpleVioletIrisIndigoBlueCyanTealJadeGreenGrassBronzeGoldBrownOrangeAmberYellowLimeMintSky
Shadows, highlights, and overlays
1
2
3
4
5
6
7
8
9
10
11
12
BlackWhite

Accessibility made easy

Text colors are guaranteed to pass target contrast ratios against the corresponding background colors.

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 alpha color variant, which is handy for UI components that need to blend into colored backgrounds.

APCA text contrast

Contrast targets are based on the modern APCA contrast algorithm, which accurately predicts how human vision perceives text.

P3 color gamut support

Accounts for the blending differences in the wide gamut color spaces and enables the brightest yellows and reds possible.

Designed for user interfaces

Each step is designed with a specific use case in mind, such as backgrounds, hover states, borders, overlays, or text.