1
00:00:01,050 --> 00:00:01,500
OK.

2
00:00:01,740 --> 00:00:06,600
So in this lesson we're going to discuss a lot of the different ways of describing and representing

3
00:00:06,750 --> 00:00:14,040
colors in C Ss and up until now if we go to the assess that we've been writing We've just been using

4
00:00:14,040 --> 00:00:20,520
simple elementary school colors like red and green and purple and obviously those work OK but they're

5
00:00:20,520 --> 00:00:22,880
not particularly nice shades not nice colors.

6
00:00:22,890 --> 00:00:28,440
In my opinion and you'd probably never use them because most designers and most people making websites

7
00:00:28,770 --> 00:00:30,900
have a very specific color palette.

8
00:00:31,320 --> 00:00:36,210
Whether it's something that you know is following the brand's color like a very specific shade of green

9
00:00:36,210 --> 00:00:39,070
for a brand or if it's a color palette.

10
00:00:39,250 --> 00:00:45,300
I'm a designer or someone has created almost nobody uses just the plain default red or green or purple

11
00:00:45,300 --> 00:00:46,760
.

12
00:00:47,130 --> 00:00:52,670
With that said there are quite a few built in colors and CSSA that have names.

13
00:00:52,980 --> 00:00:55,380
And in fact there's probably more than you would think.

14
00:00:55,500 --> 00:00:59,370
And there are way more than most people ever remember.

15
00:00:59,370 --> 00:01:06,710
So there's things like cornflower blue or dark orchid and there's I think 147 different colors.

16
00:01:06,870 --> 00:01:10,530
And this site here which I've actually really never used.

17
00:01:10,540 --> 00:01:15,350
I just want to show it to you it's a way to visualize all the different named colors and see assess

18
00:01:15,350 --> 00:01:15,800
.

19
00:01:16,080 --> 00:01:22,980
And of course the problem with using these is still it's only 147 colors and you might want a color

20
00:01:22,980 --> 00:01:29,070
that just like this gold color but slightly lighter or slightly darker or slightly redder and there's

21
00:01:29,070 --> 00:01:31,500
not going to be a perfect option for you.

22
00:01:31,500 --> 00:01:36,310
And then the other problem is that it's just hard to remember these names like light slate gray.

23
00:01:36,360 --> 00:01:37,750
Nobody remembers that.

24
00:01:37,770 --> 00:01:44,910
So I really only use named colors like red orange purple just for very quick debugging purposes to make

25
00:01:44,910 --> 00:01:45,940
sure something's working.

26
00:01:45,960 --> 00:01:48,410
I'll just turn it red and see if that works.

27
00:01:48,540 --> 00:01:54,080
And also just for educational purposes but most people would never use these colors.

28
00:01:54,730 --> 00:01:58,940
So CSS provides a few different color systems that we can work with.

29
00:01:59,280 --> 00:02:03,410
And these are color systems by the way that exist outside of the SS.

30
00:02:03,540 --> 00:02:10,320
So if you have some familiarity with photography or printing and you've worked with colors before you

31
00:02:10,320 --> 00:02:11,790
may have encountered some of these.

32
00:02:12,120 --> 00:02:17,700
So the first one is something called hexadecimal and before we talk about why it's called hexadecimal

33
00:02:17,910 --> 00:02:21,970
and what that means let's just take a look at a few examples.

34
00:02:21,990 --> 00:02:28,650
So over here the first thing we're doing is selecting all H-1 and changing their text color to be black

35
00:02:28,650 --> 00:02:29,740
.

36
00:02:30,030 --> 00:02:34,860
The next thing we're doing is selecting all the tattoos changing the color to be a shade of purple and

37
00:02:34,860 --> 00:02:39,550
then selecting all age threes and teaching them to be a shade of pink.

38
00:02:39,600 --> 00:02:46,150
So what you'll notice is that rather than having a word like red or purple We now have this hash symbol

39
00:02:46,220 --> 00:02:50,710
and it's technically called an octave Thorpe followed by six digits.

