Color Palette Harmonization

I was recently asked: “How can a brand with a very specific color palette expand in a natural way to other shades and tones without losing their core color values and ensuring their color story remains cohesive?" Here's how I recommend expanding a palette naturally: The first step is to understand what’s motivating the brand to expand their color palette, and to make sure this motivation is aligned with the brand’s values and purpose. A color palette is designed to achieve a brand’s goals. It does this by each color performing certain job(s) that support those goals. Determine what jobs the brand’s current palette is not accomplishing. Are some customers not able to find a color choice they love? Is the current palette starting to feel stale or too limiting? Are the brand’s products being used in more diverse environments, for different purposes, and/or by a broader range of people than originally designed for? What else? These answers will inform what color families, tones, and shades would be most ideal for the brand to expand into. Before new colors are added, identify the existing colors that will remain in the palette. These colors will be ones that are heavily associated with the brand’s values and identity. They are strong sellers and likely to remain so in the future. They are colors that work well together, that have an energy that reflects the brand’s roots. Carry these colors forward into the more expansive palette; they will become its foundation. Drop any other colors that are not reflective of the direction the brand is going, are duplicitous, or are no longer (or not likely to continue) performing well. Now expand the palette by bringing in new colors. Each new color should be chosen to accomplish at least one of the specific jobs that you identified at the beginning of this process and that the carryover colors are not already satisfying. Make sure that each new color merchandises with the carryover colors and with each other. This part is critical! It’s what makes the palette expansion feel and appear natural and intriguing - all the colors look good together. The palette must look cohesive and beautiful in its entirety, and each color must be unique and tailored to a particular purpose. Base the amount of palette expansion on the comfort of both the brand and its community. For some brands, this will be small; for others, it will be larger. As a rule of thumb, keep it between 10%-50%. Anything less is not meaningful enough; anything more is too disruptive. Honestly, right in the middle of that range is the sweet spot for most. #color #colorpalette

Here’s every lesson I’ve learned after 7 years of working with color systems in design. 🎨 Grouped into 5s so you can skim, save, and test them in your own work. Palette Foundations — 1. Stop picking “pretty colors” without rules. 2. Always define your Primary first, it’s the anchor. 3. Your Accent tones should guide attention, not fight for it. 4. Neutrals aren’t boring, they’re balance. 5. A system beats intuition every time. Contrast & Clarity — 6. Test palettes in grayscale before calling them final. 7. Low contrast looks modern, but kills readability fast. 8. Accessibility checks matter more than personal preference. 9. Light backgrounds with dark text are the safest rule of thumb. 10. “Pop” isn’t a strategy, it’s usually a readability problem. Tints, Tones & Shades — 11. A Tint = add white, a Shade = add black, a Tone = add gray. 12. Limit each palette to 1–2 shades max. Too many creates chaos. 13. Tints soften emotion, shades anchor weight. 14. Mid-tone values carry the workload in layouts. 15. When in doubt, keep shadows cool and highlights warm. Systems & Roles — 16. Every color in your palette needs a job description. 17. Primary = recognition, Accent = emphasis, Neutral = stability. 18. Backgrounds should never compete with type. 19. Reserve one color for CTA only. Protect it like gold. 20. Brands collapse when Accent and CTA colors overlap. Psychology in Color — 21. Blue = trust, calm, renewal (your Glacial Gates proof). 22. Red = urgency, energy, intensity. 23. Green = growth, health, safety. 24. Yellow = optimism, warmth, creativity. 25. Black = power, luxury, precision. Consistency & Brand Trust — 26. One brand red, not six versions. 27. Define CMYK, RGB, HEX for every palette, no guessing. 28. Lock them into a style guide or you’ll regret it. 29. Train your team on when and where to use colors. 30. Consistency builds trust faster than any logo redesign. Practical Workflow — 31. Build palettes with swatch libraries in Illustrator/InDesign. 32. Test across print and digital, because colors shift. 33. Export ASE files for teammates, it saves arguments. 34. Never approve palettes from one screen only. 35. Test colors on mockups, not just swatches. Growth & Mastery — 36. Copy great palettes, then evolve them. 37. Systems beat “inspiration boards” every time. 38. Learn color psychology, not just theory. 39. Great palettes disappear, they support, not distract. 40. You’ll learn 100x more testing palettes in real projects than reading guides. ⚡️ Take these with a grain of salt. I’m one designer sharing what years of testing has taught me. Your context may differ. Here’s my truth: systems > decoration. That’s how you stop designing with chaos and start designing with clarity. 👉 If you could only keep 3 colors in your brand system forever, which ones would you choose?

