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.
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.
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.
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.
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.
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.
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 in minutes
Whether you're new to color palettes, or a pro looking for advanced tools, create your best palette in minutes.
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:
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.
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:
Color theory describes multiple predefined arrangements of colors around the color wheel. Designing with these color schemes helps to achieve harmony.
Pro tip: These schemes are how Atmos’ color generator creates harmonious color combinations with one click.
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.
Pro tip: Use Atmos's color generator to find colors that match your desired meaning.
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.
When light colors are surrounded by dark colors they appear lighter. Similarly, dark colors surrounded by light colors appear darker.
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.
These effects are most noticeable when the colors have similar hues or when they are complementary colors. Other colors are generally barely affected.
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 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.
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.
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.
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.
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.
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.
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.
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 🚀