Let's take it up a notch and make a color pro out of you. 1
You have already learned how to sample colors from the world around you. 2
Now let's learn how to fine tune those color samples. Ability to fine tune colors is a very handy skill 3
and we'll let you nail those designs. A good chunk of design magic is in color, so I want to make sure 4
that you learn all the secrets and become very confident when working with colors. 5
Let me show you how and why we fine tune colors. 6
This is a gorgeous photo. 7
I like the color contrast between the bird and the background. 8
I say bird because I've no idea which bird this is. Is it a hawk, an eagle, a falcon? 9
No idea. 10
Let's sample these two colors. But do you notice how the colors, especially the brown, don't really hit 11
the mark? 12
These colors look dull compared to the image. 13
The thing is feathers don't have a uniform color. 14
Some parts are light, some parts dark. 15
The light reflects also differently on different parts, so all of this gives a different perception than 16
sampling a color from a single spot. 17
The colors on the bird are lighter, more vibrant and overall look more exciting. 18
This is what we can do to make the best out of our color. In Figma, or any other designed software for 19
that matter, 20
we have this color picker tool. Let's learn how to work this thing real quick. 21
This here is the color spectrum. On this spectrum 22
we pick a hue. A hue is the main ingredient that makes a color. As you can see the hue for this color 23
is right here where the slider handle is on the spectrum. 2 other ingredients that make up our color 24
are the brightness and saturation. Brightness is the vertical axis on this map. 25
It is exactly what it says. How bright the color is. As we move up vertically on the map brighter the 26
color gets, and as we move down the darker the color gets. You can think of this like the way, how much 27
light falls on the color. During a sunny summer day you can see a color a specific hue fully, as 28
there is a lot of light falling on it, but at night in your room with the lights off when it's pitch 29
black and you don't see anything then everything is black. Even the brightest red color. 30
That's why the bottom circle is completely black on this scale. 0% light means we don't see nada. 31
The saturation is the horizontal axis on this map. It's that intensity of this particular hue 32
in the color. As you move to the right the saturation increases, and the color becomes more intense. And 33
as you move towards the left, we call this desaturation, then the hue starts to fade away until it's 34
completely removed from our color. Then we get a gray scale. Black and white photo, is a fully desaturated 35
photo. On this color picker, there's a dropdown that lets you switch between different color management 36
systems. By default its a HEX, meaning Hexadecimal code. Change this to HSB. HSB means exactly what I 37
just talked about: Hue, Saturation and Brightness. All three values can be seen right here. First one is 38
Hue, second Saturation and the third is Brightness. The last percentage value is the opacity. 39
Let's go back to our bird. To fine tune the color, we keep that hue as it is and play with saturation 40
and brightness. It's important to keep the same hue value, otherwise you get completely different color, 41
that wont match the original image anymore. 42
First, I'm going to increase the brightness, because it's too dark. The brightness value before was 78 43
and I've increased it to 95. 44
The scale both on brightness and saturation goes from 0 to 100, like percentage. And now decrease 45
the saturation just a little bit. And we'll get a result like this. This is more like it. It feels closer 46
to the color of the bird than the original. 47
The same thing we can do with the blue. It's a bit dark, I'm just going to increase the brightness 48
a little bit and that's it. This way both colors are vibrant and bright. 49
Such an improvement to what we had before. This is more suitable for today's web design look. These are 50
exciting colors, that contrast with each other very well. And overall looks fresh and modern.