Nice to meet you, color! Color terminology explained. [updated]

Nice to meet you, color! Color terminology explained.

This week we build on our previous article “Hello, Color!” to cover common color terminology. Knowing basic color terms will help you have conversations with team members and designers, to create the look and feel of your app. Here we go with “color terminology explained”!

Color terminology explained

1. Color terminology basics

The color wheel (below) is used in classical color theory based on painting and the color spectrum of the rainbow. It’s depicted in a circular shape which easily displays all twelve colors in the visible color spectrum. The color wheel is very helpful for understanding the relationships between colors and when seeking harmonious color combinations. 

Jack Richeson's Color Wheel

Hue is the name of a pure color. It’s a starting place when creating shades, tints, and tones. When you name a color on the color wheel, like blue-violet, or green, you’re naming a hue. 

Foundational colors may be thought of as background colors. They include pure neutrals, black and white. They also include subtle tints and shades of pure neutrals, or other main colors in your palette. 

Tints are lighter versions of any color that are created by adding white. Pink and mint are examples of tints.

Shades are darker versions of any color that are created by adding black. Maroon and forest are examples of shades.

Tones are created with a slightly more complex process compared to a tint or shade. Creating a tone involves adding both black and white (ie. grey) to a hue to “tone it down” and make it appear duller, or more neutral, than the original hue. “Dusty” hues are tones.

Saturation of a color indicates how pale or how bold it is, in relation to how it appears in both bright and weak light. Changing the saturation of a hue does not involve mixing it with other colors, but it does involve changing the intensity of the color. Turning up the saturation is like shining a bright light on your color.

2. Color 1-2-3

The Primary colors are the three basic colors that every other color is created from. In a classic color wheel, and when using paint or similar medium, the primary colors are red, blue, and yellow. However, in an additive system, like RGB, the primary colors are red, green, and blue. Whereas in a subtractive system, like CMYK, the primary colors are cyan, magenta, and yellow. In all of these systems, you cannot create the primary colors out of any other color, you must start with them.

pantone color cards arranged like a color wheel

Secondary colors on the color wheel are orange, green, and violet. They’re created by mixing equal amounts of the two primary colors on either side of them: red and yellow make orange; yellow and blue make green; blue and red make violet. In RGB and CMYK systems, your secondary combinations are slightly different.

Tertiary colors are created by combining the two colors next to each other For example, referencing our trusty color wheel, combining 50% yellow and 50% green makes a color called yellow-green (or green-yellow, which is exactly the same). The whole list of tertiary colors is at the bottom of the color wheel graphic above. 

3. Common color palettes

Check out examples of these color combinations in last week’s article.

classic color palettes infographic showing analogous, complementary, monochromatic and triadic combinations
Infographic by Addie Kugler-Lunt


Analogous colors are next to each other on the color wheel. Yellow, yellow-green, and green are analogous colors.

Complementary colors are opposite each other on the color wheel. Red and green; Blue and Orange; Yellow and Violet are all complementary color pairs.

Grayscale is a color scheme which is composed entirely of shades of gray, the darkest tone being black.

Monochromatic palettes use tints and shades of one color to make a harmonious scheme.

Triadic this color scheme integrates three colors. On the color wheel, there is even space between the three colors. Look at the wheel at the top of this article. The most recognized triadic color combination has the three primary colors: red, blue, yellow. The three secondary colors follow closely behind: orange, green, violet.

4. Color codes

CMYK is a color model used for color printing applications. This code includes the colors cyan, magenta, yellow, and key (black). Each color represents one screen used in the printing process.

Hexadecimal code/Hex codes are the number-and-letter-combination codes that correspond to a unique definition for every color available on a RGB display (computer and digital screens, including mobile phones).

RGB is an additive color model. In this method, you create colors by adding various ratios of red, green, and blue. All digital content displayed on computers and smartphones use RGB.

5. UI uses of color

hand grasping a tiny pantone color card in one hand and a phone in the otherDenotative colors are purpose-oriented. These colors help you move around an application or program. Denotative buttons tell you to “submit” your information and to navigate to the “next” screen. 

Interactive colors are assigned to interactive elements. Hover-over buttons, clickable links, and buttons are interactive. The colors for these elements need to stand out from the background, so users can find them easily.

With these color terms in your pocket, you can feel comfortable communicating with your team about your app development project. Now you can identify the issues and discuss palettes. You’re ready to talk color!

Still got questions? Here are more articles and resources for learning about color theory and how to apply it to your projects.

Visual hierarchy in content design

Elements of visual storytelling

Color wheel (physical product)

Color Glossary for Designers

A 7 Step Guide to Understanding Color Theory

7 Steps to Organize Colors for UI Design

Editor’s note:  Kerry Abukhalaf and Addie Kugler-Lunt collaborated on this article. Addie Kugler-Lunt expanded and updated this article in July 2022.

LimeTech is a creative tech company with a focus on app development. We help brands grow their impact by building digital products that please customers and solve business challenges. Our work includes strategy, design, content, and tech planning. Check out our portfolio or reach out to start a conversation about your project.

app design    branding    color theory    content    design    UI design    visual design    

YaMabrook launch announcement

YaMabrook launch announcement

Today we announce the official launch of the YaMabrook mobile app, and share some of the work we did in the early stages of the product development process.

Read more
Everything is agile [updated]

Everything is agile [updated]

Back in the 90s, software development was a laborious, time-consuming process, and products could easily take three or more years to build. This time-lag meant that the entire landscape could shift before a product reached the market. 

Read more
Hello, color! How to choose colors for your app. [updated]

Hello, color! How to choose colors for your app. [updated]

So, you’re building an app and starting to think about your product’s look and feel. You need to create a style and set a mood, and for this, color is your most powerful tool. Say, “Hello, color!” Here’s how to choose the right colors for your app...

Read more

Contact us

Type of project
*Don’t worry – we won’t share your email.(Required)
*Don’t worry – we won’t share your email.

This field is for validation purposes and should be left unchanged.