CSS Hue, Tint, Tone & Shade

Hue, tint, tone, and shade are color concepts that describe a base color and variations created by mixing it with white, gray, or black.

Understanding these concepts can make it easier to create coordinated color palettes for backgrounds, borders, buttons, text, and other webpage elements. CSS does not provide separate tint(), tone(), or shade() functions, but these color variations can be created using CSS color values.

Hue

A hue is the basic color before white, gray, or black is mixed with it. Colors such as red, green, blue, orange, and violet are examples of different hues.

In CSS color functions such as hsl() and hwb(), hue is represented by an angle around a color wheel.

color: hsl(0 100% 50%);     /* Red */
color: hsl(120 100% 50%);   /* Green */
color: hsl(240 100% 50%);   /* Blue */

Changing the hue changes the basic color itself rather than simply making the existing color lighter, darker, or less intense.

Tint

A tint is created by mixing a color with white. As more white is added, the resulting color becomes lighter while remaining related to the original hue.

For example, CSS can create progressively lighter versions of a blue hue by increasing the HSL lightness value.

background-color: hsl(200 100% 40%);
background-color: hsl(200 100% 60%);
background-color: hsl(200 100% 80%);

These HSL values provide a convenient way to create lighter variations, although changing HSL lightness is not mathematically identical to mixing a color with white in every color model.

Tone

A tone is created by mixing a color with gray. Adding gray reduces the color's intensity while preserving its general hue.

In HSL, reducing saturation can create a similar visual effect by moving the color toward gray.

background-color: hsl(200 100% 40%);
background-color: hsl(200 60% 40%);
background-color: hsl(200 20% 40%);

As saturation decreases, the color becomes more muted. At 0% saturation, the result is completely gray.

Shade

A shade is created by mixing a color with black. Adding more black produces progressively darker versions of the original color.

Reducing HSL lightness provides a convenient way to create darker color variations in CSS.

background-color: hsl(200 100% 40%);
background-color: hsl(200 100% 30%);
background-color: hsl(200 100% 20%);

As the lightness approaches 0%, the resulting color approaches black.

Creating Color Variations

HSL makes related color variations convenient because hue, saturation, and lightness can be adjusted independently.

.base {
  background-color: hsl(200 100% 40%);
}
.tint {
  background-color: hsl(200 100% 70%);
}
.tone {
  background-color: hsl(200 40% 40%);
}
.shade {
  background-color: hsl(200 100% 20%);
}

These adjustments are useful for creating visually related colors without selecting every color independently.

Using Color Variations

Tints, tones, and shades can help create a consistent color palette throughout a website. A single base hue can provide related colors for different interface elements and states.

Lighter variations may work well for backgrounds and highlights, muted tones can provide less prominent colors, and darker shades can create borders, headings, or stronger contrast.

Color variations should still provide sufficient contrast when they are used for text or other important visual information.

Hue, Tint, Tone & Shade Example

Use the Hue slider to select a base color, then use the Amount slider to compare a tint, tone, and shade created from that hue.

<div class="base">Hue</div>
<div class="tint">Tint</div>
<div class="tone">Tone</div>
<div class="shade">Shade</div>

Play in Editor

The examples remain based on the same hue while the amount of white, gray, or black changes the appearance of each variation.