Color wheel with triadic color scheme

Understanding Color Theory for UI Designers

Ondřej Pešička
Ondřej Pešička · February 22, 2022 · 12 min read

Color theory is a set of guidelines for working with colors. It explains how humans perceive color, how colors mix, and the effects of specific color combinations. Understanding color theory is the first step in creating a good color palette. There is a lot to learn about color theory so let's jump in.

What is color?

Color as we see it is the result of light with different wavelengths going into our eyes. The light can either be reflected or emitted and our eyes interpret these wavelengths as colors. Because we are talking about digital interfaces, we will mainly be focusing on the light that is emitted. However, it is good to understand the difference.

Visible color spectrum with color categories and wavelengths
The visible color spectrum

Understanding color spaces

To produce colors on our display, we need to tell the computer what color we want. This is done by using color spaces, which organize and describe colors so they can be reproduced. For example, when you use a HEX code, you're referencing colors in the RGB color space.

Because of how current display technology works all color spaces are eventually converted into a variant of RGB so they can be displayed by the pixels (which are made up of red, green, and blue diodes). That doesn’t mean that RGB is the best color space for working with colors, as we will soon find out.

RGB pixels mix their channels to create different colors
RGB pixels mix their channels to create different colors

RGB color space

The RGB color space works by mixing Red, Green, and Blue colors to create 16,777,216 unique colors (assuming you are using a 24-bit display). Although RGB is great for computers, it is hard for humans to imagine what colors are being described. You have to guess what values to change to achieve the desired effect.

