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
Explore this link on the map →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
- How we redesigned the Linear UI (part Ⅱ) - Linearlinear.app
- Realtime Colorsrealtimecolors.com
- oklch.fyi ▸ OKLCH Color Picker, Generator and Converteroklch.fyi
- The HSB Color System: A Practitioner's Primer – Learn UI Designlearnui.design
- Color: From Hexcodes to Eyeballsjamie-wong.com
- Naming colors in design systemsadobe.design
- Coolors: The super fast color schemes generator | Product Huntproducthunt.com
- Khroma - The AI color tool for designerskhroma.co
- Khroma - The AI color tool for designerskhroma.co
- Color AI · Palettes based on science and culturecolorai.app