You are currently viewing Hue Value and Saturation very easily explained in 3 steps

Hue Value and Saturation very easily explained in 3 steps

Hue value and saturation are the first things you need to know when you are learning color theory. It’s a lot easier than you might think. Let’s not waste any time and dive right in!

Hue, value and saturation easily explained

Colors go hand in hand with color psychology and color temperature

 

Read this article first before diving into those!

What are colors made out of?

Colors are made out of 3 components: 

  • Hue
  • Value 
  • Saturation

Hue

Hue is simply the name of the color. That’s literally it! If I ask you to name these colors, what would you say?

hue value and saturation

Here’s a range of hues:

What is value?

value range

Value is the darkness or brightness of a color. We can get different values by adding black or white to any hue.

 

On the left are the colors (digitally) set to 0% brightness. On the right side the brightness is set to 100%. 

 

So, how come the color is not white at 100%?

 

It’s because right now, the colors are fully saturated. In order for the colors to appear lighter in brightness, we need to desaturate them. So technically they reached their limit in terms of the brightest brightness.

 

desaturated colors

The value of these colors are still at 100%. The only difference is that they are slowly desaturating towards the right. 

 

When you mix your paints with black or white they automatically desaturate a little bit. You won’t have to desaturate them any extra!

Value range

You create a value range by showing a color from dark to light. Most people use 10 steps. You can do this with colors or in grayscale!

Let’s take green as an example. The first block will be totally black. The block next to it will be green + a lot of black, so we get a dark green. Each block next to it needs green + a little less black than the previous block.

 

The 5th color should be your ”pure” color meaning there’s no added white or black. The boxes after that have green + white, increasing with each step. The last block should be pure white.

 

Any color (hue) + white are also known as tints. Any color (hue) + black are also known as shades.

mermay

Value is the most important thing to get right. You can basically use any color and saturation you want, but if your values are off, your art will not read right.

 

TIP: Imagine a black and white filter over your artwork, so everything is in greyscale. Is there enough contrast for you to see what’s going on?

 

You can see that my mermaids tail is exactly the same value as her skin. Maybe I should darken the tail to make it read better!

Saturation

Saturation is the vividness of a color, or how gray a color is. If something is fully saturated it means that it’s 100 percent that color. If something is completely desaturated, the color is completely grey.

 

You often see saturated colors in cartoons. Nature often has desaturated colors.

saturation

You can desaturate a colour by adding the opposite color of the color wheel to it or by adding grey.

Color

Hue often gets interchangeably used with color but this is not correct. Color is the combination of hue value and saturation. It takes darkness and vividness into account, (as well as hue).

Practice what you learnt

To see if you remember what each component means, try to answer these questions:

  1. Name each hue for the following colors:
quiz

2. Which group shows different saturations of the color red?

quiz

3. Which group shows its value range?

quiz

Scroll for answers…

Answers:

  1. Red-green-blue-yellow
  2. A
  3. A

I hope you learnt something new. Don’t worry if you don’t get it on the first try. You’ll be confronted with values hues and saturations all the time so you are going to pick it up in no time anyway. If you have any questions you can leave a comment down below, or DM me on Instagram.

 

See you next time,

♡ Laura

Leave a Reply

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.