Color Theory in Web Design

I have spent hundreds of hours analyzing design systems. One of the things that confused me for many years is how to structure color scales and tokens. I have experimented with multiple structures at different sizes of design systems, and at a high-level recommend the following approach: 1. Primitive Colors Your design system foundations should always start with a full color scale that is based on your brand identity. We call these colors Primitives, and your variable/token collection should look like this: - purple-600 - purple-500 - purple-400 - And so on.. To create a Primitives palette you will want to start from your main brand colors and use a tool like UIColors, Supapalette, Colorbox to expand to the full scale. (links in comments) This is a great foundation to have, as it gives you a set of shades that can be used in different ways, and ensures all of them have consistent hues, saturation and brightness. However, Primitive colors are simply not effective when used directly in your designs: - They create ambiguity - Their names have no contextual meaning - They are often misused due to similarity If you have had the “why are there 20 different shades of gray?” conversation with an engineer, you know what I mean. So let’s see how we can improve that. 2. Semantic Colors This is my default recommendation to all product design teams that don’t have a highly complex design system. What you will want to do here is create a new variable collection named Semantic, which is what’s visible in your design files, and comprises of: - Brand / Action - Text - Link - Border - Icon - Surface / Background - Bias - Data / Charts Each color should point to a primitive value, e.g. - text-primary → gray-800 - text-secondary → gray-600 - text-tertiary → gray-400 This takes a bit of setting up, but creates immense long-term value. A great example of a simple, theme-level Semantic structure is Shopify’s Polaris (link in comments) 3. Component-level Semantic Lastly, if you are working on a design system with a lot of complexity and, ideally, a dedicated design systems team, you might want to add another level of hierarchy and specify colors at a component-level. In this structure, you would want to create color tokens based on how they are used in each component. - input-text-filled → text-primary - input-text-placeholder → text-secondary - input-text-disabled → text-tertiary This eliminates all guesswork, but also increases the complexity exponentially. It does serve a purpose though. As design systems scale, you may find that: - A theme-level semantic structure is too restrictive - There is still some guesswork - Decisions need to be documented. An example of this is Uber’s Base and Adobe’s Spectrum design system, linked in the comments. I’m curious to know, what structure are you using for your design system and what has worked well for you? — If you found this useful, consider reposting ♻️ #uidesign #designsystems #productdesign

