The Ultimate Color Glossary For UI Designers

CareerFoundry Marketing Content Editor Jaye Hannah

When it comes to designing a compelling user interface, color is widely considered to be a designer’s most powerful tool. But there’s so much more to a website’s color palette than randomly choosing shades that jump out at you. Diving into the details of color theory will reveal that there are a lot of particularities to comprehend. That’s where we come in!

To help you along your way, we’ve created a handy glossary of the essential terms that will help you get a deeper understanding of how color works as you navigate your first user interface.

Let’s dive right in!

1. Color Theory

Primarily based on Isaac Newton’s color wheel, color theory is a practical framework employed by UI designers when choosing a color palette for their interfaces, mixing colors, and striving towards color harmony.

2. Primary Colors

The primary colors are red, blue, and yellow. These are colors you can’t create by combining two or more other colors.

Three color wheels showing primary colors, secondary colors, and tertiary colors

3. Secondary Colors

The secondary colors are orange, purple, and green—in other words, colors that are created as a result of combining any two of the three primary colors.

4. Tertiary Colors

The tertiary colors are magenta, vermillion, violet, teal, amber, and chartreuse. Tertiary colors are created by mixing a primary color with a secondary color.

5. Hue

Hue refers to the pure pigment of a color, without tint or shade. For this reason, any one of the six primary and secondary colors can be considered a hue.

A color swatch showing hue, shade, tint and tone

6. Shade

Shade refers to how much black is added into the hue, or the darkening of a color.

8. Tint

The opposite of shade, tint refers to how much white is added to a color. In other words, the lightening of a color.

9. Tone

Tone is the result of a color that has had both white and black added to it. In other words, tone refers to any hue that has been modified with the addition of grey—as long as the grey is purely neutral (only containing white and black).

10. Color temperature

Warm colors contain shades of yellow and red; cool colors have a blue, green, or purple tint; and neutral colors include brown, gray, black, and white.

A color wheel showing the divide between warm colors and cool colors

11. Color harmony

Color harmony is the result of combining colors that promote aesthetic harmony, and are visually pleasing for the human eye. Color harmony is what most designers strive to achieve when creating their interfaces.

Want to understand color harmony better? This blog post by zevendesign details how the various color harmonies can be used in design.

12. Color models

Color has two different natures: the tangible colors which can be seen on the surface of objects, and colors that are produced by light. These are known as the additive and subtractive color models. RGB stands for red, green, and blue, and is based on the additive color model of light waves that dictates that the more color you add, the closer the color gets to white. On the other hand, CMYK is known as the subtractive color model, which obtains colors by the subtraction of light. CMYK stands for cyan, magenta, yellow, and black.

The RGB and CMYK color models

13. Color palette

A color palette is a combination of colors used by UI designers when designing an interface. There are six color palettes commonly used by designers; monochromatic, analogous, complementary, split-complementary, triadic, and tetradic.

14. Monochromatic

A popular choice with designers, monochromatic color palettes are formed using various tones and shades of one single color.

A monochromatic color palette

15. Analogous

An analogous color palette is formed of three colors that are located next to each other on the color wheel. Analogous color palettes are commonly used when no contrast is needed—for example, on the background of web pages or banners.

An analogous color palette

16. Complementary

Complementary color palettes are comprised of colors that are placed in front of each other on the color wheel. While the name may suggest otherwise, complementary color palettes are actually the opposite of analogous and monochromatic color palettes, as they aim to produce contrast. For example, a red button on a blue background will stand out on any interface.

A color wheel showing complementary colors

17. Split-complementary

The split-complementary color palette differs from the complementary color palette only in that it employs a higher number of colors. For example, if you choose the color blue, you’ll then need to take the two colors that are adjacent to its opposite color, which in this case would be yellow and red.

A color wheel demonstrating split-complementary colors

18. Triadic

The triadic color scheme is based on three separate colors that are equidistant on the color wheel. Most designers employ the triadic color scheme by choosing one dominant color and using the other two colors as accents.

The triadic color scheme

19. Tetradic

Commonly used by more experienced designers, the tetradic color scheme employs two sets of complementary pairs—four colors from the color wheel in total that should form a rectangle when connected. While it’s a little harder to balance, it makes for a visually stunning end effect!

The tetradic color scheme

20. Color psychology

Color psychology is the study of how colors can influence human mood and behavior. According to color psychology, the human mind subconsciously reacts and interprets colors in a way that influences our actions. For example, yellow evokes positivity, youth, joy, and playfulness.

So there we have it, the twenty essential terms you need to know as you begin your journey to mastering the science of color! To learn more about color and color theory, check out this recording of an event we hosted, explaining how to choose color for your UI design. For further reading, take a look at these articles:

What You Should Do Now

  1. Get a hands-on introduction to UI design and design your very first app screen with a free, self-paced UI design short course.

  2. Take part in one of our FREE live online UI design events with industry experts, and read about UI graduate Florian’s career change to product design.

  3. Become a qualified UI designer in just 4-9 months—complete with a job guarantee.

  4. This month, we’re offering a partial scholarship worth up to $1,365 off on all of our career-change programs to the first 100 students who apply 🎉 Book your application call and secure your spot now!

What is CareerFoundry?

CareerFoundry is an online school for people looking to switch to a rewarding career in tech. Select a program, get paired with an expert mentor and tutor, and become a job-ready designer, developer, or analyst from scratch, or your money back.

Learn more about our programs