Color spaces

[00:00 - 00:11] Sometimes when we're creating data visualizations, we need to create our own custom colors. So far we've been using color keywords that the browser understands and spits out a specific color.

[00:12 - 00:25] So this is something like cornflower blue or cyan or tomato or red. The browser understands that it'll spit out a specific color and it's really great for if you need to think of a color on the spot.

[00:26 - 00:42] You can just think of purple, red, blue, type that in and it'll spit out a color. There's also some important color keywords that can come in handy like custom color which is basically just the color CSS attribute.

[00:43 - 00:49] It's going to use that for where we use custom colors. So you can set a fill to custom color or a stroke.

[00:50 - 01:15] There's also transparent which is we've used for interactions so we use transparent for the fill rectangle that will listen for mouse move events within our interaction lesson. But the place where keywords don't come in handy is if we want to use corn flower blue but make it 10% darker, there is no way to do that with just using the keyword.

[01:16 - 01:20] So we're going to talk a little bit about color spaces. So there's three color spaces we're going to talk about.

[01:21 - 01:23] The first is RGB. The second is HSL.

[01:24 - 01:30] The third is HCL. So the first we're going to talk about RGB.

[01:31 - 01:41] So in RGB, the RGB and the letters stand for certain colors. So R is red, green is green, RGB is green and B is blue.

[01:42 - 01:52] And basically the higher the number for any of these, the more we have of that color. And then the browser is going to take those three values and turn them into one color.

[01:53 - 02:01] This is kind of how LCD screens work. Each pixel is made up of red, green and blue light.

[02:02 - 02:10] And if you have more of that light, it's going to have more of that color. And this is an additive color space.

[02:11 - 02:24] So it's unlike paint where if you add red to blue, it's going to get a little bit darker and then it approaches black. Basically, the way RGB works is it starts at black.

[02:25 - 02:34] And as you add more colors, it approaches white and gets lighter and lighter. All of these color spaces we're going to talk about also have an alpha channel.

[02:35 - 02:43] So A, it's optional. If you don't include it, it's just going to be one or 100% alpha.

[02:44 - 02:55] So this is the opacity of the color. So we can have a totally opaque color or we can have almost a transparent color with a really low alpha value.

[02:56 - 03:06] So if we want to represent an RGB color, there's two notation formats. The first is likely what you'll see most often.

[03:07 - 03:24] It's going to be the letters R, G, and B. And then in parentheses, the numerical values for each of those colors. It can also be represented as R, G, B, A. And then there's going to be a fourth color which corresponds to the alpha channel.

[03:25 - 03:44] So if we wanted to have this string for the color cyan, then we would write R, G, B, A optionally. And then in parentheses, there's going to be zero red color, max green color and max blue color and then max alpha.

[03:45 - 03:49] And that's what's cyan. It's green and blue without any red.

[03:50 - 04:00] And the way the RGB works in the functional notation is all of these values go from zero to 255. So if it's zero, it's none of the color.

[04:01 - 04:09] If it's 255, it's all of the color. The other format is the hexadecimal notation.

[04:10 - 04:22] You're probably not going to see this as much. Although I do use hex codes a lot for web filament, it's the same thing except the colors go from zero zero to FF.

[04:23 - 04:30] They go from zero zero all the way up to nine nine and they switch over to letters. And it's AA all the way to FF.

[04:31 - 04:43] And so it's very similar to this last representation for cyan except we have these different values and a different syntax. So it starts with this hashtag or pound sign.

[04:44 - 05:08] And then zero R value is going to be represented as zero zero and then both GNB have two Fs and alpha as well to have the full effect of both green and blue and alpha. So although you might see the RGB format a lot, it can be a little bit unenjoy ed.

[05:09 - 05:16] Intuitive. So this teal color on the left is going to be RGB 39204199.

[05:17 - 05:29] And then if we wanted to shift this color over to orange but have the same brightness and saturation, we're going to have a completely different set of numbers. So 204118 and 41.

[05:30 - 05:38] And this isn't exactly how we as humans think about colors. So that's where this next color space comes in.

[05:39 - 05:56] So the next one we're going to talk about is HSL where the H stands for hue, the S stands for saturation and the L stands for lightness. So for hue, we're talking about a circular color wheel and it's corresponding to the angle around the color wheel.

[05:57 - 06:05] So zero degrees is red. And then as we go around the color wheel, we go through orange and yellow all the way back to red.

[06:06 - 06:17] So this first value goes from zero to 360 because that's the number of degrees in a circle. Saturation is how saturated the color is.

[06:18 - 06:32] So at zero it starts at kind of like a gray, like there's no color here, all the way to 100 which is a fully saturated color. So pastels are going to be, they're going to have a lower saturation value.

[06:33 - 06:45] And then L for lightness, it's pretty similar except it starts at zero which is black and it goes to 100% which is white. So that's how light is this color.

[06:46 - 07:01] And the same as RGB, we have that optional alpha channel. So it's going to be either HSL and then there's numbers and parentheses or HSLA including that fourth value.

[07:02 - 07:18] You can see that it's a little bit more intuitive when we use this color space. If we have this teal and kind of this same color but moved around to an orange, the only number that we need to change here is that first number which changes the hue.

[07:19 - 07:35] So this can be a little bit more intuitive to work with. One of the issues with this color space that we'll see coming up is that as humans we don't visually perceive different colors the same way.

[07:36 - 07:58] So HCL is very similar to HSL where H is hue and L is lightness but in the middle we have C which is chroma which is actually pretty similar to saturation but just a different representation of colorfulness. So this is all going to be the same except for this middle C.

[07:59 - 08:27] And the difference here is that when we look at, this is the HSL color space, say we're looking at all of the hues with the same lightness and saturation, we can see these bands around yellow and cyan and purple that look a lot brighter to our visual system. Whereas if we look at the HCL color space we don't see those bands anymore.

[08:28 - 08:51] And that's because this is kind of like the mathematically correct way to go around the color wheel and with HCL we're taking into account the way we perceive colors and kind of getting rid of those bands where yellow looks a lot brighter to us than blue . So we're going to over compensate for that and have this different color space.

[08:52 - 09:11] If we look at them in 3D, this is the HSL color space. It's a perfect cylinder where hue goes around the circle, saturation increases as you move out and lightness increases as you go up and you can not super important to understand this but you can see that it's a full cylinder.

[09:12 - 09:31] And if we look at the HCL color space with the same visual where hue goes around the circle and the look from increases as you go out and lightness increases as you go up, we can see that it doesn't fill out the entire cylinder and that's because it's kind of just taking into account the way we perceive different colors.