🎩 “How We Designed a Multi-Brand Design System” (https://lnkd.in/erc3mA4i), a fantastic case study by Ness Grixti on the pains of maintaining multiple systems, how to make a design system work seamlessly across multiple brands — with a multi-system token infrastructure in Figma, applied everywhere. Most teams eventually go through a “consolidation” effort — and that’s where struggles emerge as different systems have slightly different needs. Wise team created a system where the entire library is controlled by a top brand layer, which contained nested libraries for type, spacing and colors. I love Wise's approach of 1 system with 2 tracks to avoid duplications — typography and spacing on one track, and color on the other. Both pulled from shared primitives and brought together in a single Global Token library that houses all brands. As a result, designers can manage responsive type, spacing and interaction states across all color themes from one place. 🧱 Raw values core → for color, type, spacing without brand associations 🧅 Layered structure → primitives, scaling/device, sentiment, brands 🌈 Sentiment themes → for alerts, neutral, warning, success, proposition 📏 Accessible dynamic scaling → for type and spacing values 📦 Nested variables → scaling lives within responsive device library ♻️ Avoiding token explosion → tokens shared across brands + diffs If you'd like to dive deeper, I highly recommend to take a look at the Multi-Brand Design System Figma Kit (https://lnkd.in/eShgnPnW) by Pavel Kiselev, a practical guide and Figma kit on how to set up a design system in Figma for multiple brands, platforms or products — with full control over colors, typography and visual styles. And huge kudos to Ness Grixti (along with colleagues Henrique Gusso and Willem Purdy and the wonderful Wise team) for sharing the challenges, the failures and successes for all of us to learn from! 👏🏼👏🏽👏🏾 #ux #design

There’s no such thing as inaccessible colors. It’s all about combinations. Yes, even yellow! Let’s debunk the old myth that “accessibility limits color choices.” I love yellow (have you seen my hair?) and purple (have you seen my website color palette?). Together, they prove you can design fun, vibrant, accessible palettes with so-called “tricky” colors. I built six WCAG-tested palettes to show that accessibility doesn’t limit creativity. And I turned the process into a full tutorial (with video) so you can learn how to build your own accessible color palettes in Figma. What to expect: - Six accessible yellow and purple palettes, ready to use - Step-by-step guide to building palettes in Figma - A 19 minutes video tutorial to make my whole process easy to follow 👉 Read the full article + tutorial on my blog: https://lnkd.in/gq8eHK_Q And if you don’t use Figma, I’ve added links to web-based tools so you can follow along too.

1 in 12 men can’t see your design. And you’re still using red for errors. There’s a real chance your user can’t distinguish between your success green and error red. Yet most design teams still treat colour blindness like an edge case. It’s not. Here’s the simplified breakdown every designer should know: 1. Red-Green (Deuteranopia & Protanopia) - 1st Priority Affects ~8% of men, ~0.5% women. Users struggle to distinguish: • Red vs green. • Brown vs green. • Orange vs red. What to do: • Never rely on red/green alone for success and error states. • Pair every status with text and an icon (✓ ✗ ⚠). • Ensure colours differ in brightness and contrast, not just hue. • Meet contrast requirements: 4.5:1 for text, 3:1 for UI components. If you only fix one thing, fix this. 2. Blue-Yellow (Tritanopia) - 2nd Priority Very rare (~0.01%), but still worth checking. Users struggle with: • Blue vs yellow. • Blue vs green. • Purple vs red. What to do: • Avoid pairing blue/yellow for critical states. • Don’t rely on blue vs green to indicate meaning. • Add icons and text to “info,” “warning,” and “alert” states. • Maintain strong brightness contrast. Red/green works fine here. 3. Monochromacy - 3rd Priority Extremely rare. Users see only in grayscale (no colour perception). What to do: • Rely on contrast, not hue. • Use text labels, icons, patterns or structural differences. • Never use colour as the only indicator for meaning. If your design works in grayscale, you’ve already covered this. Here's a guide your team can use: ✅ DO • Add icons or labels to all colour-coded states. • Use contrast differences ; at least 4.5:1 for text, 3:1 for UI components. • Test with simulators (Stark, Colorblind, Who Can Use). • Ask yourself: “Does this work in grayscale?” ❌ DON’T • Use colour as the only indicator. • Rely on red/green for critical actions. • Skip accessibility testing. 👇🏽 What’s your experience with colour blindness? Drop your thoughts in the comments. ♻️ Share and save this for your team. --- ✉️ Subscribe to my newsletter for accessibility and design insights here: https://lnkd.in/gZpAzWSu --- Accessibility note: Contents in the image attached contain normal and large text ratios for WCAG 2.2 AA only.

For the longest time, every new project meant starting from scratch. New colors. New typography. New spacing. New everything. And honestly, it took a lot of time that could’ve been better spent designing for users. So I decided to create a 𝐦𝐚𝐬𝐭𝐞𝐫 𝐅𝐢𝐠𝐦𝐚 𝐟𝐢𝐥𝐞, one that works like my personal design foundation. Here’s what I set up:  🎨 𝐂𝐨𝐥𝐨𝐫 𝐭𝐨𝐤𝐞𝐧𝐬 - primary, secondary, tertiary, semantic colors, and a detailed gray palette.  🔡 𝐓𝐲𝐩𝐨𝐠𝐫𝐚𝐩𝐡𝐲 𝐭𝐨𝐤𝐞𝐧𝐬 - scalable system with clear hierarchy.  📏 𝐏𝐫𝐢𝐦𝐢𝐭𝐢𝐯𝐞𝐬 - border widths, spacing, radii, number scales.  📑 𝐃𝐨𝐜𝐮𝐦𝐞𝐧𝐭𝐚𝐭𝐢𝐨𝐧 - all neatly organized in one place. Now, every time I start a new project, I simply duplicate this file, and in just a few clicks, I update the tokens using variables, and everything across the file reflects instantly. Easy peasy. It sounds simple, but it’s been a game-changer: 𝐍𝐨 𝐦𝐨𝐫𝐞 𝐢𝐧𝐜𝐨𝐧𝐬𝐢𝐬𝐭𝐞𝐧𝐭 𝐬𝐭𝐲𝐥𝐞𝐬 creeping in. 𝐍𝐨 𝐦𝐨𝐫𝐞 𝐰𝐚𝐬𝐭𝐞𝐝 𝐡𝐨𝐮𝐫𝐬 redefining basics. And handing over to developers? So much smoother. If you’re someone who juggles multiple projects back-to-back, setting up a reusable token-based system in Figma might just save you a lot of time (and sanity). #uxdesign #variables #tokens #typography #colorstyles #freelance

The way colors interact with each other can make or break your brand’s perception. Yet, it’s one of the most overlooked aspects of branding. Many brands fall into the trap of relying on broad, generalized meanings for colors, like red for passion or blue for trust. ↓↓↓ While these are helpful, they aren’t the FULL story. The real power lies in how colors interact with each other within a palette. For instance, vibrant red and green appeal to the holidays, but pair that same red with deeper, muted reds, and you get a luxurious vibe. Hot pink might feel fun or feminine on its own, but combine it with black, and it suddenly exudes confidence and bold energy. The interplay of hues can subtly shift how customers emotionally connect with your brand. But don’t overlook trends either! Take Pantone’s recent Color of the Year, Mocha Mousse. While it might initially seem bland, its ties to sustainability make it a valuable accent for eco-conscious brands. I used it strategically for a high-end chocolate brand, not as the main color, but as an accent. Combined with richer hues, it told a deeper story about sustainable production and high-quality craft, steering away from overused color palettes in the industry. 💡 What’s the key takeaway? Your brand is more than JUST a color. Color is one of the first forms of communication. And how those colors interact, tell a story, and connect emotionally with your audience. Look at how your hues interact across visuals, packaging, and marketing touchpoints. Subtle shifts in contrast or tone can make a big difference in how your audience connects emotionally. Always test your palette as a whole. One approach I love to use when designing brand identities comes from the principles of Joseph Albers, who studied how our brains perceive colors differently depending on their surroundings. For brands, testing how your colors interact with one another is vital. These combinations tell a story about your brand’s tone, energy, and message. Which colors are driving your brand today? Have you considered what story they are telling? #LIpostingdayJune

Don’t Lose Your RAG: How to Use Red, Amber & Green Responsibly in Dashboards As data professionals, we’ve all heard it: “Don’t use red and green in your dashboards - people with colour vision deficiency won’t be able to tell the difference.” Wrong. The truth is, you can use red, amber, and green - as long as you do it properly. What do I mean, and why should you care? 🧐 Why RAG Still Matters Whether you like it or not, RAG status indicators are embedded in business culture - especially in executive reports and performance dashboards. 📌 Executives love a quick-glance signal. 📌 Red = urgent. Green = all good. Amber = needs attention. 📌 It’s familiar. And familiarity drives faster decisions. So rather than throwing RAG out entirely, we need to be smarter about how we use it. 🧐 The Accessibility Issue Roughly 1 in 12 men and 1 in 200 women have some form of colour vision deficiency (CVD) - commonly referred to as colour blindness. The most common type, deuteranopia, affects red-green perception. So yes - your standard green-to-red gradient is a mess for a sizeable chunk of your audience. Especially when: ❌ You're using continuous colour scales (e.g. red to green heatmaps) ❌ The colours are just slightly different hues with no other visual cue ❌ There's no text, label or tooltip to clarify meaning 🧐 What Works Better? ✅ Use discrete colours instead of gradients When you’re working with Red, Amber, and Green KPIs, use clearly separated blocks of colour, not a continuous scale. This removes the visual ambiguity. ✅ Choose a colour-safe palette For example, the IBCS colour palette provides Red and Green colours that remain distinguishable even with CVD filters applied. ✅ Add labels or tooltips Text clarifies what colour alone might not. A simple “Red: Critical”, “Amber: At Risk”, “Green: On Track” label or hover tooltip can make your dashboard instantly more accessible. ✅ Give users control Where appropriate, consider letting users switch views or toggle labels to meet their accessibility needs. 🧐 A Real Example I recently tested two RAG designs (see in the attached video): 1) A standard green-to-red diverging palette (looked fine at first - but ran into problems under a CVD filter) 2) A discrete IBCS-style palette with clearly separated colour blocks (remained readable even with filters applied) The difference was clear - literally. And yet, the RAG meaning remained intact for all users. 🧐 Final Thoughts Stop treating red and green as the villains of dashboard design. Used well, they’re clear, powerful, and intuitive. Just make sure you’re thinking about everyone who uses your dashboards - not just those with perfect vision. 🎯 Want to try this yourself? Test your colour palettes with ColorOracle.org and build with confidence. And as I always say…give your stakeholders what they WANT, and a little bit more of what they NEED, each and every time… #DashboardDesign #ColourAccessibility #TableauTips #KPIReporting

