 So much better doing these face to face again. Isn't it? Yeah, it's just it really feels less awkward like this Yeah, the conversation just just it just it just flows. Yeah Jake I Want to talk about kind of spaces. Why are you making the font so small? Do you know so okay when we were doing the lockdown stuff that your episode on Gzip? Mm-hmm Someone in the comments pointed out now my contributions that episode was occasionally going Hmm This is interesting and you decide you will now please tell me more information You will now hate on my slides because you want to make more contributions than just that No, well in that episode I like because it was on a teleprompter. I was really struggling to see The slides so like I could hear it sounded interesting and I let you know that But I didn't really know what was going on until I watched the edit So I was like one the studio we've got a screen with the slides So I'm gonna be able to it sermon is gonna do episodes and I'm gonna have meaningful contribution because I'm gonna be able to see it. I Tiny you know what? I'm gonna blame you Because this is a new slide template because last minute changes. I was bigger before Yeah, I could have fixed it, but I didn't I was CSS is hard color spaces color spaces. I'm flattering myself We are not talking about all of color spaces because it is a huge topic And it involves humans and their perceptions and that makes things inherently hard. Yep We're gonna talk about colors and spaces Do you know what the title sounds perfect? It does but it might leap you and we're talking about more things We're going to one aspect which I find really interesting. I still don't understand this entire topic fully Okay, it's hard. I'm not even sure I get this all everything perfect, but you know some real expectations Yeah, I'm gonna I'm gonna channel my my inner white dude and just make a video about it. Anyway, fine So let's let's let's do that. So Jake look at this. I know this one. Yeah red. It's red Yep, if I told you that this is F F 0 0 0 0 would you believe me? I would leave you. It's not it's this Because the actual red red is this and you can see all that's that's actually more red It did get more red. It did get more red. Yeah, I guess what what this leads to is what does F F 0 0 0 or 2 5 5 0 0 actually mean like it obviously means the reddest possible red, but By measured by whose abilities it can't just mean the reddest possible red on The screen that you're using because then that would mean everything looks different everywhere and that would be awful I mean, I don't think designers would like that the answer if you want that I feel like I've already lost you No, I'm well, I'm going back to my default mode of this is interesting. So I'm a please tell me more information The answer is that s rgb tells us what these numbers mean and that is a color space It's that thing you select in photoshop to make the pictures look correct Well, the interesting thing is that s rgb is just one of many many many color spaces out there And for historical reasons, I probably don't fully understand is that that's the one that is Pretty much guaranteed to be fully displayable everywhere Every device that has colors can probably display all the colors in s rgb And that's why most of the web Is s rgb if you define a color in css these coordinates mean this is s rgb in s rgb in itself defines Which reds which which red is the red which green is the green and which blue is the blue And what happens when you mix them and so on and so forth that's all defined in this s rgb colors, so the intention here is that f f 0 0 f 0 0 on one screen is going to look like f 0 0 number screen if they're both using s rgb and are calibrated But yeah, yeah, at least to close it to the value Now the question of the the thought is that you know s rgb says okay The red is for example this wavelength of red and the green is this wavelength And you can mix those colors to create all the other colors Now when you have a screen the screen might say well, I don't actually Have that exact red pixel that you're assuming I have so I need to convert That mix of color that you are giving me an s rgb into something that the pixels in my actual physical screen can Put out so how does that conversion work? And that's actually a bit complicated and what what happens here is c i e x y z And if that isn't a great name, I don't know what is all right I've literally never heard of that so like you know this on these episodes. There's a little bit of You know games of like oh s i d b tell me more about that. I have literally never heard of c i e And we are going to basically derive C i e x y z ourselves a little bit all right today because what that is it is the biggest a very big color space that can Point or that can describe Every single color a human can perceive the average human can perceive TV with this on You will find out why not okay, is it probably because but it is some of them would actually give me sunburn It's it's more that it's more of a mathematical construct and we'll talk about this But it is the one that is used as the common denominator more or less between all other cover spaces because it can describe every possible color Instead of having a conversion from s rgb to every single monitor out there And for all the other color spaces to every single one else where we have one Base color space c i e x y z So we can convert from a color space to x y z and then from x y z back to the device and vice versa And that's how color spaces work But let's talk a bit about how they got there because that's actually a really interesting story all right So i'm going to assume Now we can all just accept the fact that light Is an electromagnetic wave that our eyes can perceive And depending on the wavelength We see a different color I'm not going to go any deeper into that because I actually don't know it any deeper than that But I think we all kind of know from school that you know some An electromagnetic wave with 650 nanometers length will be red or will appear red to us At least with our eyes other eyes. It's all perception What is red it's all in the brain and it don't think about that too much because it gets difficult Got you But this is kind of how we think about light and the colors that we see when those waves are around now We have known for a long time That we have three cones Perceptors in our eyes red green blue Actually, no, but yes like not at all with those They're actually the only thing we have a proper red perceptor, but we have three Different cones in our eyes that react to different wavelengths differently And that kind of lets you assume that hey, we can see all these colors even though we only have three cones Maybe in the inverse we can Create the same stimulation of any given wavelength with just a combination of three base wavelengths Because that's kind of how it seems our eyes would work. Okay. It's not red green blue. What is it then? I'm actually not talking about that, but you can look it up on Wikipedia. I want to Okay Will you carry on so they did in the 30s? Oh, you're not not now All right. Sorry. Sorry. Okay. Later. I'll link to it You can you can read the link in the description once this is out on youtube. All right. All right. Come on then So I did an experiment in the 30s and what they did is they put A specific wavelength on one side And they had three individual wavelength On the other side and asked humans to manipulate the intensities of these three Left side bulbs to match the color on the right hand side Okay And with that I could basically map out that every single wavelength could be emulated By those three basic colors the primaries as they're called And this is the graph that came out of an experiment It was a very long and tedious process and lots of humans participated And so this is the CIE experiment and created the CIE RGB color space Now if you look at this Or if any astute observer looks at this it goes like what does a negative intensity Actually mean because you can turn the light off or you can turn it on But what does negative mean? Yeah, I've never seen one of those lights before Can I buy one? So on the x-axis we have the wavelength of the color on the right hand side And then we have the three curves on how Intense you have to turn up that individual light to match the color It turns out that certain wavelengths There was no configuration of these lights to get the exact same color They could only do that once they added light to the target And that and if you think about mathematically Like we have some red and some plus some green plus some blue equal that wavelength Sometimes they actually needed to add red to the target value Which is the same as subtracting it from the other side, which is how these negative values came to be So this is actually interesting that means that doesn't actually contradict the original statement You can there's still the idea that you can create all perceivable colors with just three Primary colors just not those specific three, right? So there were colors that just couldn't be emulated, but that doesn't necessarily defeat the original idea So what they now basically they took this diagram And they put it into a 3d diagram we have to go 3d for a second bear with me, right brace for impact. So What you see here is we have each of these colors of our lights on one axis And then for each wavelength that was matched by a human We put a point in 3d space and we get this really nice curve And you can see that for example, it goes into the negative red red axis quite a bit Which is also what we've seen on the graph And what they said well, this is actually helpful because even though with these three Primary colors we can't create all possible colors We can now just use math. We know math math is good We can figure use this to figure out which colors could actually create all possible colors that we can Pretty which three primaries and they did And that's xyz Now There's a couple of interesting things about xz a it's a purely mathematical construct They used the data from the experiment to create three new colors that mix into every possible color They also arranged in such a way that the y-axis is pure luminance So going up and down the y-axis only makes things brighter or less bright The other fun fact is that x, y and z are imaginary colors They are colors that don't actually exist or don't map to any real known wavelength. So it's lab color The the kind of a close Real we're going to talk about the end. This is why I don't like no, it's a really good point So it's yeah, it it really confused because we now have Three colors that we can mix To get all human colors Every possible color we can possibly perceive But these individual colors don't exist And that's why I mean it's useful as a conversion space to go from srgb to whatever your display can do because both these aren't by necessity real But temporarily on a pure mathematical sense going into imaginary cups is fine because we're going back to real Colors afterwards. So that's it's not useful as a real device colors And that's why you can't buy a tv that can do x y z because the primary colors don't exist. Well Well, there we go. No new tv for me The second observation is now that this is about matching a specific Light intent like a specific light being shown on a screen as it was happening in this experiment But actually we don't care about intensity. We only care about chromaticity the actual color So what really is interesting is the ratio between the colors If you keep the ratio like two parts red one part green the same just in different amounts It just gets brighter, but the color stays the same And so like oh it actually means we can Remove one dimension from here because mathematically speaking that is equivalent to projecting on a triangle that doesn't really matter So when you say brightness here, we're talking more about intensity right in a way that like Pink isn't a brighter red like just because it's more white specific chromaticity But you can make it a really bright red that burns your retinas or a really dark white glimmering in the distance But it's the same color right just a different intensity. Okay, so what they did is they basically removed the intensity dimension from this diagram And now brace yourself. All right This is what comes out Stood on it But that's something that probably many people have seen before because this is the very famous x y chromaticity diagram I should say that again. No The x y chromaticity diagram. All right, which is Always used when we talk about color spaces how much color they can represent And at the same time how much color they cannot represent. So the idea is s i g b P3 rectoing 20 can all fit inside this That's exactly what I want to talk about next. So if we talk the original experiment that had these three colors r g and b These coincidentally red green and blue colors Had this r here and form a triangle And because the way this experiment was done, we know that this is an additive space So if we take two points in this diagram and we add the coordinates What comes out is the color that also happens when you add those things together as light Right. So that's quite handy That also means that if you have these three primary colors these three points Every color that you can mix in the real world with those as lights are inside this triangle And now you can also see why we had to go negative with red because there's a whole bunch of colors outside This triangle So you can see that the the the the shape the out the the curvature on the outside has all the the wavelengths on it So the 520 nanometers was like a turquoise and it's way up there and can't couldn't actually be matched by this c i e r g b triangle without going negative red I guess That kind of explains to an extent why we went negative on on that curve and how this is Reflected here Now the other question is of course s rgb we use s rgb pretty much everywhere. How big is it? It is very small Not much smaller Well, one thing actually that's a good point It's important to note that this diagram is not linear with human perception what might seem a big distance In here might look very like very close colors physically or the other way around towards the edges It's larger than it looks and it's just because two points are close doesn't mean that they will look like similar colors to us This has this diagram has Almost nothing to do with human perception. It's just about mixing colors All right, so we have s rgb here and now basically the xyz color space is just used for this conversion It's a purely mathematical construct And what I found really interesting after learning about this It can actually find the coordinates of each point of the triangle For example on wikipedia. They're right there. There's the x and y coordinate for red green and blue and the white point Which I'm not going to talk about today, but And then it's in the xyz Color space rather than s rgb. Yeah. Yeah Well it's in the xy and then you can convert from the the 2d xy back to the full 3d xyz There's a whole lot of math going on because again, it's all a purely mathematical construct Okay, but now we have a new css spec coming up or not coming up It's actually been around for a while which is the css color four spec and it also contains these In this case, it's for s rgb. What is interesting about this color this the spec is Is that it also adds other color spaces So we have always done colors pretty much like this in css either with rgb or the hexadecimal notation Yeah, but now there's a new syntax Which is this is pretty much equivalent We're saying, okay, this is a color the color is an s rgb and we want to go full red So we're going more to the webgl model of of using floats between one right, but now the the the interesting exciting part is that explicitly Mentioning a color space opens up the possibility of using other color spaces Like display p3, which actually has been supported in safari for a while If you have a monitor like a macbook that can display p3 And something that's newer is the so-called rec 2020 color space, which is even more colors And i'm not sure if there is support for this anywhere just yet But yeah, that is Exciting rec 2020 is what like that when people refer to hdr tv's that tends to be rec 20 exactly It was an hd tv standard or something So Maybe people don't realize how big the difference is so i'm i try to make a visualization So this is like when you're trying to like show the difference between hd and sd on an sd tv Yeah, okay, okay, so I took this from our colleague adam Who did like nice gradients and on the right hand side is a gradient in display p3 on the left hand side Is s rgb now because we're all watching this as a video on youtube and everybody has probably just s rgb Monitors at home and even if they if it can do more the web probably can't as of yet So what I did is I basically Shrunk the p3 gamut Down to the s rgb gamut and applied the same transformation to the s rgb side. So we're saying that the same The the the difference between the two remained the same. Yes, obviously the right hand side is currently just s rgb Because this is all we have to work with but you can see how much more color we are gaining When we go from s rgb To display p3 and that is really interesting to see that we've been missing out on so many colors for so long I had screens for a long time. We supported this stuff, which we just can't do on the on the web well until recently So These three triangles the innermost one is s rgb. Yep, the middle one is p3 The outer one is rec 2020. So to that extent again, like You can't say because it's twice the distance. It's twice as much color but roughly as a Got as a rule of thumb. I guess the way s rgb pales in comparison to p3 I reckon p3 will pale in comparison to rec 2020 That's quite a lot of color. Yes. And that's why rec 2020 tends to need more than eight bits per channel That is the other problem which i'm also not going to talk about today is bit depth Which is often perceived as orthogonal but actually is quite related to this And it's also part of the reason why s rgb was used for so long because it works surprisingly well for Just eight bits. Yep And now lastly, I want to just touch on something that is Interpolation in color spaces because if you for example go from red to green in a gradient the naive way and the way css does it is to just You know decrease the red value and increase the red linearly from your start point to your end point Yeah, so red goes from two five five down to zero green goes from zero to two and it looks like this And you know, if you don't think about it, it's kind of fine But if you actually look at it, you're like wait, why isn't the gradient? Why is it kind of lopsided towards green and why is it kind of dipping to a muddy gray Sort of baby poo color in the middle. Yeah, that doesn't seem right. And the the the reason this happens is that human perception is not linear while light Is in it depends on where your perspective is. I guess what I'm saying s rgb has a so-called power function Which is probably better known as gamma gamma correction. Um, which is both modeled after how, um CRT monitors worked back in the day which have a non-linear response to the electron beam hitting the glass But also quite important because we humans are much better in seeing differences in low intensity light regions darker regions than the same difference in high intensity brighter regions So having more bits for the details in dark areas is better than wasting them on high brightness areas So we can remove That gamma correction and then we are in a space called linear s rgb, which is s rgb Without that gamma correction and then we can do the same interpolation again And it looks like this and actually looks much nicer feels more natural It feels like it's going to the intermediate colors that you would expect But if you think about if you look at you like wait, we're going away from red really quickly And it feels like you're green for a while. Yeah, it stays a lot a lot of green is there It feels like it's getting brighter. It's not a consistent brightness because what this does we have removed the gamma correction here So this means mathematically speaking the light intensity is consistent From left to right at every point in this gradient the light intensity is the same But we humans perceive different colors differently. So while it is in terms of physics It is actually consistent intensity to us. It doesn't feel like it is Which is why a green always looks brighter than a blue Exactly And this is now where as you mentioned earlier other color spaces like lab come in Because their goal is not to not to model how physical lights sources Add up and what we get in the end But what humans perceive And so lab is one of them and they're they have pretty much nothing to do anymore with x y z and the triangle And just points in there. They take a completely different approach But because x y z is the common denominator most of these human Modeling color spaces still give you formulas how to convert from and to x y z So x was he really is the the most fundamental color space that we used to convert from anything To anything and that's why it's so meaningful universal language of color space pretty much And so if we interpolate a color to between two colors in lib Isn't that pleasant Right, so it's taking the we don't get the baby poo middle section But it is a feels like a consistent brightness throughout and we have a fair amount of green a fair amount of red It's not perfect because humans are different and everyone and it's hard I think to figure out how a brain perceives the color But I thought it isn't because I never really questioned that the gradient in s rgb looks bad until I saw Linia I was like oh linia is so much better. Well, I I had always seen it as bad But I just thought well, that's sorry That's that's the cost of going from two completely different colors pop a different cuddle in the middle If you want it and whenever I do a grain like I said put yellow Brighter yellow manually in the middle or something like that as a third stop But yeah, you're right just going Straight from red to green for lab Seems pretty natural and as well this color space is also becoming available through that css spec And so we will be able to to actually just say just interpolate between those these two colors Using this color space and it will hopefully give us a lot more capabilities on making things look a lot nicer So if you want to know more here is a very tiny link to this Great Three two one Three two one Now the audio can be in sync You know we we started doing that when when we were on lockdown and we thought if we do three two one clap three two One clap then it's going to help the the editor. It turns out like a year and a half later They're like, oh no, no, that doesn't help at all. We just enjoyed you doing