Color Values

Color plays an important role in web design. 0:00 And with CSS, we can describe a color value in different ways. 0:03 The three most common ways are with a keyword, a hexadecimal value, or 0:06 an RGB function. 0:10 Many of the CSS data types have predefined keyword values that simply take 0:12 the form of words that literally describe how the element will appear. 0:17 So we're able to describe a color value as one of 0:21 the many predefined keywords CSS has to represent a color. 0:24 For example, the orange, lightblue, forestgreen, and 0:29 lightcoral values we gave our links. 0:33 Now these are just a few in the long list of accepted keyword values. 0:36 Some color names are as simple as black, silver, grey, and white. 0:42 While other colors include a combination of words. 0:47 Like cadet-blue, cornflower-blue. 0:51 Even colors like green-yellow and blonde-green. 0:55 For a full list of the available color keywords, 0:59 take a look at the MDN docs link I included in the teacher's notes. 1:03 Now another way we can describe color is with an RGB model. 1:08 Which stands for 1:12 red, green, blue and we can do that in two different types of formats. 1:13 One of the ways is with hexadecimal notation. 1:18 And you will often see these referred to as hex value. 1:21 Now a hex value is combination of red, green, and blue color values. 1:24 So let's go ahead and 1:30 define a hex value as the background color of our main header. 1:31 So hex values are specified by a hash sign, 1:35 followed by six hexadecimal characters. 1:40 That are represented by the numbers 0 through 9 and the letters a through f. 1:42 And their written as three double digit numbers. 1:47 So for example, if we defined our background color value as #ff0033, 1:51 in our hex value, ff represents the red value, 1:59 while 00 represents the green value. 2:04 And 3 3 represents the blue value. 2:08 Now, what's great about workspaces is that we're able to 2:12 preview a hexadecimal value when we hover over it. 2:15 And that's really helpful. 2:18 So here we see that the hex value we defined is a shade of red. 2:20 So if we save our style sheet and take a look at it in the browser, 2:25 that's exactly how our main header's background color renders in the browser. 2:29 And we're also able to use a shorter three digit notation where the hex 2:35 values are abbreviated. 2:39 And we can only that if each of the red, green and blue hex pairs are the same. 2:41 So in our current hex value, we can abbreviate each color channel using one 2:46 character, instead of two identical characters, like so. 2:52 And as we can see in the workspace preview, 2:59 it still represents a shade of red. 3:02 And if our hex value was something like ffaa88, 3:04 we could shorten it to the value fa8. 3:11 Which, as we can see, represents a much lighter shade of orange. 3:16 And if all six of the hex values are the same as in the value 000000 3:21 we can also abbreviate this value to simply 000. 3:29 And as we can see this value represents the darkest shade of black. 3:35 Conversely, the hex value ffffff, or 3:40 simply fff, represents the lightest shade of white. 3:43 So how do we initially come up with these hex values for our design colors? 3:51 Well, usually we'll choose these colors beforehand in a graphics editor like 3:55 Illustrator or Photoshop. 4:00 We're not expected to know each hex-value combination to determine 4:02 colors on the fly. 4:05 You can also refer to the MDN doc, 4:07 which also lists the hex value for each color keyword. 4:10 We've already used some hex values in our body and h3 colors. 4:17 So next since we're going to need a slightly lighter variation of 4:23 the color orange in our design. 4:28 Let's change the keyword value orange to a hex value 4:30 that represents a lighter shade of orange. 4:35 So first in our link rule, we're going to replace 4:38 the color value orange with the hex value #ffa949. 4:44 So now we can just go ahead and 4:51 copy this value, then scroll down to our main header rule. 4:53 And as the background-color value. 4:58 We're going to paste in the hex value we just wrote. 5:00 Let's also scroll up and give our main footer border the same hex value. 5:05 So we'll replace the orange border color with the hex value. 5:11 [BLANK_AUDIO] 5:15 So now when we save our style sheet and 5:19 refresh our browser, you can see those new shades of orange defined with hex values. 5:22 So the second RGB method uses what's 5:30 called a functional notation to specify the colors. 5:32 To see how it works, let's define our link colors with an RGB function. 5:36 So, let's actually delete the color value we wrote earlier in our link rule. 5:42 And now, we're going to type rgb followed by a set of parenthesis. 5:48 And inside the parenthesis, 5:53 we'll need to write a comma separated list of three numerical values. 5:55 And the values will represent the shades red, green, and blue respectively. 6:00 So the first value in our list represents red. 6:05 So let's made that 255. 6:10 Then we'll type a comma and after that the second value represents green. 6:12 So let's make this value 169. 6:17 Then we're going to type a comma and write the third value. 6:18 Which represents blue. 6:23 Let's make this 73. 6:25 So if we hover over our rgb value, Workspaces lets us 6:28 know that this particular rgb mixture is indeed a shade of orange. 6:33 Keep in mind that when using the rgb function 6:38 the value 255 represents the color white. 6:41 And it's the maximum value we can use. 6:45 While the value 0 represents pure black and is the minimum value. 6:47 For example if we change our rgb value to 255, 255 and 255 in 6:54 the preview we can see that it's the color white. 7:00 And if we change our value to 0, 0, 7:08 0 this is now the color black. 7:13 But let's go ahead and set our link color to the rgb value 255, 169, and 73. 7:19 That shade of orange. 7:27 Finally, we can also extend the rgb color model to allow alpha for 7:30 setting the opacity of a color via the alpha channel. 7:35 So, let's give our links a lighter, transparent shade of orange on hover. 7:39 To do that, let's go ahead and copy the rgb function, we just wrote. 7:44 Then paste it as the color value in our hover rule. 7:49 But this time we're going to add a fourth value after b of a, 7:57 and this stands for alpha. 8:02 Then, inside the parentheses, 8:07 we're going to add the alpha value as the fourth value in the list. 8:09 Let's set it to 0.4 or 40%. 8:14 So now when we save our style sheet and refresh the page. 8:18 When we hover over a link we can see how it turns a lighter shade of orange. 8:24 It's actually transparent now. 8:30 And we could really notice the alpha value when there's a background layer 8:33 behind the element. 8:36 For instance let's scroll up to our h1 rule and 8:38 set the color of our h1 to white using the rgba function. 8:43 So we're going to replace white with rgba and a set of parenthesis. 8:48 Then inside the parenthesis we're gonna type the value 255, 8:53 255 followed by a comma and 255. 8:58 And we're going to set the alpha value to 0.5 or 50%. 9:02 So, now if we save our style sheet, and refresh the browser preview. 9:08 We can see a lot of that orange background color showing through the main heading. 9:12 It's now pretty transparent. 9:18