May the fourth be with you - 40% off
Offer expires in
00
:
00
:
00
:
00
Hiring design talent? Check out Uxcel for Business

Color theory 101

Color theory 101

Color is arguably the most important visual element in UX design. Color has the power to influence our emotions and even our purchasing behaviors. The right color palette on a website can increase conversions and overall user satisfaction. The wrong color palette does just the opposite. 

Understanding the color theory concepts like the color wheel, various color spaces, and how different kinds of colors evoke particular emotions is an important basis for implementing colors in your UX designs. Color theory is both science and art, though. There’s an intuitive element to creating exceptional color palettes. 

How the Color Wheel Works

You might be familiar with the color wheel from art classes. It’s a circular representation of color hues, showing the relationships between primary, secondary, and tertiary colors. It’s a valuable resource when creating color schemes and palettes.

Primary colors are colors that can’t be created by combining any other colors. In the subtractive color model (which is used in physical forms like pigments), they are red, blue, and yellow. In the additive color model (which is the color model created by different colors of light), they are red, green, and blue.

Combining any two primary colors gives us secondary colors. In the subtractive color model, secondary colors are green, orange, and purple. In the additive model, they are cyan, magenta, and yellow. 

When you combine a primary color and one of its neighboring secondary colors, you get tertiary colors. Mixing them further creates more complex colors, called quaternary colors. 

Color Temperatures

One way to understand the color wheel is by exploring warm and cool colors, as well as neutrals (which primarily exist outside of the color wheel structure). 

Warm colors are associated with love, fire, passion, and strong emotions. These are the colors you’d find in a beautiful sunset: an array of red, orange, yellow, and all of their variations. 

Warm colors can be intense, especially when they’re used in their pure form. Used as accent colors they can add life and excitement to a design. When used in large swaths, they can be overpowering if not tempered in other ways. In either case, they have a powerful impact on any design.

Cool colors are popular choices for branding. Blue, the only primary cool color, is the most popular favorite color worldwide. Other cool colors include green and purple, along with all of their variations. 

Cool colors are commonly seen in nature—in water, the sky, and plants. These colors evoke feelings of calmness and relaxation, as well as loyalty and trust (another reason they’re so popular in branding). Blue is also widely associated with text links in UX design.

It’s tough to create an aesthetically pleasing design using only warm and cool colors. That’s where neutral colors come in. Neutral colors are the most subtle of the bunch and include black, white, gray, and various shades of brown (which is technically a muted form of orange—one reason it’s considered the warmest of the neutral hues). 

Neutral colors are popularly used for typography (dark gray and black are the most popular colors for body text) and backgrounds. They can be overpowered if not used properly, but can also be used to make accent colors stand out in your design. Neutral colors can add an air of sophistication to your UX designs.

Combining colors from one or more of these groups creates a color palette. In the digital world, a color palette is a combination of colors that pair well and create a desired mood or feeling—warm colors create dynamic feelings; cool colors create calming feelings; neutrals can be used to enhance or soften either of those or to create sophisticated feelings. 

Using a consistent color palette gives your users a feel for your product or brand’s personality. It can help unify different products or offerings across a brand by giving users a familiar touchpoint. Consistent color palettes are the visual building blocks for your product.

Start improving your skills

Learn the UI/UX skills you need to succeed — regardless of your level.

Color Space

Think of color space as a geopolitical map, with each color having a specific coordinate on the map. These coordinates are how designers navigate to a specific color. Color space maps aren’t two-dimensional, though. They have coordinates in at least three (such as RGB) and sometimes four dimensions (like CMYK). 

RGB (which stands for Red, Green, Blue) color space is what UX designers are most commonly working with, as its the color space used by electronic displays. It combines red, green, and blue lights to create a total of more than 16 million colors (16,777,216 to be exact!). 

CMYK (Cyan, Magenta, Yellow, and Key—whatever color creates black on the paper color being used) is traditionally used in offset printing presses and by the color printers you might have in your office. 

When creating a printed design on a digital display, the CMYK color space is mimicked by the RGB colors available, which is why sometimes the printed version doesn’t quite match what you see on the screen (this is particularly true with bright versions of blue, red, and green).

A variation on the RGB color space is RGBA, where the “A” represents the opacity (it stands for “alpha”). In RGBA, a 0 value is a fully transparent color, while a 1 value is fully opaque. In practical terms, this means the lower the value, the lighter the color will appear (or the more any background color or image will show through). 

Hex triplets are one way to represent RGB colors and are commonly used to specify colors in CSS. Hex colors are prefixed with a “#” and typically include six hexadecimal digits (numbers 0–9 and letters A–F). The first two digits are for the red value, the second two are for green, and the last two are for blue. In some cases, they may include a fourth pair of digits, which represent the color’s opacity or alpha. Rarely, you may see 3-digit hex colors, with only one digit representing each RGB value.

The HSB color model is made up of hue, saturation, and brightness. Hue defines the color, saturation adjusts the amount of gray added to the color, and brightness is used to adjust how dark the color is. 

The hue is indicated by degrees on a circle representing each color. Saturation is listed as a percentage (with 0% being the gray version of the color). Brightness is also listed as a percentage (with 0% being black, and 100% creating a very bright version of the color—or white if the saturation is 0%). 

Similar to HSB, the HSL color model uses degrees on a circle to represent each color, saturation for how intense the color is, and lightness to indicate how much white is added to the color. 

HSL is often preferred by designers because of how intuitive it is to use. Like HSB, once you’ve learned what degrees the primary colors are located at, you can estimate where other colors on the circle will fall.

In the digital world, additive color models are the most commonly used because they’re what electronic displays use. As mentioned previously, the primary colors in an additive color model are red, green, and blue. If you’re wondering where the term “additive” comes from, it’s because when you add colors to the mix, the result always gets lighter, all the way to white when all colors are combined.

By contrast, subtractive color models remove colors to reach white (a complete lack of color). As more color is added, the result gets darker (since the mix reflects less light). Subtractive color models are used in printed matter, as they’re created by combining pigments, inks, paints, or dyes. 

Conclusion

Color theory is vital knowledge for any UX designer to master. With expert use of color, designers can influence the way people interact with their products, and even create higher conversion rates. 

Understanding the technical aspects of color theory, as discussed here, creates a solid foundation for the intuitive experimentation that sets great color palettes apart from good ones.

FacebookLinkedinTwitter

Start improving your design skills now