1
00:00:00,404 --> 00:00:05,372
In the last video, we applied
some colors to our HTML elements,

2
00:00:05,372 --> 00:00:09,153
such as white, black,
brown, and rosy brown.

3
00:00:09,153 --> 00:00:14,353
These are called HTML color names, and
there are user-friendly options for

4
00:00:14,353 --> 00:00:17,793
quickly defining basic
colors in your web design,

5
00:00:17,793 --> 00:00:21,314
offering simplicity and
readability in your code.

6
00:00:21,314 --> 00:00:25,463
HTML color names are excellent for
quick color choices, but

7
00:00:25,463 --> 00:00:29,865
most of the time we'll want to be
more specific with our colors.

8
00:00:29,865 --> 00:00:31,767
Enter, hex colors.

9
00:00:31,767 --> 00:00:36,336
Hex colors use a hexadecimal
value to represent a color.

10
00:00:36,336 --> 00:00:42,703
It uses the #RRGGBB format,
where RR represents the red value,

11
00:00:42,703 --> 00:00:47,334
GG represents green,
and BB represents blue,

12
00:00:47,334 --> 00:00:53,269
whereas 00 is the lowest value and
FF is the highest value.

13
00:00:53,269 --> 00:00:58,686
For example,
#FF0000 will be pure red because the red

14
00:00:58,686 --> 00:01:04,005
value is at its highest and
the other two are at its lowest.

15
00:01:04,005 --> 00:01:10,431
By specifying values in this format, you
can create an extensive range of colors.

16
00:01:10,431 --> 00:01:13,574
Let's play around with
the hex color values tool,

17
00:01:13,574 --> 00:01:17,169
which you can find a link to
in the teacher's notes below.

18
00:01:17,169 --> 00:01:23,256
See how the color and the hex value of
the box change with different values for

19
00:01:23,256 --> 00:01:25,269
red, green, and blue.

20
00:01:25,269 --> 00:01:28,281
If we have a look at the provided mockups,

21
00:01:28,281 --> 00:01:32,497
we can see that there are some
very specific colors used for

22
00:01:32,497 --> 00:01:37,764
the background, buttons, borders,
and ingredient box background.

23
00:01:37,764 --> 00:01:41,785
There's a color.txt file
provided with the project

24
00:01:41,785 --> 00:01:45,994
files that contain the four
colors used in the mockups.

25
00:01:45,994 --> 00:01:50,659
Let's have a look at what these
colors look like using this hex

26
00:01:50,659 --> 00:01:52,192
color values tool.

27
00:01:52,192 --> 00:01:57,447
Adjust the sliders to F3, EE, and EA.

28
00:01:57,447 --> 00:02:01,551
This is how the almost white color looks.

29
00:02:01,551 --> 00:02:07,226
And now we'll adjust it to E8, DB, and D3.

30
00:02:07,226 --> 00:02:10,732
This is how the light brown color looks.

31
00:02:10,732 --> 00:02:15,237
For the last two,
we can use a color picker instead.

32
00:02:15,237 --> 00:02:21,029
Enter aa7d7a and 75474a

33
00:02:21,029 --> 00:02:27,041
to see what the colors look like.

34
00:02:27,041 --> 00:02:30,046
There are many hex color tools out there,
so

35
00:02:30,046 --> 00:02:33,389
take the time to find one
that works best for you.

36
00:02:33,389 --> 00:02:38,682
Now that we know what hex colors are,
we can start using them in our CSS.

37
00:02:38,682 --> 00:02:42,778
Let's change the body's
background color from rosy

38
00:02:42,778 --> 00:02:46,427
brown to the light brown
listed in color.txt.

39
00:02:46,427 --> 00:02:51,878
In place of rosy brown,
we can enter the hash symbol,

40
00:02:51,878 --> 00:02:56,859
followed by the hexadecimal value, e8dbd3.

41
00:02:56,859 --> 00:03:00,108
Save and refresh the page.

42
00:03:00,108 --> 00:03:04,648
We can see that the body now has
the same color as the background

43
00:03:04,648 --> 00:03:06,667
color shown in the mockup.

44
00:03:06,667 --> 00:03:10,219
Let's do the same thing for
our anchor tags.

45
00:03:10,219 --> 00:03:15,365
Our anchor tag should be the hex
color code named medium-brown.

46
00:03:15,365 --> 00:03:19,562
Pause this video,
refer to the provided hex colors, and

47
00:03:19,562 --> 00:03:22,718
try to change the color
of the anchor tags.

48
00:03:25,710 --> 00:03:28,390
Here's what I did,

49
00:03:28,390 --> 00:03:33,917
I changed the brown value to #aa7d7a.

50
00:03:33,917 --> 00:03:39,145
Next, let's give our meat-related parts
their signature dark brown text color.

51
00:03:39,145 --> 00:03:41,012
Pause this video and give it a go.

52
00:03:44,604 --> 00:03:45,927
How did it go?

53
00:03:45,927 --> 00:03:52,384
Over in the meat class selector,
I gave it the property color and

54
00:03:52,384 --> 00:03:55,745
set the value to #75474a.

55
00:03:55,745 --> 00:04:02,027
We'll use the remaining hex values as
we continue to style our web page.

56
00:04:02,027 --> 00:04:07,555
As you can imagine, you now have a huge
range of colors at your disposal.

57
00:04:07,555 --> 00:04:12,763
You simply have to determine the
corresponding hex value using one of many

58
00:04:12,763 --> 00:04:18,310
online tools, and you'll have full
control over the colors on your website.