 Welcome to this deeper dive into color representations. Colors are everywhere and as such we all have an intuitive understanding of how colors work. So how hard can it be to represent colors? It turns out to be very hard. Let's start with our GB, red-green-blue. We've probably all seen a color cube like this before and it is the standard representation of color because the way we mix colors is by combining red, green and blue light to make the other colors. However, it's bad for data visualization because red, green and blue are not so-called visual variables. I've covered visual variables before in my introduction to the core concepts of data visualization. For this reason it's popular to use HSV instead, Hue Saturation Value. Here the colors have been organized into a cylinder instead with the different hues going around the circle, the saturation going from inside to the perimeter and the value, the brightness, going from bottom to top. So let's play again, which are brightest? Here are five circles and I guess we can all agree that they are organized from the brightest on the left to the darkest on the right. But according to HSV, the three on the left are all equally bright. They have the same value. Another question, which are the most colorful? Looking at the same five circles, we can probably all agree that the most blue, the most strongly colorful circle is the blue one in the middle. But according to HSV, the three on the right are all equally saturated. They have the same saturation value. So what's happening here? With these circles I was moving from the top center, white, towards the perimeter getting blue and then down the value scale to black. So white to blue is saturation, blue to black is value. That's not how we think about colors as humans. For this reason we have HSL, Hue Saturation Lightness. Again the colors are in a cylinder, but now you see the whole top layer is white, the bottom layer is black and you have a lightness axis. The strong colors, the clean hues are going around the center at 50% lightness and you have saturation going from gray to these colors. So let's ask again, which are the most colorful? We are looking at the same five circles. The one in the center is the most colorful, right? Well according to this system, they are all five are equally saturated. What's happening here? I moved along the lightness scale. From white to blue to black is all along the lightness scale at 100% saturation of blue. And that's why we have HSL, Hue Chroma Lightness. Now it's no longer a cylinder. You see we have a single point representing white and a single point representing black. The lightness scale is still the same, the hue is still the same but we have now replaced saturation with chroma. And you see it's only possible to reach 100% chroma at 50% lightness and at 100% lightness or 0% lightness, white and black you cannot have any chroma. This makes more sense. So let's play the game, which are brightest? Here are five new circles. And again, I hope you would agree, they are sorted from the lightest on the left to the darkest on the right. But according to this metric, they are all equally light. They have the same lightness value. What did I do this time? I changed the hue. They were all 50% lightness. They were all 100% chroma. And I was moving along the hue axis from cyan towards blue. And cyan looks brighter than blue. This finally gets us to the C-Lab representation of color. C-Lab puts emphasis on human perception of color. Specifically, it's based on the so-called opponent color model. In C-Lab, we have three different coordinates. The first being L-Star, which is perceptual lightness, not to be confused with lightness in the previous metrics. A-Star, which is an axis going from green to red. And B-Star, representing the other opposing colors, going from blue to yellow. If we take the RGB cube from before, looking like this, and we map it into L-Star, A-Star, B-Star coordinates, it gets bent all out of shape and looks like this. But this makes sense. You see white being the lightest color, but yellow is almost as light, and green and cyan are quite light as well. Black is the darkest, but blue is pretty close. And red and magenta are somewhere in between. This is how we actually perceive lightness. Another important property of C-Lab color space is that it is perceptually uniform. That means Euclidean distances within these coordinates correspond closely to similarity of the colors, at least approximately. However, we still have the problem that these are not visual variables. Well, L-Star is, but A-Star and B-Star, red to green, blue to yellow, they are not visual variables. However, it's easy to put this into polar coordinates, and when we do that, we get this representation. The shape is still the same, we just replace the A-Star and B-Star coordinates with hue and a variable closely related to chroma that we discussed before. So to sum up, RGB is great for controlling pixels, but not much else. You don't want to use it for graphics design. HSV, HSL and HCL are all much better alternatives if you're trying to choose colors and make graphics illustrations. However, they are not great for mapping quantitative data in an accurate fashion. For that, you want to use C-Lab. C-Lab allows you, thanks to the perceptual uniformity, to make accurate representations of data as colors. However, it's complicated. It's not well supported on many systems, and it's tricky to use C-Lab because you have to map your values into this weird shape of colors, not a simple cube and not a simple cylinder. That's all I want to say about colors this time. If you're interested in data visualization, I suggest you go have a look at this presentation as well. Thanks for your attention.