0
1
00:00:00,150 --> 00:00:02,720
Let's take it up a notch and make a color pro out of you.
1

2
00:00:02,720 --> 00:00:07,320
You have already learned how to sample colors from the world around you.
2

3
00:00:07,320 --> 00:00:13,320
Now let's learn how to fine tune those color samples. Ability to fine tune colors is a very handy skill
3

4
00:00:13,560 --> 00:00:18,780
and we'll let you nail those designs. A good chunk of design magic is in color, so I want to make sure
4

5
00:00:18,780 --> 00:00:22,800
that you learn all the secrets and become very confident when working with colors.
5

6
00:00:22,800 --> 00:00:25,430
Let me show you how and why we fine tune colors.
6

7
00:00:25,440 --> 00:00:26,790
This is a gorgeous photo.
7

8
00:00:26,820 --> 00:00:29,880
I like the color contrast between the bird and the background.
8

9
00:00:29,880 --> 00:00:35,130
I say bird because I've no idea which bird this is. Is it a hawk, an eagle, a falcon?
9

10
00:00:35,220 --> 00:00:35,970
No idea.
10

11
00:00:36,090 --> 00:00:43,430
Let's sample these two colors. But do you notice how the colors, especially the brown, don't really hit
11

12
00:00:43,430 --> 00:00:44,120
the mark?
12

13
00:00:44,120 --> 00:00:46,770
These colors look dull compared to the image.
13

14
00:00:46,790 --> 00:00:50,050
The thing is feathers don't have a uniform color.
14

15
00:00:50,060 --> 00:00:52,120
Some parts are light, some parts dark.
15

16
00:00:52,130 --> 00:00:56,990
The light reflects also differently on different parts, so all of this gives a different perception than
16

17
00:00:56,990 --> 00:00:58,980
sampling a color from a single spot.
17

18
00:00:59,010 --> 00:01:03,350
The colors on the bird are lighter, more vibrant and overall look more exciting.
18

19
00:01:03,350 --> 00:01:08,390
This is what we can do to make the best out of our color. In Figma, or any other designed software for
19

20
00:01:08,390 --> 00:01:08,870
that matter,
20

21
00:01:08,870 --> 00:01:13,560
we have this color picker tool. Let's learn how to work this thing real quick.
21

22
00:01:13,700 --> 00:01:17,000
This here is the color spectrum. On this spectrum
22

23
00:01:17,000 --> 00:01:24,380
we pick a hue. A hue is the main ingredient that makes a color. As you can see the hue for this color
23

24
00:01:24,440 --> 00:01:30,350
is right here where the slider handle is on the spectrum. 2 other ingredients that make up our color
24

25
00:01:30,380 --> 00:01:35,450
are the brightness and saturation. Brightness is the vertical axis on this map.
25

26
00:01:35,570 --> 00:01:41,270
It is exactly what it says. How bright the color is. As we move up vertically on the map brighter the
26

27
00:01:41,270 --> 00:01:46,610
color gets, and as we move down the darker the color gets. You can think of this like the way, how much
27

28
00:01:46,940 --> 00:01:53,210
light falls on the color. During a sunny summer day you can see a color a specific hue fully, as
28

29
00:01:53,210 --> 00:01:58,280
there is a lot of light falling on it, but at night in your room with the lights off when it's pitch
29

30
00:01:58,280 --> 00:02:03,250
black and you don't see anything then everything is black. Even the brightest red color.
30

31
00:02:03,440 --> 00:02:08,620
That's why the bottom circle is completely black on this scale. 0% light means we don't see nada.
31

32
00:02:08,620 --> 00:02:15,350
The saturation is the horizontal axis on this map. It's that intensity of this particular hue
32

33
00:02:15,380 --> 00:02:22,550
in the color. As you move to the right the saturation increases, and the color becomes more intense. And
33

34
00:02:22,670 --> 00:02:28,340
as you move towards the left, we call this desaturation, then the hue starts to fade away until it's
34

35
00:02:28,340 --> 00:02:34,310
completely removed from our color. Then we get a gray scale. Black and white photo, is a fully desaturated
35

36
00:02:34,310 --> 00:02:39,260
photo. On this color picker, there's a dropdown that lets you switch between different color management
36

37
00:02:39,260 --> 00:02:48,560
systems. By default its a HEX, meaning Hexadecimal code. Change this to HSB. HSB means exactly what I
37

38
00:02:48,560 --> 00:02:55,280
just talked about: Hue, Saturation and Brightness. All three values can be seen right here. First one is
38

39
00:02:55,280 --> 00:03:01,240
Hue, second Saturation and the third is Brightness. The last percentage value is the opacity.
39

40
00:03:01,340 --> 00:03:06,860
Let's go back to our bird. To fine tune the color, we keep that hue as it is and play with saturation
40

41
00:03:06,860 --> 00:03:12,290
and brightness. It's important to keep the same hue value, otherwise you get completely different color,
41

42
00:03:12,590 --> 00:03:15,140
that wont match the original image anymore.
42

43
00:03:15,170 --> 00:03:21,080
First, I'm going to increase the brightness, because it's too dark. The brightness value before was 78
43

44
00:03:21,170 --> 00:03:23,780
and I've increased it to 95.
44

45
00:03:23,780 --> 00:03:30,200
The scale both on brightness and saturation goes from 0 to 100, like percentage. And now decrease
45

46
00:03:30,200 --> 00:03:35,510
the saturation just a little bit. And we'll get a result like this. This is more like it. It feels closer
46

47
00:03:35,510 --> 00:03:37,910
to the color of the bird than the original.
47

48
00:03:37,910 --> 00:03:42,920
The same thing we can do with the blue. It's a bit dark, I'm just going to increase the brightness
48

49
00:03:42,950 --> 00:03:47,060
a little bit and that's it. This way both colors are vibrant and bright.
49

50
00:03:47,060 --> 00:03:52,550
Such an improvement to what we had before. This is more suitable for today's web design look. These are
50

51
00:03:52,550 --> 00:03:58,490
exciting colors, that contrast with each other very well. And overall looks fresh and modern.