Comprehensive color system for designing beautiful, accessible websites and apps.
Text colors are guaranteed to pass target contrast ratios against the corresponding background colors.
Switching to dark theme is as simple as applying a class to a container. Dark mode Just Works™.
Each scale has a matching alpha color variant, which is handy for UI components that need to blend into colored backgrounds.
Contrast targets are based on the modern APCA contrast algorithm, which accurately predicts how human vision perceives text.
Accounts for the blending differences in the wide gamut color spaces and enables the brightest yellows and reds possible.
Each step is designed with a specific use case in mind, such as backgrounds, hover states, borders, overlays, or text.