How to generate color palettes for design systems || Matthew Ström, designer-leader
It used to be easy to pick colors for design systems. Years ago, you could pick a handful of colors to match your brand’s ethos, or start with an off-the-shelf palette (remember flatuicolors.com?). Each hue and shade served a purpose, and usually had a quirky name like “idea yellow” or “innovation blue”. This hands-on approach allowed for control and creativity, resulting in color schemes that could convey any mood or style. But as design systems have grown to keep up with ever-expanding software needs, the demands on color palette have grown exponentially too. Modern software needs accessibility, adaptability, and consistency across dozens of devices, themes, and contexts. Picking colors by hand is practically impossible. This is a familiar problem to the Stripe design team. In “Designing accessible color systems,” Daryl Koopersmith and Wilson Miner presented Stripe’s approach: using perceptually uniform color spaces to create aesthetically pleasing and accessible systems. Their metho
It used to be easy to pick colors for design systems. Years ago, you could pick a handful of colors to match your brand’s ethos, or start with an off-the-shelf palette (remember flatuicolors.com?). Each hue and shade served a purpose, and usually had a quirky name like “idea yellow” or “innovation blue”. This hands-on approach allowed for control and creativity, resulting in color schemes that could convey any mood or style. But as design systems have grown to keep up with ever-expanding software needs, the demands on color palette have grown exponentially too. Modern software needs accessibil
saved by
related reading
- My struggle with colors, part II. Building an accessible color system… | by Zain Adeel | UX Collectiveuxdesign.cc
- My struggle with colors. Demystifying colors for accessible… | by Zain Adeel | UX Collectiveuxdesign.cc
- oklch.fyi ▸ OKLCH Color Picker, Generator and Converteroklch.fyi
- Visual design rules you can safely follow every timeanthonyhobday.com
- Color Spaces – Bartosz Ciechanowskiciechanow.ski
- Tailwind CSS Colors - All colors + Custom color generatoruicolors.app
- RandomA11y - Accessible Color Combinationsrandoma11y.com
- Colors - Core conceptstailwindcss.com
- The HSB Color System: A Practitioner's Primer – Learn UI Designlearnui.design
- Naming colors in design systemsadobe.design
- Color: From Hexcodes to Eyeballsjamie-wong.com
- Building a Design System from scratch - The Blog of Maxime Heckelblog.maximeheckel.com