Hue value and saturation are the first things you need to know when you are learning color theory.
Hue Value and Saturation are the 3 components of color. It’s important to know what each one of them does and how to manipulate them.
It’s a lot easier than you might think. You’ll have the hang of this in a matter of minutes. Let’s not waste any time and dive right in!
Colors explained
Before you dive into color theory you need to cover the basics first. Colors go hand in hand with color psychology and color temperature. But every single color all have something else in common: 3 components.
What are colors made out of?
Colors are made out of 3 components:
- Hue
- Value
- Saturation
What is hue?
Hue is simply the name of the color. That’s literally it! A hue would either be: red, red-orange, orange-yellow, yellow, yellow-green, green, green-blue, blue, violet, purple, purple-red.
You can change hue by mixing it with other colors. But be careful, you should avoid making muddy colors.
If I ask you to name these colors, what would you say?
I’ll give you a pass if you’ve answered violet instead of purple. If you want to know once and for all what the difference is between violet vs purple you can check it out here.
Don’t confuse hue with color though. Color contains all 3 components but when we talk about hue, we only talk about the root color.
Different colors can have the same hue. But different hues are not the same color.
Here’s an example of a range of hues:
What is value?
Value is the darkness or lightness of a color. We can get different values by adding black or white to any color. Another word for value is brightness. The term brightness is often used in digital art.
In the image above, the left colors are (digitally) set to 0% brightness, aka black. On the right side the brightness is set to 100% aka white.
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 white (or near white), we need to desaturate them.
So technically they reached their limit in terms of the brightest brightness when they are fully saturated.
In the image above the values are set at 100% as well. 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!
We’ll come back to what saturation means in just a minute.
What is a value range?
A value range is a range of values that increasingly get lighter or darker. Usually, you go from dark to light. Most often this is done in either 5 or 10 steps. This is a classic exercise in art school.
The benefit of a value range is that you can use it as a reference. Lay it next to a painting of yours and compare!
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.
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.
You can desaturate a color 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).
I devoted an entire article to the differences between color vs hue which you can check out here.
Hue value and saturation
To sum up:
Hue, value and saturation are the three components of color. Changing any one of these every so slightly results in a new color. Hue is the root color (red, green, blue, yellow, purple, orange), value is how dark or light the color is, and saturation is how gray a color is.
You change hue by mixing colors. You change value by adding white or black. You change saturation by adding the opposite color or gray.
Practice what you learnt
To see if you remember what each component means, try to answer these questions:
- Name each hue for the following colors:
2. Which group shows different saturations of the color red?
3. Which group shows its value range?
Scroll for answers…
Answers:
- Red-green-blue-yellow
- A
- 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
