Color systems for design systems

Color systems are complete color palettes created with visual consistency and accessibility at their core. Designing accessible color systems for contrast is already challenging but you may be seeking balance (lightness and saturation) too. See Radix color Balance tests.

Hereafter are some of the best color systems. Use them, learn from them or get inspired by them.

Radix Colors

Open Color

Material Design Color System

Reasonable Colors

Best tools for color systems

Leonardo (by Adobe)

Leonardo is a one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design and data visualization.

Primer Prism (by GitHub)

Primer Prism is a tool for creating cohesive, consistent and accessible color palettes.

Additional resources

Designing accessible color systems

Achieving the right contrast with color is challenging, especially because color is incredibly subjective and has a big effect on the aesthetics of a product.

Build a design system from 0 to 1: color system

In this article, Miaomiao Liu helps us achieve the mission of creating a color system that clearly explains color roles, color relationships, accessibility evaluations and Tokens.

Reinventing Adobe Spectrum's colors

Adobe’s design system, Spectrum, hadn’t changed its colors since 2013. This blog post explains Spectrum’s method to updating their color system that supports over 100 products.

Color & Contrast

Color & Contrast is a complete and interactive guide to both explore and learn about the theory, science and perception of color and contrast.

Building your design system?

Backlight is an all-in-one design system platform that makes it easy for the whole team to collaborate on, build and ship a design system.

Try for free