In my last article, I wrote about how using more specific names can be useful when referencing colors. Several people shared how this is doubly useful when mapping to SASS variables—and I agree. This time around I want to share how to use more specific color names when applying lighter and darker values through tints, tones, and shades and how this can be further helpful for color reference.

Tints, Tones, and Shades

First, a little background about tints, tones, and shades. Stated simply, these color variations are created by adding white, gray, or black to a hue (or pure color) to alter its lightness. More specifically:

Tint: is the mixture of a color with white, which increases lightness

is the mixture of a color with white, which increases lightness Tone: is produced either by the mixture of a color with gray, or by both tinting and shading

is produced either by the mixture of a color with gray, or by both tinting and shading Shade: is the mixture of a color with black, which reduces lightness

In Fives

I like to apply tints, tones, and shades to hues in sets of five. I start with the hue as a middle value and then go lighter and darker in two steps. This way you create a range that looks like this:

Darkest > Darker > Hue < Lighter < Lightest

Here’s why I like this method: when you create tints, tones, and shades, and then apply the More Colorful Naming concept, you avoid naming colors “darker dark blue” or “lightest light orange.” Instead, you get something like this:

Darkest Coral > Darker Coral > Coral < Lighter Coral < Lightest Coral

In establishing a range of five values from lightest to darkest, you also allow for contrast flexibility and soft background coloring as needed.

Contrast Options

I find that in order to use white text on a background color I need to increase the contrast between the two colors for better legibility. Having pre-established values for darkening a color makes it easier to quickly test that contrast.

Alert Notifications

Similarly, light values of colors are often used as backgrounds for alerts and notifications, and having a lighter option at the ready makes creating those alerts easier.

Button Gradients

Lastly, gradient fills from “lighter” to “darker” help create tactile button effects while retaining a pure hue in the middle of the gradient.

In Summary

Tints, tones, and shades can help you create varying levels of color brightness without altering hue. I hope this method is as useful for you as it has been for me.

For a CSS friendly approach, I highly recommend Chris Coyier's Yay for HSLa article and HSLa Explorer tool as well as Kyle Fiedler's Controlling color with Sass color functions.

See also: