Color tone terminology handbook: tint, tone, shade, and more

Are you often mixing up your basic color theory terminology? This handy guide will help you define the difference between tint, tone, shade, and more.

Color terms are often used interchangeably when discussing color in art and design. To add to the confusion, the terms are used differently in specific creative disciplines.

As an artist or designer, being able to differentiate and describe color theory aspects is one of the essential design skills you need.

Learn the foundational color tone terminology and keep this handbook handy for future reference.

Color Wheel with Hues, Tints, Tones, and Shades. Image source: Beach Painting

Color

First things first, let's define 'color.' Fundamentally, color is seen when light is reflected off a surface. Color has three components: hue, value, and saturation.

• Hue: the specific wavelength range or color family. It's the purest form or the natural pigment of color, such as the primary colors blue, red, and yellow.
• Chroma (also known as saturation): a color's level of vibrance or dullness determined by the amount of gray added. A color with high saturation is a pure hue, while a color with low saturation has a tone of gray.
• Value (or brightness): the level of color lightness or darkness determined by the addition of white (which makes a tint) or black (which makes a shade). A bright color may appear faded, while a darker color may resemble black.

Let's look at hue, chroma, and value in more detail.

Hue (pure color)

The hue is the pure range of colors and their pigment on the color wheel. The color wheel consists of primary, secondary, and tertiary colors. This includes:

• The three primary colors: red, yellow, and blue
• The three secondary colors: orange, green, and purple
• The six tertiary colors: yellow-orange, red-orange, red-violet, blue-violet, blue-green, and yellow-green.

Black, white, and gray aren't considered hues and don't form part of the color wheel. They're defined as 'neutral colors.' A hue contains no added black, white, or gray.

Chroma (color saturation)

The color term 'chroma' is used to indicate a color's saturation or perceived strength level, called the chromatic intensity. The higher the saturation, the higher the intensity or purity of the color.

Chroma displays increasing colorfulness as the level of saturation increases. A high color saturation creates bold and striking artwork. A low color saturation produces a gray tone.

Illustration of increasing colorfulness with an increasing level of illumination. Image source: Hue Value Chroma

Value (color brightness)

In color theory, value refers to a color's relative lightness or darkness. It indicates the amount of light a color reflects or absorbs, thereby contributing to the perception of the color's intensity and contrast within a composition.

A brightened color may appear washed out, while a darkened one may appear closer to black. These degrees of color lightness or darkness are determined by the amount of white (tint) or black (shade) added to it.

Value is fundamental in creating depth and perspective within a composition. By skillfully manipulating value, artists and designers can emulate three-dimensionality, form, and light, contributing to the realism and visual appeal of the artwork or design.

Tint

The term 'tint' signifies the lightness of a color. A tint is a pure hue mixed with white. Pastel colors are tints. Tinted color schemes are generally perceived as soft, light-hearted, and soothing.

Lightening hues with white can significantly influence the mood and atmosphere of a graphic design or artwork. Adding complex tints affects spatial perception and visual contrast in images. You can use tints to create the illusion of wide open spaces or to bring shapes to the foreground.

Tint variations of royal blue. Color on the left: #0535F7. Image source: Trembeling Art

Tone

A pure gray consists of a combination of black and white. In color terminology, tones are made by adding gray to a hue. Mixing a hue with gray will tone down (pun intended) the chromatic intensity of the original color hue.

A paler gray with more white will result in a lighter tone, and a darker gray with more black will produce a darker tone. In art and design, toned colors are generally perceived as subtle and sophisticated. If the amount of added gray is excessive, the color will appear dull and lifeless.

Tones work well for creating soft shadows and low-contrast images and designs.

Tone variations of royal blue. Color on the left: #0535F7. Image source: Trembeling Art

Shade

Adding any amount of black to a pure hue produces a shade of that color. Shades contain no gray, meaning the color can still be intense but darker.

You can use a dark shade of your brand color instead of pure black to create a richer color mixture in your palette.

Shade variations of royal blue. Color on the left: #0535F7. Image source: Trembeling Art

Color temperature

When creatives speak about color temperature, it refers to the perceived warmth or coolness of colors. It's often categorized into two groups:

