Unit 1: Intro to Design
Unit 2: Figma Fundamentals
Unit 3: The Creative Process
Unit 4: Color Theory
Unit 5: Introduction to Illustrator
Unit 6: Typography
Unit 7: Layout
Unit 8: Typesetting
Unit 9: User Interface Design
Unit 10: Design Systems
1 of 2

Tints, Tones and Shades

For greater design freedom, once we decide on a dominant brand color, we can create variations of any color by making it darker, lighter or somewhere in between.

If we are making a color lighter and lighter in saturation, we call it tints. Tints can be made by adding white to a color in traditional painting.

If we are making a color darker and darker in brightness, we call it shades. Shades can be made by adding black to a color in traditional painting.

There is one thing in between that is achieved by adding gray to a color, which is called tones. Tones usually produce a “muddier” result than shades so they are not as desirable of a variation but when it comes to photo retouching, tone can be used in many different ways, which is story for another video.

Tints, tones and shades can be made into scales at designated increments. Let’s do a demonstration on how you can create tints, tones and shades for any given color easily yourself.

First, let’s create a tints scale for the color red. In this demonstration, we are going to use the brightest and most saturation red.

Before you attempt to create tints, tones or shades scales, we recommend changing your color model in the color picker of your design program to HSB, which is not always the default one.

Once you did, let’s begin.

You will create a shape with the starting color red. Then, copy the shape and decrease the saturation number from 100 to 80. We are going at 20 increments now. You can go at your own increment but make sure to make it consistent throughout the scale.

We will continue this several times until the color become very light. In this case we will make 5 steps of tint.

There we have it, a tint scale for the color red at 20 increment.

We can now move on to creating a shades scale for the red. Similar to the tints scale, we will change one number in the HSB color model. Because shades gradually get darker and darker, we will change the brightness amount instead of saturation. The smaller the brightness number is, the darker the color will be. Similar to the tints scale, we will also go at 20 increment.

Finally, we can create a tones scale. Because tones require us to add gray to a color and gray is the mixture of black and white, we will adjust the saturation and brightness values at the same time, also at 20 increment.

That is how you create tints, tones and shades scales for any given color to create more design options for brands.

Scroll to Top