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.

Whether with a paintbrush, stylus, trackpad, or mouse, knowing how to use color elements will empower you to create more depth and dimension in your creative work.

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 definition of color terminology
Color Wheel with Hues, Tints, Tones, and Shades. Image source: Beach Painting

Jumpstart your ideas with Linearity Curve

Take your designs to the next level.

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.
Use it in a sentence: "Let's use our three brand colors in this design; lime green, pale gray, and sunburst orange."

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, green, 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.

Use it in a sentence: "This winter color scheme uses a purple hue as its base color."
For a deeper understanding of different color theories, check out our list of color theory books for self-study.

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.

Pure hues have the highest chromatic intensity because they only contain color pigments (no neutral colors).

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.

Colored triangles on a white background
Illustration of increasing colorfulness with an increasing level of illumination. Image source: Hue Value Chroma
Use it in a sentence: "Try increasing the color saturation to create a more intense red in your design."
Did you know? Chroma keying or green screening is used in film-making to add special effects in post-production because high-intensity green or blue is most different from human skin. Digital cameras are also more sensitive to green, capturing it in higher detail.

Ready to create brand assets that pack a punch?

Visit our Academy for free marketing design courses.

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.

Use it in a sentence: "This picture is quite dark. I can hardly see the people in the foreground. Let's increase the value to brighten it up."

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.

Tints don't contain any gray. In classic oil painting or digital art, tinted colors are used to create highlights that simulate light particles hitting the surface of an object.

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.

Use it in a sentence: "You can create a soothing color combination by adding tints of your base color to the color palette."
Blue tints color palette
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.

This process dilutes the intensity of the hue, providing a more subdued and desaturated color.

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.

Use it in a sentence: "You can create a serious, corporate color palette by combining a navy color tone with burgundy and gray."
Blue tones color palette
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.

Using shades in your artwork and designs will help you create sharp contrast without losing color intensity. Combined with pure hues and tints, your images will be dynamic and striking to look at.

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

Use it in a sentence: "Try adding a dark shade of green underneath the trees in your image to create the illusion of dappled shade."
Blue shades color 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
In technical terms, color temperature is measured in Kelvin (K). In photography and lighting, higher color temperatures (over 5000K) are cool (blue or green) colors, while lower color temperatures (under 3000K) refer to warm (red and yellow) colors.

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.

Use it in a sentence: "I prefer rooms with ambient, warm lighting. Cool colors make me feel like I'm in a refrigerator."

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.

To find the undertone of a color, you can view it in different lighting conditions and place it against a pure white or gray to compare. You can also use digital tools such as Linearity Curve's (formerly Vectornator) Color Picker tool to pick a color on an image and analyze its color values.

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.

Use it in a sentence: "This blue paint appears purely blue in the mornings, but in the afternoon light, I can see a slight green 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.

A blue with a slight green overtone is still predominantly blue but carries a hint of green immediately visible to the naked eye. Orange-red could be paired with this as a complementary color or with green to create an analogous color scheme.

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.

Use it in a sentence: "To create a calm atmosphere, you can choose from a color guide of mixed colors with green overtones."

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.

The color cast affects the trueness of the hues in your images. But it can be corrected using the appropriate white balance settings on your camera or by editing the image's color values afterward.

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.

Use it in a sentence: "If you shoot under artificial lighting you may get a warm yellow color cast in your photos."

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.

Pro tip: Remember that tints and tones both include white (these words all have the letter 't' in them). Shades only include black (no letter 't').

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.

Ready to create brand assets that pack a punch?

Visit our Academy to learn how to use color palettes.

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.

Using the correct color terminology will also help you with team collaboration, ensuring everyone's on the same page with projects.

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.

Jumpstart
your ideas with
Linearity Curve

Take your designs to the next level.

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

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