If you’ve taken an art or design class, chances are your instructor mentioned the term “color theory.” That was probably the last time you gave it any kind of thought, which explains why many of us make arbitrary decisions when using color in our design work.
When you think of the word color, you may think: blue sky, green grass, and black metal. Okay, maybe you didn’t think black metal, but you see where I’m going. Color is this intangible, visual experience that comes with an emotional response. It is a complex thing when you think about it. And it can be intimidating to work with.
For whatever reason, thinking about and playing with color is one of my favorite parts of the design process. Maybe it’s the high stakes that come with it. Use color well and it will add richness and emotional resonance to the experience. Use color the wrong way and it will make eyes bleed tears of ugly pain.
Not literally, of course, but it will look bad and the world will judge you accordingly.
Learning How to See Color
You might struggle using color in your work. I know I did too and still do at times. But once you understand some fundamental concepts and learn how to see color, using it will become something you look forward to. You might even come to enjoy it!
Color theory is a core design principle, regardless of form factor. UI design, web design, graphic design, illustration—all the same principles apply.
In this post, we’ll cover the basics of what color theory is and how to suck less at it. By the end of this intro you’ll have a strong grasp how color works and be more confident in your color choices. I’ll even toss in a few handy tricks along the way.
Now let’s get to work.
What is color, anyway?
In the simplest terms, color is a sensation. Like smell or taste. For the most part, everyone agrees about how something smells or tastes, but there is a nuance to it that might make it a slightly different experience for everyone. In the case of color, we are using our eyes (and brains) to process information which is what triggers that subjective, emotional response. That said, I do wonder what purple smells like.
To truly understand color we need to first understand its ingredients. Every color is made up of three fundamental properties: hue, saturation, and lightness. You might recognize these terms from your favorite design app or code, though sometimes you’ll see “brightness” or “value” instead of lightness.
These terms might sound intimidating, but they’re easier to understand than you might think. If I can make sense of them, then you’ll be just fine.
Hue
Hue is the point on which you sit on the color wheel. Often referred to as the literal name of the color that you are looking at e.g. green, gold, purple. It’s kind of like the clinical term for what we think of as “color.”
This is the RYB color wheel. It’s a wheel made of… colors. The wheel’s purpose is to illustrate the relationship between hues, which ties into color harmonies and something we’ll talk about another time. Anyway, no matter how intense or light a color is, its hue—the underlying base color—remains the same. Think of it as the main ingredient in a color’s recipe.
Saturation
The second key property of a color is saturation. Think of saturation as the amount of spiciness in a flavor. The more saturated a color is, the more intense it looks. And the less saturated a color is, the more dull it seems. Neon colors are very saturated. Softer, muted colors aren’t.
Take this blue hue, for example. The only property that changes among these swatches is the saturation amount. At a mid level saturation (#335EBB) it looks perfectly normal. Just your every day blue. Crank up that saturation level (#003BFF) and it intensifies, taking on a very internet 1.0 link vibe.
Conversely, if we pull back the saturation we lose that intensity and our hyperlink blue becomes a cool gray (#61646A). Neat, right? I think so too.
Note: I’m using oklch to calculate these colors which is a perceptual way of notating color. If you plug in these hex colors and look at their HSL values you may see other things change, but rest assured it is only the saturation that is changing!
Lightness
The last ingredient in the color recipe is lightness. Which is basically the perceived brightness of a color. Like I mentioned earlier, depending on the context and software, you might see it called “brightness” or “value”.
Here’s our blue hue again, but this time the saturation remains constant and only the lightness changes.
If you’re wondering what the difference between these three terms is, the answer is: it’s complicated. We’ll talk more about value later, but what’s important to understand is that lightness/brightness/value mean how light or dark a color appears.
Tint, Shade, and Tone
Speaking of light and dark, there are three additional terms to describe color: tint, shade, and tone. A tint adds white to a color making it brighter, whereas a shade adds black which—and you are never going to believe this—makes it darker. Tone mixes gray into a color which is basically the same as desaturating it. Here’s what our beloved blue swatch might look like when tinted, shaded, and toned.
Chroma
I lied. There’s one more color term you might see floating among color theory discussion and that is chroma. Think of chroma as the richness of a color, independent of its perceived brightness. If that sounds similar to saturation, let me highlight the difference.
If you increase the saturation of a color, its perceived brightness changes. It actually gets darker the more saturated it becomes. Brightness and saturation are connected in that way. Whereas if you increase the amount of chroma in a color, its perceived brightness remains constant.
The top row of swatches show an increase in saturation. The color gets more intense, but it also gets darker. The bottom shows an increase in chroma. The richness increases, but the brightness stays the same. Neat!
Note: Most design apps don’t have a slider for chroma because it’s not broadly supported by all screens. That said, if you’re working on the web, you can use oklch to define colors which does include a slot for chroma.
Trust your eyes, not the numbers
Color is a bit subjective and perceptual by nature. What software tells us may (or may not) be different than what we see. Just because the numbers in your HSL value say so, doesn’t mean it’s true to what you perceive.
Case in point: look at the three swatches below. Each color has the same saturation (100) and the same lightness (50) in its HSL. So they must be the same brightness, right? Clearly, they are not. Yellow is brighter than blue, and blue is brighter than red.
Without getting into the physics of it all, the sensitivity of our human eyes are tuned differently for different colors. Here’s that RYB color wheel from earlier. I’ve adjusted the colors so they all have a saturation of 100 and a lightness of 50. The right side is the same wheel, but in grayscale. Look at all the subtle changes among each hue. Aren’t our eyes and brains amazing?!
The rules of color engagement
Now that you understand the building blocks of color, you’ll start to see it differently. And when you’re in a color picker trying to find that perfect shade of chartreuse, you will know if it needs a boost in saturation or just some brightness tuning.
You might now be thinking, “but how do I use colors together?” Rather than delving deep into color harmony, I’ll opt to keep it simple and share an example.
If you’re struggling to focus and squinting in pain then I have succeeded. These colors are bad. Your poor eyeballs have no idea what to do with this image.
Have a look at this version:
Better, right? Go ahead and wipe the tears of relief from your cheeks. You’re seeing the same artwork, but with different color choices.
There are some principles at work here that we can learn from. And since I enjoy numbered lists, let’s go over the top three reasons why your color probably sucks.
Three reasons your colors might suck
It’s almost as if I planned it, but the three ways color goes wrong with this artwork line up exactly with the first three properties we covered earlier. What a coincidence!
Reason 1: Too many colors (Hue)
Think about that color wheel again. I know, it’s pretty, but unless you’re designing a path with a pot of gold at the end of it, you don’t need to use that many colors. There’s a reason why black-and-white photos are so universally admired.
Try sticking with two or three key colors at most. Any more than that and you’d better know what you’re doing because it can get real ugly, real fast. Neutrals like black, white, gray, and beige don’t count. If we’re playing music, try to keep the song in one key.
Reason 2: Too much saturation (Saturation)
Saturation is another case of a little goes a long way. Bright, saturated color will demand attention, but if too many of your colors are hyper-saturated, it kind of hurts to look at.
Resist the urge to crank the saturation on every color. If your color palette is a song you don’t want the volume of every instrument to be at eleven the whole time. You want it to feel dynamic. Some parts are quiet, some parts are loud (saturated). My advice?
Start with less saturation than you think, then adjust to taste.
What’s interesting about color is that it seems to change relative to what colors are around it. That yellow might look dull over white, but place it over a cool, dark gray and it will pop off the screen.
Reason 3: Too little contrast (Lightness)
The last and perhaps most important point: contrast. Not to get all philosophical on you, but life is all about contrast. You can’t appreciate happy moments without the sad ones and there is no light without dark.
Color is no exception to this phenomena. When using colors together, make sure they have enough contrast. What that really means is: make sure their lightness values aren’t too similar. Especially background and foreground elements.
Note: You can also add contrast through varying the amount of saturation among colors or by using warm and cool colors together.
How to check value contrast
Remember that note about trusting your eyes and not the numbers? Here’s how you can apply that suggestion. Look at the following example:
Yikes. It’s hard to know what to look at. Why is that? Let’s remove color from the equation and see what’s going on with our lightness.
In your design app of choice, place a black rectangle (#000000) over your artwork and set its blending mode to Saturation (or Color). This zaps the color out of the image and allows you to see the underlying value of the image. It’s a quick and easy way to check contrast.
Applying Color Theory
Now that we’re equipped with both color knowledge and a handy method of assessing contrast, let’s put our new skills to use. Here’s that artwork again:
I can see now that we’re probably using too many colors and they are way too saturated. A telltale sign of bad color is when they start to buzz next to each other and it’s hard to focus. Let’s have a look at the contrast using our newly acquired value trick.
Overall, it’s pretty flat. Areas like the hat and shoes have some contrast, but it’s clear that most of the colors here are too close in lightness and that’s probably why this is so hard on the eyes. We know what the problem areas are, so to get this thing looking better we need to:
- Simplify the color palette
- Pull back the saturation
- Add contrast
I see lots of greens and browns with pops of red, blue, and yellow. That many colors seems okay for this artwork, but let’s drop the yellow to help with contrast. Let’s also pull down the saturation for most of the colors, especially the greens, and adjust the lightness so there is better contrast between the foreground and background.
Here’s what the values look like now:
What a difference! The range of values is much more dynamic than before. The foreground is an array of medium to dark grays while the background remains light. Even in black and white, this version is leaps and bounds better than the original. Here’s the finished version:
More ways to not suck at color
If you enjoyed this post then you might enjoy my course, Color For Creatives. It’s a project-based video course that goes deep into color theory using practical examples that you can apply to your own design work.
One more thing: you can watch a video version of this post on The Futur Academy channel. I’ll put the video at the end of the post.
Color can be intimidating, but once you understand how to see it becomes a fun and powerful design tool for any project. Good luck on your color journey!