Vitaly Friedman: Color Reference
🦜 “How We Fixed Skyscanner’s Broken Color Palette” (https://lnkd.in/erqd-yCX), a practical case study on how the Skyscanner team fixed their color palette — along with process, naming, testing and explorations to get there. Neatly put together by Adam Wilson, via Anna Palgan.
✅ Set your base colors: primary, secondary and UI states.
✅ Define core color pairings and extended pairings.
✅ Choose product-specific colors, gradients, patterns.
✅ 4 color groups: neutral, white text, black text, yellow/orange.
🚫 Avoid poetic names: they are difficult to remember and refer to.
✅ Mix black and grey with primary color for a better design fit.
✅ Choose a night color that is slightly lighter than black.
✅ Your colors will need to appear on different backgrounds.
✅ Create color sets with transparency for such cases.
✅ Create tints based on the color contrast against black.
✅ Create shades based on the color contrast against white.
✅ Test for color contrast, colorweakness, colorblindness early.
✅ Double-check the dark yellow problem in your palette.
---
🌱 Useful Guides
How To Design A Color Palette For Design Systems, by Alex Baránov
https://lnkd.in/epJkT252
How To Set Up Color in Design Systems, by Nathan Curtis
https://lnkd.in/e48aJaGb
How To Create An Accessible Color Palette, by Stéphanie Walter
https://lnkd.in/eUnSTYSM
“Dark Yellow Problem” In Color Palettes
https://lnkd.in/eS7YqfCf
---
🪴 Useful Case Studies
Contentful: https://lnkd.in/edHpghSj, by Fabian Schultz
Goldman Sachs: https://lnkd.in/e28Fxuuv
Modern Health: https://lnkd.in/ez7xM5xt, by Brian Cleveland
Stripe: https://lnkd.in/enaXpWvD, by Daryl Koopersmith, Wilson Miner
Wise: https://lnkd.in/eyv8Qh7r, by Stephanie S.
Wish: https://lnkd.in/eGYGa7PK, by Taamannae Taabassum
---
🍭 Color Palette Generators
ABC: https://lnkd.in/e7QHC2gx
Accessible Palette Generator: https://lnkd.in/ejkpyWqZ
Colorbox: https://colorbox.io/
Contrast Grid: https://lnkd.in/e6sENdRW
Figma Color Palettes: https://lnkd.in/et2zeUjX
Leonardo: https://leonardocolor.io/
Naming colors: https://lnkd.in/e6jJzRdW
OKLCH Color Converter: https://lnkd.in/esP29Jyj
Primer Prism: https://lnkd.in/ekpTmkkM
Poline: https://lnkd.in/eSwuXW5P 👍
Stark: https://www.getstark.co/
HUGE thanks to all the wonderful people who worked and shared their insights here for all of us to use and learn from! 👏🏼👏🏽👏🏾
If you also struggle with color, hopefully that’s a good foundation to start with. What techniques, guides and tools do you use to design color palettes? Share what has and hasn’t worked for you in the comments below! 🙏🏾
#ux #design | 17 comments on LinkedIn