40
00:02:51,270 --> 00:02:56,100
So to get black it's six zeros to get purple.

41
00:02:56,160 --> 00:02:59,690
You'll notice it's numbers but there's also a letter B in there.

42
00:02:59,940 --> 00:03:07,000
And lastly to get this pinkish color it's again numbers and letters this time letter F..

43
00:03:07,020 --> 00:03:09,200
So what's happening here.

44
00:03:09,390 --> 00:03:12,300
I'm going to go ahead and open up some notes that I have.

45
00:03:12,630 --> 00:03:18,120
And we're going to do a really short math lesson is this more just for something I think is interesting

46
00:03:18,120 --> 00:03:23,620
but it's also informative and will help understand how hexadecimal works.

47
00:03:23,640 --> 00:03:28,410
So if you go back to middle school when I was in school at least we talked a lot about the decimal system

48
00:03:28,890 --> 00:03:35,080
and how let's suppose I wanted to create a three digit number.

49
00:03:35,310 --> 00:03:39,660
We have our once place the 10th place in the hundreds place.

50
00:03:39,690 --> 00:03:45,660
So if I wanted a number the largest three digit number I can create is nine hundred ninety nine the

51
00:03:45,660 --> 00:03:52,710
smallest three digit number technically is 111 or 0 0 or 1.

52
00:03:53,190 --> 00:04:01,500
But the idea is that each place in our regular base 10 which is what this means base 10 decimal number

53
00:04:01,500 --> 00:04:07,560
system I have 10 choices for every slot I can do 0 through 9.

54
00:04:07,980 --> 00:04:14,950
So that's base 10 that's what we're used to working with our digits are 0 1 2 3 4 5 6 7 8 9.

55
00:04:15,390 --> 00:04:17,630
But there are other number systems.

56
00:04:17,790 --> 00:04:21,940
So you may have heard of binary before and that's based two.

57
00:04:21,960 --> 00:04:25,360
And so that means we only have 0 and 1 as our options.

58
00:04:25,770 --> 00:04:32,690
So if I wanted to build a three digit binary number the largest one I can build is 1 1 1.

59
00:04:32,700 --> 00:04:35,560
That is not the same as one hundred and eleven.

60
00:04:35,580 --> 00:04:42,350
So this is not really the time to really go over how binary works but you may see things like this in

61
00:04:42,370 --> 00:04:46,960
like CSI shows or any sort of show where they're trying to show you what hacking looks like and they're

62
00:04:46,960 --> 00:04:48,310
totally wrong.

63
00:04:48,490 --> 00:04:53,230
But it is true that binary is a really really important part of how computers work.

64
00:04:53,470 --> 00:04:54,850
So that's based too.

65
00:04:54,910 --> 00:04:57,030
So we just have two choices zero or one.

66
00:04:57,370 --> 00:04:59,850
So hexadecimal is base 16.

67
00:05:00,340 --> 00:05:07,300
So that means that we have 16 choices and those choices go from zero to nine and then rather than going

68
00:05:07,300 --> 00:05:10,480
to 10 11 12 13 14 15.

69
00:05:10,810 --> 00:05:17,380
Those are two digit number two digit numbers which is problematic X more and that includes letters.

70
00:05:17,380 --> 00:05:22,070
So we have 0 through 9 and then ABC DCF.

71
00:05:22,270 --> 00:05:33,090
So the largest hexadecimal number three digit number would be F F F and the smallest 0 0 0.

72
00:05:33,910 --> 00:05:37,500
So it's just like any other number system except we have 16 choices.

73
00:05:37,690 --> 00:05:45,520
And the reason that hexadecimal is used rather than using just decimal to name a color is that it gives

74
00:05:45,520 --> 00:05:50,610
us a lot more choices while keeping the names of recolors relatively short.

75
00:05:50,920 --> 00:05:55,370
So basically has hexadecimal is just taking colors and giving them numeric names.

