A gorgeous, accessible color system for user interfaces
Comprehensive color system for designing beautiful, accessible websites and apps.
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.