Atmos primary color (#573CFA) converted to RGB. Red = 87, Green = 60, and Blue = 250
Atmos primary color (#573CFA) converted to RGB

HSL color space

HSL stands for Hue, Saturation, and Luminosity, which allows designers to create colors that are easy to work with. While HSL is well supported in design tools and code it has a similar flaw to RGB in that it describes colors for computers, not human vision. The way HSL calculates lightness doesn’t take into account how different hues are perceived by human eyes.

Atmos primary color (#573CFA) converted to HSL. Hue = 249, Saturation = 95%, and Lightness = 61%
Atmos primary color (#573CFA) converted to HSL

CIELAB, LAB, CIELCh, LCH color spaces

Now that's a mouthful. The various color spaces mentioned are all variations of CIELAB color space, which is designed to model human perception of color. In other words, the color spaces are perceptually uniform.

Perceptual uniformity means that if you make a list of hues with the same lightness and saturation and put them next to each other, the colors will start to blend. Each color will have the same perceived lightness and saturation.

Comparison of HSL and CIELAB color spaces
Comparison of HSL and CIELAB color spaces

This makes the color spaces great for creating systems that are accessible, consistent, and predictable - meaning that you can easily swap one color for another without any major changes to contrast or visual weight.

Create your palette for free

Apply your new knowledge and create something great with Atmos

Get started

Color wheel

A color wheel (or color circle) is a handy tool that can help you choose the right colors for your project. It shows the relationship between colors in a logically arranged sequence of hues, which can be helpful when you're trying to create a cohesive color scheme. The wheel is made up of 3 groups of colors:

Primary, secondary and teriarty color groups of the color wheel

The color wheel described in traditional color theory is usually imagined as having clearly defined boundaries, but it is a gradient (or spectrum) of colors that blend into each other. That is to say, there is no clear boundary where blue color starts and stops - blue is a category with a wide range of variations.

The traditional color wheel described in color theory compared to a realistic color wheel (spectrum)
The traditional color wheel described in color theory on the left compared to a realistic color wheel (spectrum)

Color temperature

Temperature refers to the warmth or coolness of a color (hue). Color temperature helps us to convey moods, and create emotions in our users. But it's important to consider the cultural context as not everyone has the same emotional response to color.

Color theory divides the color wheel into two parts: Warm colors and cool colors:

Cool and warm colors on the color wheel

Color schemes

Color theory describes multiple predefined arrangements of colors around the color wheel. Designing with these color schemes helps to achieve harmony.

7 color schemes vizualized on the color wheel

Pro tip: These schemes are how Atmos’ color generator creates harmonious color combinations with one click.

Color meaning

From the time we evolved, humans have associated colors with different emotions. For example, we are naturally drawn to red fruits because that color indicates ripeness. When looking for colors, it's important to be aware of these meanings, but remember that they can vary across different cultures.

Main color families and their meanings
Main color families and their meanings

Pro tip: Use Atmos's color generator to find colors that match your desired meaning.

Color context

Our perception of colors can change when colors are surrounded by different colors. Colors can look lighter or darker, and more or less saturated, depending on the colors around them.

Four differently colored circles with red dots inside them. Showing how the red color changes when surrounded by different colors.
Even though the dots in the middle have the same they appear differently.

When light colors are surrounded by dark colors they appear lighter. Similarly, dark colors surrounded by light colors appear darker.

Two circles with different lightness with a blue dot inside them. Showing how the percieved lightness of the dot changes.
Notice how the dots in the middle appear to have slightly different lightness. However, the dots have exactly the same color.

If you have a moderately saturated color and you put it on a background that is highly saturated, the color will look less saturated. But if you put the color on an unsaturated background, it will look more saturated.

Two circles with differently saturated blue with a blue dot inside them. Showing how the percieved saturation of the dot changes.
Notice how the dots in the middle appear to have different saturation. But the dots have exactly that same color.

These effects are most noticeable when the colors have similar hues or when they are complementary colors. Other colors are generally barely affected.

How are colors defined?

When you work with colors, you'll often hear terms like hue, saturation, and tint. Although you can get by without knowing what these terms mean, it's good to learn about them so you understand how colors work.

Hue

Hue is the foundation of color. When you talk about colors you are unusually talking about hues. For example “red”, “green”, and “blue” are hues of color.

Hue values vizualized

Chroma

Chroma describes the intensity or purity of a color. Colors with low chroma appear washed out (think of pastel colors), on the other hand, colors with high chroma are intense (with no black, white, or gray added) and visually strong.

In other words, chroma is a quantitative measure of how pure a color is when compared to a white with the same lightness.

Chroma values vizualized

Saturation

Saturation, similarly to chroma refers to the relative purity of color in its environment. By adding black, white, or grey to a color we can lower its saturation.

That is to say, saturation is a qualitative measure of the purity of color based on how it appears in its environment and the light.

Saturation values vizualized

Lightness

Sometimes called value describes how light or dark a color is. In many color spaces, the lightness value is relative to how computers see it, but some (like CIELAB color space) describe colors’ lightness by how human eyes perceive it. This helps with creating a consistent color palette.

Lightness values vizualized

Tone

To tone a color you add grey to it. Tone is similar to saturation and chroma and most people use only one of the names when talking about colors.

Toning process vizualized

Shade

Shades are colors you create by adding black to any pure hue. You can create multiple hues just by changing the amount of black you add.

Most people say shades when talking about lighter or darker variants of a hue. However, each method has a different name.

Shading process vizualized

Tint

Tints are the exact opposite of shades. In other words, they are created by adding white to any pure hue. You can create multiple tints by changing the amount of white you add.

Tinting process vizualized

Take away about Color theory (TLDR)

Color is an important part of any design. Using color theory makes it easier for designers to choose the right colors.

There are many color spaces each with its advantages and disadvantages. Our recommendation is using the perceptually uniform color space CIELAB.

The color wheel is a useful tool for finding harmonious color combinations. To find colors we can utilize different color schemes, such as:

Color temperature and color’s cultural meaning can help us with choosing colors that will evoke the right emotions, but it is important to consider cultural differences.


If you've enjoyed this article, I'm sure you will find Atmos helpful. Whether you are just starting with a new color palette, or your current palette could use some tweaking, then you should give Atmos a shot! Hey, it's free 🚀

Creating your UI color palette has never been easier.

Get started for free