When I was starting my UI design journey, the topic of color gave me anxiety. It felt like people who were good at using color were tapping into some sort of unicorn blood-fueled black magic, and that no matter how hard I tried, I’d never be able to do what they did. And for context, I was feeling this way with a graphic design background!
Truthfully, using color in user interfaces does require some specific knowledge, but it’s far from black magic. I wish I had someone to sit down with me and tell me what I actually need to know, because all I had at the time was my own anxiety and a handful of “designery” articles about color theory and the golden ratio.
The truth is, like all skills in life, it’s not hard to do, you just have to learn it. And if I can learn it, you can learn it — and neither of us even has to hunt a unicorn to do it. And I’ll do you one even better: once it starts to click, it can be fun.
Let me caveat here for a second: I’m not going to go super deep into color theory or get too theoretical. This article is meant to be practical, not exhaustive. It’s my hope that by the end of this article, you’ll feel more confident to start experimenting with color yourself.
I’ll cover things like:
- How important color is for UI design
- What colors to use in your UI and when
- How many colors you should use when designing a UI
- How to know if your UI color choices look good
And I’ll include examples to help you actually see some of this stuff in action. But quickly before I go into that, I want you to keep something in mind:
Color is surprisingly flexible
When I went to design school, I learned that you generally want to avoid colors that clash or create a sense of vibration (for example, light blues and oranges.) But let’s take a moment to a look at this crazy use of color:
The blue stripes inside the orange pants absolutely shatter the traditional take on what I learned about color. But somehow… it works? Magic. For the moment, I want you to throw out everything you thought you knew about color. To learn color, you need to experiment.
It’s important to keep in mind the context in which you’re using color. This example is an illustration, and therefore it has a different ruleset. When you use color in your UI designs, you want to use color more precisely. And whereas our friend Sebastian here probably actually intended to create a muddy/vibrant effect, we do not necessarily want our button text to feel that way; we want ours to be readable. Main point here? Color is weird. And cool.
How important is color to UI design?
Let me just be super straightforward here to dispel a myth, and hopefully save you some time: color impacts our emotions. You can fast-forward through the debate about whether color theory “works” or not. It's for real, I'm just going to tell you now.
Some associations we have with color are certainly socialized as opposed to innate. For example, there’s no reason for example to think the color blue 💙 is associated with trust other than the fact that a million financial institutions use it.
And even that may be because of more innate associations like the calming effect of water or the sky when you’re interacting with a survival-related and stress-laden topic such as money. Food for another day's thought, I suppose.
I would argue that whether or not any particular color association is innate or socialized doesn’t matter. All that matters is if we have them or not, and the answer to that question is a just plain yes we do.
But let's take a quick bus ride over to an example. Think about the last time you tried a delicious new food. What did it look like?
Maybe something like this:
Or this:
…. No?
Ok, maybe that first one was a little more like this:
Or this!
Alright, alright. Pretty on the nose, you say.
But here's the thing: pay attention to how you feel when you look at the black and white version, and then, when you look at the version with color. Especially if you’re hungry. Maybe this even made you hungry. (sorry!)
Now, take a look back at the first image. At a glance, how easy is it for you to identify the different components of the bowl without color? With color?
When designers talk about “CoLoR tHeOrY,” it sometimes feels like a very lofty, academic, and pretentious topic. Maybe it even feels a little ... I don't know, made up?
But our food example here is the practical version of what that’s all about. We all know color is important. Maybe we just haven’t thought about how important it is, or maybe it feels like UI design is some other, detached world from the world of tex-mex bowls and steaks, but it’s actually one in the same.
At its core, color is just a high-bandwidth vehicle for information, both emotional and functional. It shortcuts the conscious part of your brain and taps right into the deeper subconscious part, very quickly telling us what's up without us even knowing it.
And if color is an information vehicle, and design is the science of visual communication, then color is a fundamental pillar of that science.
Aka, color is important as heck in UI. And it’s worth learning!
Ok. Enough on that. Still with me?
When you’re trying to up your UI design color game, you really only need to know a few basic principles to start being a capable colorer.
First, let’s take a brief tour of color theory.
Color theory is kinda simple
Every single color that we see is a result of a combination of 3 colors: red 🔴, green 🟢, and blue 🔵. These are called primary colors of light, and they are legit:
And by "every color we see," I mean everything. The color of the leaves on the trees outside, your favorite plum colored sweater, the pukey-poopy upholstered furniture set… all of it. Imagine everything you see in terms of the intensity of each of the 3 primary colors.
For example, the leaves on the tree might be something like:
Red: 50% Green: 62% Blue: 25%
And your favorite plum sweater might be:
Red: 37% Green: 31% Blue: 46%
And grandma’s furniture might be:
Red: 72% Green: 53% Blue: 38%
I would highly, highly, highly recommend you try this:
- Go outside
- Find an object with a color you want to guess
- Guess what percentages of color might make it up
Practicing this is a way to make meaningful progress today.
Even just going out and doing this once a day on a walk, or when you’re picking up groceries after work, is a very real way that you can start to build your color intuition. You'll start noticing color more.
And even better than that, the more you do this, the more you will close the gap between your ability to imagine how something should look, and your ability to create something that looks like how you imagine it.
You should also know: there are also such things as secondary and tertiary colors, and I would recommend reading up on those just so you know what they are. Secondary colors are two primary colors combined, and tertiary are the combination of a primary and secondary.
And heck, here’s a color wheel so you can see:
Otherwise, for the sake of this article and for your time, I won’t go into those any further. There are a million articles and a Wikipedia page that will do a way better job if you’re interested!
However, I wouldn’t worry too much about secondary and tertiary colors or the color wheel for now.
You’ll reference them occasionally over time, but for our purposes, we’ll focus on something else:
The Color Picker
Learn this tool. Once you get it, this tool will be your best friend.
It’s also pretty easy, once you understand how it works:
Hue
Hue is the purest version of the color itself. It’s the mostest reddest red, and the mostest bluest blue, and so on. Primary, secondary, tertiary colors and everything in between are all hues. You control the hue by selecting a position on the rainbow bar on the bottom, and then moving the selector all the way to the top right of the bar.
Value
Value is the amount of black (shade) or white (tint) mixed with the color. You change the value by sliding up or down. Changing this changes … well, the darkness or the lightness of the color.
Saturation
Saturation is the intensity of the color. Aka, how much hue the color has. Change this by sliding left and right.
And that’s literally all there is to it. You can make every single visible color by adjusting these 3 properties. And from there, it’s just a matter of practicing using it and building your color muscle.
Now knowing how to use the picker, start practicing your color-recreating abilities, but this time using a photo and the color picker. Try to recreate the color you see simply by changing the hue, saturation, and value.
You will get better at this the more you do it, I promise.
Eventually you’ll be nailing colors and people will be paying you to do it.
So, we’ve covered the basics of color and how to create the colors you want. Now you might be wondering… okay, but what colors do I use, and when?
What colors to use in your UI, and when
So here’s the thing. We know color affects how we feel. But what colors mean what? And how do you know when or when not to use a color?
First you need to know that some colors take priority over others. This is because they are used to communicate very important information.
Let’s take red for example, stop signs are red because red communicates arrest, intensity, and danger. Check out this dangerous stuff:
That’s not to say that everything that is red is dangerous. Tomatoes, for example, are a delicious red fruit (I said it) that are only dangerous when they’re being hurdled at you in a tomato fight.
But the effects some colors have on our psychology are distinct and pronounced, so you want to try to reserve them for very important use-cases. This isn’t to say that you can’t ever use red for anything else, though. Keep in mind that these are guidelines, and guidelines can be broken when the situation calls for it.
So here’s a quick guide on when to use certain colors. Again, this is a set of guidelines intended to help you get started as a beginner, and guidelines, are… well, guidelines. Use them until you feel confident about which ones are okay breaking and when (you’ll build this muscle over time.)
Red
Common UI elements: Errors, when things are broken, alerts, alarms, critical problems, sometimes offline status, stop, destructive actions (like a “delete” button)
Emotion & brand associations: Danger, aggression, anger, passion, love, danger, “stop” sentiment, richness
Orange
Common UI elements: Medium-intensity alerts, something needs attention
Emotion & brand assocations: Excitement, warmth
Avoid: similar to red
Yellow
Common UI elements: not many
Emotion & brand assocations: Happiness, warmth, sunshine, caution
Avoid: similar to red and orange
Green
Common UI elements: Online/active/positive status, done-ness (think checkmarks,) good to go, positive signals
Emotion & brand associations: Environment, natural, positivity, “go” sentiment
Blue
Common UI elements: Typically only branded UI elements (buttons, etc)
Emotion & brand associations: Trust, calm, “all good” ness, security
Purple
UI elements: Typically only branded UI elements (buttons, etc)
Emotion & brand applications: Richness, royalty, magic
Now that you know some of these associations, start looking for them in the apps and websites you use, as well as stuff out in the real world. If you’ve never touched on this before, it might blow your mind how much subtle signaling is happening on a daily basis.
Which leads me to one of the most important points I will make:
You should limit the number of colors you use in your UI design
Color is obviously an extremely useful tool in design. That being said, it’s easy to get excited and overdo the number of colors you have. I’ll be the first to say it: once you get the hang of it, color is fun. I love color. But there’s a direct relationship to the number of colors your UI uses and the complexity of your UI.
As a reminder: color is a vehicle that carries information.
Complexity isn’t necessarily bad. It’s a good thing your glass-top stove puts red outlines where the burners underneath are so that you don’t burn your hands every gee-dang time you’re trying to make a meal. The red lines add complexity, but it’s also useful complexity.
In UI design, too few colors can also be unhelpful. You don’t want your “Permanently Delete Forever” button to look the same as your “Sounds good” button.
If it does, you may get people accidentally tapping it, deleting all their stuff, and getting rightfully frustrated at you for misleading them.
But too many colors is also unhelpful.
As a rule of thumb, you want just enough color in your UI to carry the meanings you need. No more, no less.
With that said, generally speaking, you’ll need to consider 4 basic colors when you’re designing a new UI:
- Background color
- Your primary, or main, color
- Secondary, or accent, color
- Semantic colors
You may use variations within those colors, but you want to keep the total number of colors low.
Also, just as a side note: primary and secondary colors in this context are not the same as primary and secondary colors on the color wheel. It just means your more important and less important color.
1. Background color
Imagine you’re painting the walls in your apartment or house. The background color is kinda like the base wall paint color you’d choose for your interior walls. Its purpose is to serve as a backdrop for the stuff that goes on top or in front of it. Typically it’s a neutral, white-based color, or a soft gray, and it’s easy on the eyes.
It should be neutral enough so that the things that will go on top of it (text, media like photos/illustrations, icons, buttons, and so on) have enough contrast to be easy to read, identify, and use. In this way, the background color you choose is actually the foundation for the visual hierarchy of your app or website.
Although some of us may paint our walls in more fun ways, keep in mind that at the end of the day, user interfaces are tools, and people will actually be using what you’re designing here. So it’s important to be able to find things, read them, and use them, and therefore more important to use neutral colors for backgrounds. If you really love the color red, you might paint your dorm room red, but you wouldn’t surround a red emergency SOS button in a red wall. Unless you’re a horrible person.
It’s best to stick with 1 background color, but feel free to include a variant or two. In certain circumstances, you may need 2 background colors. Imagine Google Docs, for example, where a light gray background creates definition for a white page, and then the white page creates definition for the content (text, photos.):
2. Primary color
This is the color or colors you’ll use for large areas of your UI. In most cases it is the primary color that is associated with your brand. For Coke, think red. It will often be used for things that are on top of and therefore surrounded by your background color, and may often contain text, so it should be clearly visible and high-contrast against your background color. Also consider how easy it is to read text that is inside it.
In some cases, your primary color will be used for large branded areas, such as a header, as well as buttons.
In some cases the primary brand color will conflict with colors that should be reserved for important states, like error states. Or it may create readability issues when text is placed over it.
Say, for example, your brand color is a bright orange. In that case, you might consider using another color that pairs well with your brand color for things like buttons (for example, if your secondary brand color is a rich black color, use that) or a shade of your primary brand color (in the Coca Cola example, a dark red) to increase the visibility of text against the button.
Or, you can use your brand color as an accent color instead. As a rule of thumb, your primary color should be no more than ~30% of the visible UI on your screen at any given point in time.
3. Secondary, or accent, color(s)
Your accent color is typically another brand color and is often used to call attention to a specific part of the UI. For example, your main call to action buttons might use your accent color. Or you might use it for linked text or icons. Generally speaking though, your accent color should account for roughly 10% of your color usage at most.
Here's an example of background, primary, and accent colors in action:
4. Semantic Colors
Semantic colors are colors you’ll use for things like errors, warnings, notifications, deleting, and so on. These are purely functional in nature, and colors you’ll want to reconcile with your color scheme at large.
Now, all of this is only a guideline; over time you’ll build a better sense of when and where you want to apply your color.
And I know what you might be thinking right now: wait a second, your primary color can be your brand color. But your accent color can also be your brand color? Which should I use for which?
The cold hard facts: it’s not a perfect science.
Here’s what I’d recommend.
Start with a baseline of guidelines (60% background / 30% primary / 10% accent) and semantic colors (examples: errors = red,) and build on it over time. Each app and website is unique, and the more you practice using color, the more you’ll build intuition of which color, how much to use, when, and where.
You may decide that you don’t need a primary color in your design at all, and that you want your brand to come into play in the form of photos and accent colors. As with everything in UI design, context is important.
Nike is an excellent example of this: they made the decision to focus much of the visual attention on the photography of their shoes, since by nature, this is their “product”. The result? Most of their actual “UI” is white or light gray background. Their primary color is used for call to action buttons (aka Add to Cart) and they merely sprinkle in an orange accent color throughout the app:
At the end of the day, you need to do some of your own experimentation to get a sense for which colors to use where. Find examples of apps or websites you like, and copy them. Learn how many colors they’re using, and see if you can find a pattern or a system.
There is no perfect science to making something “look good”
Unfortunately for those of us graced with the affliction of perfectionism, I’m here to break it to you: you can’t logic color past a certain point.
The truth is, it’s like learning a language.
First, you learn the words. Get a sense for what words mean what, and when to use them. Then, you learn the rules. “Never start a sentence with the word ‘but’,” they say. “But starting a sentence with ‘but’ adds tonality to your writing!” you say. See what I did there? You learn the rules, and then you learn how to break, or maybe more accurately, bend them.
Unfortunately, there’s no objective way to know if the colors you’re using “look good”.
You can, however, learn by paying attention to things that you think look good, observing how it’s being done, and learning how to do it yourself.
That being said, UI design is, first and foremost, about usability. Here’s a practical checklist you can run through as you’re working on something:
- Can you read it
- Can other people read it
- Would the brand do it
- Be kind to yourself
By running your designs through these checks, you can at least start to understand if your UI will be easy to read and use.
1. Can YOU read it?
Okay, so you came up with a color scheme, and you tried designing something with it. The first, fastest, most practical way to understand if your design works or not is a little closer to home than you think: yourself.
You are, after all, a human being. That’s all it takes to be a qualified user. So tap into your own user sensibilities, imagine you’re not you… and take a look.
What do you think? Is it easy to read? Is it easy to know what to do next? Do you know where to tap? If not: try to identify what’s going wrong. Maybe one area looks right, and one doesn’t.
There’s no speed-running this process; it’s how you have to learn.
Look at what you’re doing, and look at examples of what others are doing where you don’t get that prickly uncomfortable feeling. Compare them. Figure out what’s different and try something else. Maybe it’s a contrast issue. Maybe the colors just don’t jive together.
2. Make sure other people can read it
If you’re not familiar with the topic, designing for accessibility is essentially the philosophy of designing things in a way that allows the maximum number of people to successfully use whatever you designed.
In UI design, this often plays out as making sure the contrast between certain elements in your design is high enough that is easy to read even for the most vision-impaired.
Why’s that a good idea? By designing something to be effective for those who would find it most difficult to use, we are putting maximum effort into designing it well, period. And if we can make life easier for more people, then we’re doing our jobs well too.
A tool that you can use for this kind of accessibility checking is a contrast checker. There are many available, just be sure to use one that adheres to WCAG (Web Content Accessibility Guidelines).
3. Do things that make sense for the brand
Coca Cola’s not about to launch their main app with big green, purple and yellow banners and buttons.
Branding is a much larger topic, but go back to the color associations drawing board and pull from there. Should people feel a sense of trust when they come into your app? Or do you want them to feel engaged and excited? How about calm and relaxed? Maybe like they’re in a place of luxury? What colors can you lean into to match the the goal of your new “brand”?
There’s a reason Tinder is fiery red, and why Apple is an austere white and black.
4. Don’t stress about being unique
Honestly, this is such a hard thing as a designer. But the truth is, there are so many people on this planet and like, so many of those people have had ideas and businesses and apps and websites.
I will tell you now: it’s all been done before. Every color scheme under the moon has been thought of. It’s how well you use it to solve the problem, and the context you apply it in that will make it successful or not.
Mozart didn’t bother himself with whether or not others had used notes in a certain order. Rather, he focused on telling the story he needed to tell through music, combining techniques created by others before him, and the result ended up being magnificent.
The sooner you free yourself of the burden of trying to be unique, and instead putting your focus on solving problems for others, the sooner you’ll be on your way to coming up with some excellent designs.
When you’re starting out, just focus on making something work. Just because Walmart uses white, blue, and orange, doesn’t mean you can’t. Innovation isn’t invention out of thin air, it’s remixing old ideas into new contexts to create new ones. Seriously, I am saving you a ton of existential stress. Don’t. Sweat. It. Just focus on practicing.
With all that said…
Color isn’t magic… but it is powerful
Now that you hopefully have some sense of why using color effectively is important, as well as how to use color in your designs, here’s what I’d recommend:
Have fun with it.
Keep guidelines in mind, experiment, and observe. Notice how other apps that you like are using color. Listen to your own intuition as a user. And ask others how easy it is to use, see, or read things in your designs.
Observing others who do something well, and then trying to recreate it, is the fastest and most reliable way to learn something new.
There’s no shortcut to learning how to wield color like a magician, but I promise you: the more you pay attention to it in your surroundings, and the more you play around with it, the stronger those color muscles will get.
Happy coloring! 🎨
