Interior Design Color Palettes

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

Color Blind‑Friendly Palette When design depends only on color, many users miss the message. Let’s make our visuals inclusive without losing style. Nearly 1 in 12 men and 1 in 200 women live with a form of color vision deficiency (CVD). Yet many interfaces still assume perfect color vision. This creates confused signals and hidden barriers. Inclusive design is not only about accessibility—it improves UX for everyone. Clear contrast, readable text, and safe color pairs help users notice what matters fast.
 What to do in practice: choose color pairs with strong contrast, avoid red–green look‑alikes, and never rely on color alone. Add icons, patterns, and labels to show state and meaning. Check contrast against WCAG (aim for at least 4.5:1 for body text). Test your palette in CVD simulators (deuteranopia/protanopia) and verify your UI in both light and dark modes.
 This approach works in products and in daily life—from action buttons and error states to maps, charts, and safety signals. Great design is beautiful, clear, and accessible. Let’s build experiences that everyone can see and use. Use Together (high contrast): ✅ Navy #1E3A8A + Light Yellow #FDE68A ✅ Almost Black #111111 + Mint #34D399 ✅ Deep Purple #4C1D95 + Light Gray #F3F4F6 Avoid Together (confusing for CVD): ❌ Red #E11D48 + Green #10B981 ❌ Brown‑Red #9A3412 + Olive #84CC16 ❌ Cyan #06B6D4 + Blue‑Gray #64748B (low luminance contrast) Text contrast ≥ 4.5:1 (WCAG AA) Don’t rely on color only: add icons/patterns/labels Test palettes in CVD simulators - https://lnkd.in/dukCMpAY #InclusiveDesign #Accessibility #ColorBlindness #DesignForAll #UX #WCAG

Most people struggle with creating a cohesive color palette. But if you sidestep these 5 common blunders, I guarantee you won't. 1. Using too many colors. → This creates a chaotic and unbalanced look. Do this instead: ↳ Stick to a maximum of 5 colors. ↳ Create a balance between light and dark hues. 2. Overlooking color psychology. → This could send mixed or wrong messages. Do this instead: ↳ Research the meaning and emotions attached to colors. ↳ Choose colors that match your message or brand's personality. 3. Ignoring contrast. → This can make your content hard to read or visually dull. Do this instead: ↳ Use contrasting colors to emphasize important elements. ↳ Ensure there's enough contrast for readability. 4. Not considering accessibility. → This could exclude a portion of your audience. Do this instead: ↳ Use colors that are friendly for color-blind users. ↳ Check your design's accessibility with online tools. 5. Failing to test. → This leaves room for avoidable mistakes. Do this instead: ↳ Test your color palette in different contexts. ↳ Get feedback and make the necessary adjustments. Bonus Tip: Creating a cohesive color palette requires a balance of aesthetics, psychology, contrast, accessibility, and testing. With these tips, you're on the right path to creating visually appealing and effective designs.

Don't let poor colour contrast haunt your design... The Accessibility Ghost is back to beset you with tips on the most common accessibility issue: Colour alone isn’t enough to convey meaning, especially when 85% of homepages fail contrast checks, and colour perception varies wildly across users (I bet you know someone who's colourblind). Think of Bournville and Tony’s Chocolonely: two red wrappers, side by side on the shelf, indistinguishable without design. One’s a heritage brand, the other an ethical changemaker. To stop their identities blurring, and you choosing the wrong chocolate, designers use dual encoding: colour, plus text, shape, or iconography. Tips to design for colourblind users: > Simulate colourblind views to check whether key information still stands out (you can do this in browser, in Adobe or with online tools) > Red-green confusion is especially common. > Use dual encoding, combine colour with labels, shapes, or placement. Think traffic lights: colour + position. > Test early, fix easily Contrast issues are often theme-wide. A palette tweak or CSS update can solve dozens of problems at once. (Follow Homer Gaines, CPACC for some of my favourite clear information on design systems). Accessibility isn’t anti-brand, it’s pro-visibility. It’s how design becomes usable, not just beautiful. If your team wants to build campaigns that land with everyone, I offer consulting to embed accessibility into your creative workflow, from the brief to the billboard. Let’s make your design readable, recognisable, and radically inclusive. Follow my tiny, opinionated ghost at The Accessibility Ghost, and if you want tips specifically for your project, send me a DM and we'll talk consulting. Terms and Conditions: Ghost included in all consulting projects, hauntings not optional. 👻 Image Description: A four-panel comic “The Accessibility Ghost” by Caitlin Quinn Panel 1: The ghost stands in front of two vertical red swatches, they are slightly different but it's barely noticable. A speech bubble reads, “These are two chocolate brand colours.” Panel 2: The ghost asks, “Which is Bournville, which is Tony’s Chocolonely?” Panel 3: The ghost says, “With just colour, it’s hard to tell.” Panel 4: The ghost concludes, “Let’s learn about dual encoding for brand recognition and accessibility.” A smaller ghost in the corner adds, “Follow to be haunted by the accessibility ghost.”