If you’re new to the complexities of color accessibility standards — like I was at the start of this project — here’s a distilled cheat sheet that can help you make the most of our new tool in Figma. We know this can be a bit daunting at first, so we put a lot of care into this feature, trying to make it as simple as possible for you. Whether you’re brand new to this concept, or a seasoned a11y pro, you can start leveraging this right away. Here are the basics: → Strong color contrast makes your designs more inclusive by improving readability for users with visual impairments. → A contrast ratio is simply the foreground compared to the background, the higher the number, the higher the contrast, the more inclusive it is. This ratio is automatically calculated in real-time and displayed in the top left corner of the color picker. → We built everything using the WCAG 2.2 standard, which is widely accepted and most commonly used. That standard has categories and levels defined, which are available to you in the settings menu. → Figma will automatically detect the appropriate category of the layer you have selected, but you can override this if you need to from the settings menu. → Level AA is good for most projects, and is the Figma default. → Level AAA is considered above and beyond, and is good for projects that have enhanced needs. → Large text is considered at least 24px or Bold 19px. → Normal text is considered below 24px or Bold 19px. → Graphics are considered icons, controls, and other elements that have meaning. (BTW Level AAA does not exist for this category, so if you see your level changing on you, this is probably why.) → You’ll see AA or AAA in the top right corner, alongside a pass/fail icon. This is your stable place to find the status at any point. → You’ll see a pass/fail boundary line on the color spectrum, use this as a visual aid to choose a color that meets your goals. → You’ll also see a dotted pattern on the color spectrum, this is the fail zone. If your color is in this area, you can click on the fail indicator in the top right corner to auto-correct it to the nearest passing color. → If you need to know the background color that was auto-detected, click the contrast ratio in the top left corner to open a flyout with more color info. We blend together any transparent background elements as well, so this value may be technically undefined in your file, but we’ve done it this way to be as accurate as possible to what you see on the canvas. → In more complex layer structures (such as overlapping elements), or complex color scenarios (such as multiple colors, gradients, or images), the calculations may not be possible. If you find that’s the case for your design, we recommend duplicating and isolating the foreground and background elements you want to evaluate onto a clean part of the canvas. Let us know if you have questions, and happy contrasting!