• Warm colors (reds, oranges, yellows) that evoke feelings of warmth, energy, and positivity
• Cool colors (blues, greens, purples) that often elicit feelings of calmness, relaxation, and serenity

This scientific measure influences photography, film, and the world of design. Using color temperature correctly in design can bring out emotional responses in the viewer, making it an essential element for every creative project.

Get this template

Get this template

Undertone

An undertone is the subtle color that lies beneath the main color or the overtone. It's not always immediately visible, especially in neutral tones. But it significantly influences how the color interacts with other colors and how it appears in different lighting conditions.

For example, you may place two light grays next to each other and find that one gray has a warmer orange undertone while the other has a cooler blue undertone.

Overtone

Overtones define the dominant visual impact of a color. An overtone is the immediate color identification that distinguishes the main color category, such as red, blue, green, etc. It's the color that we refer to in everyday language.

This influences immediate color pairing decisions, as overtones determine the visible color harmony and contrast. Recognizing and understanding overtones helps create aesthetically pleasing color combinations, ensuring visual harmony and appeal in various creative applications.

Color cast (or color bias)

Most commonly used in photography and video production, color cast describes the lighting conditions that alter the coloring to the overall image.

The presence of a color cast can significantly impact the overall perception of colors in an image or a design. It can make the colors appear unnatural and unbalanced, affecting the visual appeal and the effectiveness of the image.

For example, a photo taken under warm-colored tungsten light may appear to have a yellow or brown color all over. Similarly, photographing under fluorescent light will give all the colors in your photo a blue undertone.

Different color formats also affect the color cast of digital images. Images in the RGB space look bright and intense on screens but often print with a slight green color cast.

On the other hand, changing RGB images into the CMYK color space for printing sometimes adds a bluer color cast, which makes the overall image appear darker.

Terminology misunderstandings: common confusions and their explanations

In the vibrant design and art world, the various elements of color terminology can get muddled up. Let's look at a few common terminology blunders and the explanations that will put them to rest once and for all.

Hue vs color: which one to use?

Misunderstanding: Many use the terms ‘hue’ and ‘color’ interchangeably to mean 'red,' 'purple,' etc.

Explanation: Hue refers to the dominant color family (red, blue, green, etc.), and color is the general term that encompasses hue, chroma, and value. Hues are the pure forms of primary, secondary, and tertiary colors. But you can use the term 'color' to refer to all of these plus neutral pigments, color tints, gray tones, shade mixtures, and everything in between.

Mixing up tint, tone, and shade

Misunderstanding: Tint, tone, and shade are often wrongly used interchangeably.

Explanation:

• Tint: A hue mixed with white. This creates a bright color value.
• Tone: A hue mixed with gray. Tones are desaturated colors with a low chromatic intensity.
• Shade: A hue mixed with black. This creates a darker color value.

Confusion between warm and cool colors

Misunderstanding: The categorization of certain colors, like green and purple, as either warm or cool can cause confusion.

Explanation: Green with more yellow could be considered warmer, while green with more blue appears cooler. A purple mixed with more blue is cool, while purple with more red is warm.

Are overtones and undertones only tones?

Misunderstanding: Overtones and undertones are often overlooked or confused with each other or 'tones' in general.

Explanation: Overtones define the parent colors, while undertones are the subtle colors that remain beneath the surface color and are more difficult to distinguish. The overtones are usually functional colors that form the base of a color scheme, while the undertones could be used as accent colors along with other additional colors.

What you've learned

We've explored the basics of color and a few complex color concepts. You can now confidently discuss color in design and art, knowing that you're communicating the correct color structures.

This knowledge is beneficial while creating your color palette or painting at home. Now you know that when you add white paint to a hue, it's a tint, and when you add black paint, it's a shade.

Understanding the various components of color perception will also help you choose compatible colors for a complementary color scheme. You know that red complements green, but if a red has an orange undertone you can pair it with a blue-green for a more harmonious look.

To make it easier for you to find the hue, brightness, saturation levels, and undertones of colors in your images, you can use design software like Linearity Curve. Our platform provides helpful color management tools such as the Color Picker and Color Palette.

Want to learn more? Watch the below video on color theory and how to use colors effectively in your designs.