As a designer, I’ve often struggled to balance emotional resonance, readability, & accessibility when working with warm colors like yellow, orange, & pink Vibrant hues like pure yellow #FFFF00 or bright orange #FFA500 created visual strain, lacked contrast, & often failed accessibility checks. It became even complex when I considered the needs of color-blind users To solve this, I created custom palettes for yellow, orange, & pink, designed to maintain emotional impact while ensuring usability & inclusivity. Warm colors matter !! it evokes emotions like trust, happiness & creativity, making them ideal for CTAs, accents & backgrounds. However, their potential can only be unlocked if they are legible & functional for all users—including those with color vision deficiencies. Through research & testing, I created palettes that solve common accessibility problems without compromising the warmth & vibrancy warm colors bring Yellow Palette Pure yellow is often too bright & struggles with contrast on light backgrounds. so, I incorporated muted golds & rich mustards that provide excellent contrast, even for users with deuteranopia or protanopia. These shades retain yellow’s energy while being easier on the eyes. Orange Palette: Vibrant oranges often fail contrast requirements, especially for text or overlays. So, I used a spectrum of softer peaches & deeper tangerines and created options that meet WCAG guidelines while preserving orange’s bold & creative essence. Pink Palette: Bright pinks fail contrast checks and may feel exclusionary due to gendered associations. So, I used a range of blushes, corals, & magentas that ensures better contrast & versatility. These shades are also easier for users with tritanopia (difficulty seeing blues & pinks) to distinguish. How These Palettes Solve Key Accessibility Challenges Contrast-friendly design: Every shade exceeds WCAG AA contrast standards, suitable for both light and dark themes. Colour-blind inclusivity: The palettes feature distinct shades that are easy to differentiate for users with deuteranopia, protanopia, or tritanopia. Beyond color reliance: These palettes pair effectively with text, icons, and patterns to ensure meaning isn’t lost for any user. Practical Applications: - Use lighter shades for subtle backgrounds or inactive elements. - Highlight CTAs and icons with medium tones. - Opt for darker tones for text and overlays to maximize readability. - Validate your designs with tools like Contrast Checker or Color Oracle. By solving this problem, I was able to create palettes that are accessible, functional, & emotionally engaging. This experience reminded me that accessibility doesn’t have to compromise creativity, IT ENHANCES IT ! If you’ve faced similar challenges with color & accessibility, I’d love to hear your approach. Let’s discuss solutions and share insights! Afterall it's always सिक्दै सिकाउदै !! 🙌 #UXDesign #Accessibility #ColorDesign #InclusiveDesign

#1 most common accessibility problem: low color contrast Ever seen beautiful text… that’s impossible to read? Too often, text blends into the background - light gray on white, pastel on pastel, buttons with barely-there text. It might look clean, but if people can't read it, they can't use it. To understand better try going through your website and notice if you need to highlight, zoom in, or change display settings just to read something? Do you find yourself squinting or leaning closer to the screen? Do your eyes feel tired or do you get a headache after working with it for a while? These are red flags. Not just for you, but for many users with vision-related challenges. If you struggle to see it in ideal conditions, imagine how much worse it is for someone with low vision or color blindness. Why it matters: ‧ A person with low vision might not see the text at all. ‧ An older adult may squint and give up. ‧ A user in bright sunlight just won’t bother. And let’s be practical: If the “Buy now” button has poor contrast… People won’t buy. If a form label is unreadable… People won’t fill it in. What’s required? (WCAG 2.1 AA: https://lnkd.in/eC_5EigJ) ‧ Small text: at least 4.5:1 contrast ratio ‧ Large bold text: at least 3:1 How to check and fix it: ‧ Try WebAIM Contrast Checker: https://lnkd.in/e-eW4nXu ‧ Adjust text or background color ‧ Don’t forget hover/focus states too (buttons, links, dropdowns) Solving this very common problem (80% of the websites have an issue with a low contrast) will make a big difference. It’s one of the quickest ways to start improving both accessibility and usability for everyone. And I can help on this journey as web accessibility specialist. What are the most vivid examples of the websites with low color contrast that you experienced? #WebAccessibility #ColorContrast #A11y #UXDesign #DesignTips #WCAG #InclusiveDesign #Frontend #UIUX #DigitalInclusion #AccessibilityMatters