Color

[00:00:00]
>> Okay let's move into the foundation this is gonna be the foundation of our webpage so we'll deal with a lot of the foundational CSS concepts. Let's just hit the ground running, let's start with color. As a preface to this section it does get a little bit technical and feel free to go back and reference the slides on this, they're not things you need to memorize but I think it's good to have an overview on some of these concepts.

[00:00:26]
So feel free to stop me and ask questions along the way. Okay, so when it comes to color, there are several different types of color values that we can use. We've got named colors, hexadecimal, RGB, RGBA, HSL, a lot of acronyms. Let's take a look at what each of these means.

[00:00:45]
So, named color are color values like blue, red, orange, we were just using these in the previous examples. I've linked out to the Mozilla Developer Network here, the documentation on color, and they have a whole table full of different named color values that you can use. Hexadecimal, also known as hex, is another really common one, you'll probably see this a lot in production code.

[00:01:09]
So the values that you see here are actually identical the ones we just saw on the previous slide. So blue, red, and orange, they correspond exactly to these hexadecimal values. Now, as humans we typically work off of base 10, so this is known as decimal and that, I don't know what the right word in English is, but the deca in decimal, it means 10.

[00:01:31]
So decimal means base 10. Now we sometimes use hexadecimal with color values, and hexa means 6. So hexadecimal means base 16. This means we can have 16 values represented in each place value here. So instead of just 0 through 9, the digits we use in decimal, we also have the values A through F.

[00:01:52]
That's gonna give us a total of 16 characters that we can use and each place value and there are six place values, each having that range again from 0 through 9 and A through F. There is a shorthand, sometimes you'll see this that contain only three place values, so this means repeat the character found at this place value.

[00:02:14]
So #FFF is equivalent to #FFFFFF, same with 000 which is black and same with FC0, which is FFCC00. RGB stands for red, green and blue. So there are three place values here each has a range from 0 to 255. This RGB function accepts three space separated values. Again, each with that range 0 to 255 each corresponds to red, green and blue.

[00:02:46]
We can also use percentages for these values. And in the previous versions of the RGB functions, they took comma separated values. So the first example here it does use commas. So it's still valid syntax, it just the more modern syntax to be space separated. RGBA is the same as RGB, but there is a fourth place value here, and that stands for alpha.

[00:03:14]
So alpha is a value from 0 to 1 that represents the opacity. So 1 corresponds to 100% opacity and 0 corresponds to 0% opacity. So there is an RGBA function that we can use that takes those four values. Again, the old syntax uses comma separated values, the new syntax is space separated.

[00:03:36]
The caveat with the space-separated syntax is that between the RGB and the alpha values there is a slash. You don't have to use RGBA, you can declare that alpha value directly in the RGB function. So if it's comma separated again, you've got four comma separated values and if it's space separated, you just have to preface the alpha value with a slash.

[00:04:00]
HSL stands for hue, saturation and lightness. Again, HSLA is kind of like the RGBA of HSL, so they're very similar, it allows for that alpha value or for opacity to be defined. Now, the difference is HSL relates to the color wheel. So hue is gonna take either a degree radius gradient or term value.

[00:04:24]
If we don't declare a unit on that value it's gonna be interpreted as a degree but you can see here the color wheel red is at 0 degrees, cyan is at 180, blue is at 240. The saturation in HSL is a percentage, where 0 is unsaturated and 100% is fully saturated.

[00:04:45]
And lightness is a percentage where 0 is black, 50% is normal, and 100% is white. So the real question is that's a lot, which one should I actually use? The short answer is they're all valid [LAUGH] The long answer is hexadecimal is probably the most widely used in production apps.

[00:05:09]
You might see some named color values, but yeah, I would say hexadecimal or RGB are gonna be the most common you might see in a production app. Yes.
>> Have you seen anything about the level four colors? They're like HD colors like LCH and stuff like that.
>> I have not.

[00:05:34]
Yeah, I'm not able to speak to that, but the W3C has great documentation. So I'd recommend checking that out, level four colors. So when we're coding, if you're using Visual Studio Code, which is my code editor of choice. There's a really fun plug in called color highlight that will actually take these hexadecimal values and replace them with a snippet of the actual color that will be rendered.

[00:05:55]
So this is linked in the Readme for the repository as well. So feel free to add that if you're using Visual Studio Code.