Every time I work on a brand identity or marketing project, clients usually start with this line: ‘I want my brand to be blue (or any color) because I like it.’ I get it. Colors are personal, and we naturally want our favorites to show up in what we create. But the number 1 thing we should keep in our mind is, we don’t build a brand for ourselves. We build it for the people. And that means the center of all decisions has to be your audience, not just your personal taste. So how do we really decide on brand colors? Here are the steps I follow 👇 1. Audience Psychology Understand what emotions your target audience connects with. ➡ Example: Food brands often use red or yellow (McDonald’s, Domino’s) because they stimulate appetite and energy. 2. Industry Positioning See how competitors use colors and find a distinct space for your brand. ➡ Example: In fintech, many brands use blue for trust (PayPal, Visa). That’s why CashApp chose green to stand out. 3. Cultural Meaning Colors mean different things in different cultures make sure yours aligns with your market. ➡ Example: White symbolizes purity in Western weddings but mourning in India and China. 4. Brand Values The chosen color should reflect your brand’s personality and promises. ➡ Example: Tiffany Blue reflects exclusivity, luxury, and timeless elegance exactly what the brand stands for. 5. Usability & Flexibility Test how the color works across mediums digital, print, packaging, merchandise. ➡ Example: Coca-Cola’s red looks just as powerful on a billboard, a can, or a T-shirt. 6. Longevity Pick a color that grows with your brand, not just one that fits today’s trend. ➡ Example: Coca-Cola red and Starbucks green have lasted for decades because they’re timeless, not trendy. Your favorite color can be a starting point but the right brand color is a strategy, not a preference. It’s about psychology, culture, positioning, and connection. When done right, color doesn’t just look good it makes people remember you. 💡 Save this post for later, use it as a checklist when you build your brand identity.