In print design, a tint of a color is making it lighter by putting less ink, and a shade is mixing a color with black. Now with CSS preprocessors like Sass or Less we can easily compute color codes to reproduce these tints and shades. These two functions appear to be underused but they are perhaps the most useful color functions to keep a branding and identity style consistent throughout a whole website or web application.

Using tints and shades

Basically a tint is mixing a color with white, and a shade is mixing a color with black. This helps maintaining a design unity and keep the branding consistent troughout an interface. And it allows us to play on visual hierarchy.

Global colors in Illustrator

Adobe Illustrator offers the possibility to define global colors. It’s a really useful function since if you make a change to a global color your whole artwork is updated with wherever this color is used. And it gives a quick access to the tints of this color. The tints you use in your artwork will be updated too.

  1. Choose your color and then click New Swatch in the Swatches Panel.
  2. Check the Global checkbox.
  3. Then you have access to a slider with all the tints from 0% (white) to 100% (actual color).

Illustrator swatches window Illustrator new swatch window Illustrator color tints selection

With CSS preprocessors

The tint and shade functions aren’t so well documented. They appeared lately in Less, and in Sass they weren’t native. They are implemented in Bourbon and Compass and now natively in Sass. But I didn’t find them in the documentation pages.

Displaying tints & shades

In this example I’m going to use the tint() and shade() Sass color functions to colorize a list of colors from a base color to white through tint levels and the same base color to black through shade levels.

<table class="tints-shades">  
    <tr class="tints">
        <th rowspan="2"></th>
        <td></td><td></td>
        <td></td><td></td>
        <td></td><td></td>
        <td></td><td></td>
        <td></td><td></td>
    </tr>
    <tr class="shades">
        <td></td><td></td>
        <td></td><td></td>
        <td></td><td></td>
        <td></td><td></td>
        <td></td><td></td>
    </tr>
</table>  

Assuming we have defined this global color variable:

$color: #56487c;

I’m going to use a Sass loop to colorize the tints elements:

.tints {
    @for $i from 0 through 10 {
        :nth-child(#{$i + 1}) {
            background: tint($color, $i * 10%);
        }
    }
}

And the equivalent loop with shades elements:

.shades {
    @for $i from 0 through 10 {
        :nth-child(#{$i + 1}) {
            background: shade($color, $i * 10%);
        }
    }
}

Demo

Here is the result. It can be really useful to have when building style guides for example.

See the Pen Tints & Shades by Frédéric Perrin (@blustemy) on CodePen.