76
00:05:55,390 --> 00:05:59,200
And if we use base 10 we only have 10 choices per digit.

77
00:05:59,200 --> 00:06:05,410
So we need to use more digits if we use binary and we'd need to use a ton of digits to represent colors

78
00:06:05,430 --> 00:06:05,760
.

79
00:06:05,770 --> 00:06:07,870
Hundreds and hundreds of thousands of digits.

80
00:06:07,930 --> 00:06:12,820
So hexadecimal numbers are six digits long start's than Octa Thorpe.

81
00:06:13,030 --> 00:06:18,590
And then one digit two three four five six.

82
00:06:18,730 --> 00:06:22,010
And the way that it works it's not just random numbers.

83
00:06:22,240 --> 00:06:24,590
There's actually a little bit of a system.

84
00:06:24,640 --> 00:06:31,600
So the first two numbers correspond to how much red is in the color the next to correspond to how much

85
00:06:31,600 --> 00:06:36,220
green and in the last two correspond to how much blue is in the color.

86
00:06:36,760 --> 00:06:40,300
So I'm going to go ahead and switch over to our See assess and show you what I mean.

87
00:06:40,810 --> 00:06:43,510
So let's just work with our H-1 here.

88
00:06:43,600 --> 00:06:46,880
We have three H ones and must style them.

89
00:06:47,050 --> 00:06:51,790
So to use hexadecimal all we do is taper Octa Thorpe and then six digits.

90
00:06:52,180 --> 00:06:58,090
So let's start by defining a red color and remember the first two are red.

91
00:06:58,090 --> 00:07:04,370
So our first two digits if we wanted full red would be f f because that's the highest number.

92
00:07:04,990 --> 00:07:07,630
And then everything else can be zero.

93
00:07:07,630 --> 00:07:10,370
So this is going to save turn red all the way up.

94
00:07:10,660 --> 00:07:12,050
No green and no blue.

95
00:07:12,280 --> 00:07:13,270
And if we do that.

96
00:07:13,570 --> 00:07:19,810
Let's go ahead and open up our file you'll see that are h ones are bright red.

97
00:07:19,870 --> 00:07:26,400
So let's go back and let's play with this a little bit and now to introduce a little bit of green.

98
00:07:26,860 --> 00:07:35,030
So let's give it eight and you'll see we get this slight orange and you might be wondering how is green

99
00:07:35,260 --> 00:07:36,280
red orange.

100
00:07:36,520 --> 00:07:42,700
And the answer is that this is not the same color system that you're used to be mixing paints for instance

101
00:07:43,930 --> 00:07:46,000
RG B works slightly different.

102
00:07:46,150 --> 00:07:48,190
And again that's something for another video.

103
00:07:48,220 --> 00:07:57,820
But essentially if we added up red green and blue all the way up so full red full green and full blue

104
00:07:59,530 --> 00:08:03,160
the resulting color is not like a brown or black like you might expect.

105
00:08:03,160 --> 00:08:07,350
It's actually white and this is actually how light works in the real world.

106
00:08:07,420 --> 00:08:12,430
If you could take to leave the lights or three LCD lights a red green and blue and combine them and

107
00:08:12,430 --> 00:08:13,740
shine them together.

108
00:08:13,810 --> 00:08:15,560
You would actually get white light.

109
00:08:15,790 --> 00:08:17,690
So that's how this color works.

110
00:08:18,060 --> 00:08:18,310
OK.

111
00:08:18,310 --> 00:08:23,380
So most of the time you're actually not coming up with these colors from scratch.

112
00:08:23,380 --> 00:08:24,410
So it's not really.

113
00:08:24,520 --> 00:08:29,890
I mean it's a nice skill but you don't have to be able to identify this color

114
00:08:33,370 --> 00:08:38,980
as some sort of you know shade of purple or green or whatever it is that's not really the scope what

115
00:08:38,980 --> 00:08:42,750
you most often will do is have a color picker.

116
00:08:43,350 --> 00:08:46,670
And so let's say I want like a dark purple shade.

