The more I work on interfaces, the more I see how even slight shifts in color could change how I would want people to feel or behave. A deep blue can make an interface feel more immersive. A bright orange button can feel urgent, but sometimes, a little too urgent. I realized color wasn’t just about style and it was about psychology and putting people in the right feelings.
This article explores how color in UI shapes behavior, trust, urgency, and even perception of quality.
Why colors feel the way they do
Imagine if traffic lights had green stop signs and red go signs. Would they still work?
While the meaning might change if we collectively decided it did, the instinctive reaction would be difficult to override due to learned associations.
Through nature, color instinctively guides us. We know that plants, forests and vegetation are green in color and this is psychologically interpreted as calmness, renewal, and stability because this is how we feel when we sight these things. Same goes for red, which is pyshcologically interpreted as danger because it shows up in blood and fire. On the UI, these associations guide everything from CTA colors to warnings, because you're not just styling a button, you're signaling a behaviour. A good example of how color has feelings is basically how most people feel on rainy days vs. how they feel on a bright and sunny day. This chart below shows a summary of some common colors and their association.
Image from Fifteen Designs
Cultural Nuances in Color Perception
On the flip side, color perception isn’t global, due to cultural associations. An instance is the color red, which means luck in China, but danger in the US and a lot of other places. This article by Chris Lee further verifies this, it says that in the US, declining stock prices are reflected with red color but in China, Korea, and Japan, rising stock prices are indicated in red because it is associated with wealth and stock gains. This shows how important it is to consider cultural perceptions because it determines what a user primarily feels based on their environment (what comes naturally to them). This is a very essential factor to consider especially when building for global and diverse audiences. This is the reason why McDonald's uses green in Europe but red in the US. To signal environmental consciousness and align with eco-friendly values more prominent in European markets. Their websites and app themes also adopted more earth tones and minimalism in these regions. Watch this video to learn more. Another example is Airbnb, which localizes colors and imagery on landing pages and mobile app UIs to reflect regional architecture, mood, and cultural color associations. Airbnb uses a primary color, #FF5A5F (a shade of pink), which represents openness, inclusivity, and community. Beyond the global color, Airbnb incorporates local color palettes inspired by the unique cultural and natural elements of each location. They also have a secondary palette featuring bold shades of purple and teal, named after and inspired by streets in cities around the world, further supports the brand's values and adds a local touch, according to The Branding Journal. In Middle Eastern markets, palettes may feature deeper jewel tones or sandy neutrals compared to pastel-heavy Western versions, because of the historical use of jewel tones and association with desert landscapes for sandy neutrals.
But here’s the thing, color in itself alone doesn’t carry meaning. A red can feel urgent or elegant. A blue can feel trustworthy or playful. What determines it's true meaning is how that color is tuned.
Tuning Color for Trust, Urgency & Emotional Clarity
Color properties such as hue, brightness, contrast and saturation affect tone, hierarchy, and usability on the UI. This is a major piece that connects the user's emotions, color perception and how colors are properly used on the interface. It also gives color it's true meaning.
For instance as shown in the image below, Spotify leans heavily into vibrant green and black to create an energetic and expressive feel. The green does more than brand the interface, it cues action and creativity. Its contrast against the dark UI and immersive images and videos, making the interface feel modern, expressive, and tuned in to a younger, music-loving audience. This use of color not only reinforces Spotify's brand voice but also helps users navigate intuitively.
So now, what is hue, saturation, brightness and contrast and how do these things affect the user experience? Well, these are fundamental properties of color and understanding them gives you powerful control over how color works in UI. So here's what they each mean and do:
Hue: This is what we typically think of as “color”, red, blue, yellow, green, etc and changing this means changing the base color.
Saturation: This refers to how intense or pure the color is. High saturation would give vivid, bold, vibrant colors while low saturation gives off muted, soft, grayscale-ish version of the same hue. In the UI, a highly saturated color is attention-grabbing (useful for CTAs or alerts), while a low saturated version of the same hue is calm and subtle (good for backgrounds, secondary UI). An easy way to define saturation is that it is how much gray is mixed in.
Brightness: This is basically how light or dark a color is. A color with high brightness is closer is to white and a color is low brightness is closer to black. A tint of a color is how much white is mixed in while a shade of the same color is how much black is mixed in
Contrast: This refers to the relationship between two or more colors. It’s about how a particular color stands out against something else or another color. It shows how a saturated yellow might have low contrast on a white background because the brightness levels are close but a low-saturation blue on a black background might have high contrast because of brightness difference.
It's important to understand how these color properties work together and the effect on the UI. How these affect things like: CTA visibility, error state perception and brand tone.
💡One tip is this: Don’t just choose colors, adjust their intensity, brightness and contrast based on the screen context and use case.
Still using Spotify as an example, we see how the primary color which is green is used for interface elements. It shows how button states using the same primary color but now a tinted version for the disabled state and a shaded version for pressed and hover states, all bring meaning to an interface and properly guide the user.
Image from Figma's Blog
Using Colors Strategically on the UI
So far, we’ve taken a look at how emotional psychology, cultural environment and color properties can affect color choices on the UI. I have curated a checklist of things to consider when dealing with colors on the UI.
What action or message is this color supposed to show? A confirm action needs trust or clarity (e.g., green/blue), while a warning needs urgency (e.g., red/orange).
Is this color already associated with a meaning in my product, platform or generally? Like the example of the traffic light given, users subconsciously have expectations (e.g., red always means “error”). Breaking it causes confusion.
Will this color stand out in its context? A “primary” button shouldn’t blend into the background. Contrast and visual hierarchy matter.
Is it accessible (sufficient contrast)? No matter how nice it looks, if it fails contrast, it fails function especially for users with visual impairments.
Does this align with the brand voice or tone? A financial app using playful colors may feel unserious. A children's app using deep navy blue as the primary color may feel cold.
How will this color behave in light vs dark mode? Some hues (like yellow or pale orange) lose their visibility or richness when flipped into dark mode.
Is the color communicating a state? Hover, disabled, active, focus, error, success, etc. often require slight tone, brightness or saturation shifts. In fact, a quick color tactic is this: Use tints for gentle backgrounds or soft states, use shades for depth, hover, or dark mode and use saturation shifts for subtle hierarchy or to create "inactive" or "disabled" states (e.g., grayed-out buttons)
Passing Color Decisions to UI Development
Intentional color decisions in Figma is important, but if this is not held up in the code, users won’t feel the difference. Color is more than visual, it is behavioral, emotional, and functional. This is why developers play a critical role in making sure those color choices aren’t lost in translation. Use the checklist below to ensure that your interface honors the intention behind each color, not just visually, but functionally, accessibly, and at scale.
- Is the color token semantically named? Colors should be named based on their functionality on the interface e.g. primary, info, danger, surface-muted, avoid using color names alone e.g blue-1, blue-3. This helps to avoid inconsistent usage across dev and design and also matches how colors are meant to feel, not just look.
- Have all interaction states been accounted for? Developers tend to skip or misuse interaction states like the active or hover state of a button which are usually differentiated with color by using shades or tints. These states are important because they give users a visual feedback, it helps them know what's clickable or interactive and if they have interacted with it
Is the color used consistently across states? Accounting for interactive states is not enough, states should be clearly defined in your palette e.g., --color-primary-hover, --color-disabled-text. This ensures consistency in user experience.
Does this color choice affect perception (trust, urgency, etc.)? A blue alert that says 'Something went wrong' is wrong color choice as it doesn't give the user the right perception of an action they have taken on the UI which failed. Things like this are very important and the right colors in the right shades or tints should be used.
- Has this color been tested in both light and dark modes? A color might look really good in light mode but is hard to see in dark mode. And yes, the UI design might only be done for light mode interfaces, but users still have the freedom to change to dark mode using system or OS settings. If both modes are not properly tested and accounted for, it could greatly impact user experience for a specific set of people.
Conclusion
So far we've gone over why color feels the way it does, cultural nuances that could impact color perception, and how this translates to colors on the interface.
Color on the UI is about clarity. It helps users make decisions, feel trust, notice urgency, and navigate confidently often at a quick glance and without reading a single word.
That’s why designing with color isn’t just about picking beautiful palettes, it’s mainly about making intentional, context-aware choices that help elevate the UX, scale across themes, and hold up under accessibility standards.
Thoughtful color is a form of communication. The more deliberate you are, the more intuitive the experience becomes.
Useful Resources:
A long list of colors, their meaning, how they can be combined and used on the UI: https://www.figma.com/colors/
Find the color of anything: https://picular.co/
A one-of-a-kind tool for creating, managing, and sharing accessible color systems for user interface design: https://leonardocolor.io/
A Figma plugin to generate color palettes within Figma https://www.figma.com/community/plugin/1286792998372727741/color-wheel-palette-generator
A Figma plugin for creating color palettes based on Design Systems like Material, Atlassian, Orbit and Ant Design: https://www.figma.com/community/plugin/1024452006068794933/foundation-color-generator
A tool to create beautiful color palettes with AI. Generate color palettes from names, images, text, or hex codes https://colormagic.app/
A Figma plugin crafted to automate color and button creation: https://www.figma.com/community/plugin/1344368111040867237/design-system-generator
References:
https://www.figma.com/resource-library/color-combinations/