🦜 “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

🥗 The Power of Color in Design Color plays a key role in design, shaping emotions, interactions, and perception. Whether in branding, websites, or print, a well-chosen color palette enhances readability, directs attention, and strengthens messaging. 🥗 Color Balance for Harmony Using colors correctly creates a smooth, natural design. Without balance, a design can feel overwhelming or confusing. Key elements of color balance: • Proportion: Distributing dominant, secondary, and accent colors effectively. • Contrast: Ensuring colors complement rather than clash. • Saturation & Brightness: Adjusting intensity for the right visual impact. • Context: Choosing colors that suit the medium (print, digital, branding). 🥗 How to Achieve Good Color Balance? A simple guideline helps maintain harmony: • Main color (60-80%) – The base color that sets the tone. • Secondary color (15-30%) – A complementary color to add contrast. • Accent color (5-10%) – A highlight color used for emphasis. 🥗 Opacity Adjustments for Depth & Focus Varying opacity can soften backgrounds, enhance readability, and create a layered, visually appealing design. 🥗 Tinted Whites for Warmth & Coolness Instead of pure white, slight tints create a more refined and cohesive look, blending better with surrounding colors. 🥗 Muted and Darkened Tones for Subtle Contrast Softening or darkening colors maintains contrast without being too harsh, resulting in a more sophisticated, polished design. 🥗 The Minimalist Approach (When Less is More) A simple color palette can be just as powerful as a complex one. Monochrome or closely related colors create a timeless, elegant look that enhances clarity and professionalism.

How to Make a UI Color Palette That Works? Here’s my 5-step process: Every designer has been here: You pick some colors… You try to make them “look good”… But something feels off. Buttons feel out of place. The text isn’t readable. The design looks “noob.” Here’s what actually works: Step 1: Find Your Base Color This is the color that anchors everything. If you have a brand color, perfect. If not, pick a mid-tone that looks great on a button. Use HSB mode (not HEX)  It gives you better control over brightness & saturation. Step 2: Add Supporting Colors You’ll need 3–4 extra colors to guide actions: - Green → Success - Yellow/Orange → Warnings - Red → Errors - Blue → Info 💡 Pro tip: Match their saturation to your base for a cleaner look. Step 3: Create Shade Ranges One color won’t cut it. You need 9 shades for each:  from light (100) to dark (900). Use an “arc” method in the color picker. → That means smooth, predictable shade jumps. - Text = darkest shade - Backgrounds = lightest Step 4: Don’t Forget Neutrals Most of your UI is gray, not colors. Build a 9-shade gray scale. Avoid warm/cool bias unless the brand calls for it. Neutrals = clean, balanced, and readable UI. Step 5: Test It in Real UI Design systems are not theory. - Blur your palette → Does it feel balanced? - Check contrast → Is text readable? - Test in components → Alerts, buttons, cards. Make tweaks. (But don’t end up with 50 shades of confusion!) Bonus Tools I Use: 1. Color Hunt & Huemint → Inspiration 2. HSB Mode → More control 3. Contrast Checkers → Accessibility 4. Design Systems → Long-term consistency Get your palette right, and your whole UI feels more premium, with less effort. Still picking colors that don’t quite click? Drop your palette below. (I’ll give you feedback in the comments!)