117
00:08:46,750 --> 00:08:48,160
There's all sorts of color pictures.

118
00:08:48,190 --> 00:08:53,110
There's some that are on your machine depending on if you have a Mac or PC you can download one.

119
00:08:53,110 --> 00:08:59,770
Some of them are included but we can also just go online and if I want like a dark purple shade I can

120
00:08:59,770 --> 00:09:01,400
just find this purple.

121
00:09:02,290 --> 00:09:03,160
Let's say

122
00:09:06,220 --> 00:09:07,300
this color here.

123
00:09:07,840 --> 00:09:10,160
And then I can just copy.

124
00:09:10,230 --> 00:09:12,080
I think that copied it.

125
00:09:12,140 --> 00:09:14,050
No you just copy.

126
00:09:14,160 --> 00:09:17,950
There it is this color

127
00:09:21,320 --> 00:09:24,900
and use that refresh and we get a dark purple.

128
00:09:24,980 --> 00:09:28,090
So this is most often what you'll do you'll have a color picker.

129
00:09:28,340 --> 00:09:32,390
Initially you'll pick your colors and then you just refer back to them.

130
00:09:32,390 --> 00:09:33,870
So it's not the most intuitive.

131
00:09:34,010 --> 00:09:42,770
It is nicer if it said something like dark eggplant but then of course that's not going to be as precise

132
00:09:42,770 --> 00:09:42,920
.

133
00:09:42,920 --> 00:09:44,540
That is just one shade of dark purple.

134
00:09:44,540 --> 00:09:47,070
And if I want to change it I'm out of luck.

135
00:09:47,120 --> 00:09:50,420
So that's hexadecimal.

136
00:09:50,420 --> 00:09:57,410
The next color system we're going to talk about is R.G. b so RGV works very similarly except the syntax

137
00:09:57,410 --> 00:09:58,910
is slightly different.

138
00:09:58,910 --> 00:10:02,600
So R.G. B there are three channels just like with hexadecimal.

139
00:10:02,630 --> 00:10:04,620
There's red green and blue.

140
00:10:05,120 --> 00:10:08,380
And what's different is that RGV is still in base 10.

141
00:10:08,810 --> 00:10:17,540
So what we do we have three different channels red green blue and the syntax is color colon and then

142
00:10:17,600 --> 00:10:24,110
the word are the letters R.G. B parentheses and then the value of our read the value of our green and

143
00:10:24,110 --> 00:10:25,360
the value of our blue.

144
00:10:25,640 --> 00:10:29,340
And those range from zero to 255.

145
00:10:29,900 --> 00:10:39,350
So in this case we're saying all age ones are R.G. be where Red is zero green is all the way up in blue

146
00:10:39,350 --> 00:10:40,170
is zero.

147
00:10:40,670 --> 00:10:49,070
And we get this bright green and this one we're setting all age twos to be R.G. be where Red is about

148
00:10:49,070 --> 00:10:50,150
halfway up.

149
00:10:50,300 --> 00:10:52,100
Green is completely gone.

150
00:10:52,340 --> 00:10:57,920
And Blue is about halfway up and we get a nice purple and then this one we're setting all age threes

151
00:10:58,370 --> 00:11:04,140
to be mainly blue with a little green and even less red and we get this shade of blue.

152
00:11:04,700 --> 00:11:07,420
So let's do a few examples.

153
00:11:08,960 --> 00:11:13,720
Let's go for a let's do a purple again.

154
00:11:13,820 --> 00:11:19,480
So we just text the word our G-B parentheses and then we need our channels.

155
00:11:19,640 --> 00:11:27,180
So the first one if we want a purple or want some red let's do 60.

156
00:11:27,200 --> 00:11:28,800
I don't know 68 red.

157
00:11:29,360 --> 00:11:37,580
Zero green and this will be a blue or purple then than a red or purple so we'll do a hundred blue and

158
00:11:37,580 --> 00:11:39,840
we save it.

159
00:11:41,660 --> 00:11:45,560
And of course it doesn't look like much of a change but it did change slightly.

160
00:11:45,560 --> 00:11:53,920
So let's go ahead and now turn up the read quite a bit 240 and you can see we get a pinkish purple.

161
00:11:54,500 --> 00:11:55,820
And if I introduce some green

162
00:11:59,800 --> 00:12:01,700
and if I turn everything all the way up

163
00:12:05,930 --> 00:12:13,900
just like before with hexadecimal full red green and blue actually gives us white and to get black.

164
00:12:13,900 --> 00:12:18,080
You want zero for all three channels.

165
00:12:18,080 --> 00:12:20,690
So our B is very similar to the decimal.

166
00:12:20,750 --> 00:12:22,660
The only difference is the syntax.

167
00:12:22,940 --> 00:12:34,660
So rather than writing out something like this where we have two channels or two digits for red to for

168
00:12:34,670 --> 00:12:43,040
green and two for blue instead we have three slots and we just go from zero to 255.

169
00:12:43,040 --> 00:12:49,880
So just another syntax and one other syntax I want to talk about is our GPA.

170
00:12:50,270 --> 00:12:56,150
So R-GA works just like R.G. B except there's one small twist which is there's a fourth channel called

171
00:12:56,210 --> 00:12:59,100
Alpha which is how you can make colors transparent.

172
00:12:59,270 --> 00:13:05,950
So R.G. V-A is great if you want to have one color that you are making more or less transparent.

173
00:13:06,230 --> 00:13:12,410
So the way that it works it's the same exact syntax except we write R.G. be a and then we have four

174
00:13:12,410 --> 00:13:13,830
channels that we need to fill out.

175
00:13:14,150 --> 00:13:16,560
And the first three just like before.

176
00:13:16,580 --> 00:13:23,900
They range from zero to 255 but the last chant on the alpha channel ranges from zero to 1.

177
00:13:24,470 --> 00:13:26,370
So I'll give you a few examples here.

178
00:13:26,540 --> 00:13:33,650
Here we're setting all three to be the exact same color as far as the RG and B channels are concerned

179
00:13:33,660 --> 00:13:33,800
.

180
00:13:33,920 --> 00:13:35,080
So 11 red.

181
00:13:35,170 --> 00:13:37,850
Ninety nine green 950 blue.

182
00:13:38,480 --> 00:13:42,840
And then the fourth channel we're changing the alpha or changing the transparency.

183
00:13:42,860 --> 00:13:47,950
So with four Alpha with all everything all up no transparency at all.

184
00:13:48,050 --> 00:13:49,810
We end up with this flu.

185
00:13:50,480 --> 00:13:56,340
When we said Alpha to be point six we get this much lighter and and more transparent blue.

186
00:13:56,690 --> 00:14:01,640
And then we set it to be Point two we get this which is barely there.

187
00:14:01,880 --> 00:14:09,300
So let's do another example let's do Archie B-A and this time let's do a green.

188
00:14:09,440 --> 00:14:17,420
So 200 or so green and a little bit of blue and then we need our alpha and let's just start with one

189
00:14:17,690 --> 00:14:18,860
.

190
00:14:18,860 --> 00:14:23,080
Refresh the page and we get this green.

191
00:14:23,180 --> 00:14:30,830
So now let's do the same thing but make it slightly paler So let's do point eight.

192
00:14:30,960 --> 00:14:34,330
I'm going to refresh and you can see it got a little bit paler.

193
00:14:34,460 --> 00:14:41,810
Now let's be more drastic down 2.2 and you can see it gets a lot more transparent.

194
00:14:42,920 --> 00:14:47,480
So to summarize we have the built in colors which most people don't use.

195
00:14:47,690 --> 00:14:49,460
We have hexadecimal.

196
00:14:49,460 --> 00:14:50,900
We have R.G. B then.

197
00:14:50,900 --> 00:14:53,960
RG B.A where the A stand for Alpha