 Oh, I don't feel awake enough to do this. Good High energy two or three I'm assuming this is your episode it is that's true. I don't remember making these slides That is possible that happen. Do you remember seeing them? I do remember seeing them We've done this before we certainly have second time round. I'm going to try and act as You know stupid as I did in the first episode. We know you that your memory is basically completely defunct at this point Absolutely like this will be a whole new experience all over again. Yep. Yeah making new friends every day some We did a video Now it feels like eons ago about color spaces. Yes, absolutely someone in the comments said it was the least wrong video on color Space and I'm like, you know what? That's the bar. I'm gonna strive for today as well Okay, we're not gonna manage because there's more there's more on color spaces that I want to talk about But if you haven't seen it if you you haven't seen it you should go back. I mean, I saw it I don't know. I was there. Did you see it or did you just to record it? This proof that I was in the room. It is I nodded along. You see did you pay attention? Who knows? Well, let's find out. Let's find out so color spaces we talked about this. Yes, if you don't know what this diagram means It's all in the previous video sRGB in that this the smaller one small triangle. Yes, P3 Rec 2020 that is correct and the well done have a cookie after we're done Thank you So the curvy bit is a a representation of the XYZ color space Which and inside this this colored bit those are all the colors a human can see Yes, and so these triangles form a subset of these colors that humans can see and The whole XYZ space was modeled through humans matching colors. So basically it tells you What happens when two colored lights mix? How do we as humans perceive that? I love I love this graphs like this because they're kind of a joke because Outside the biggest triangle there is a load of colors that screens can't represent which people are viewing this on a screen Yes, so the colored in bits are a lie. Yeah. Yeah, that's kind of rough It's like that. Those are green colors different green colors, but what green and the blue colors, you know similar, okay? You usually see these because you know Display P3 sRGB Rec. 20 are about displayed device capabilities And as you may know we have little pixels and red green and blue which emit light and then the slight mixes Inside our eye almost and we perceive the color so these Rectangular these triangles represent Which colors these devices can actually create by mixing the pixels and which colors they cannot? Yes, and people at home of probably watching this on I mean what one of the two inner triangles I'd say like it's less common to have a computer display Which is right 20 20, but even then our video will most likely just prescribe sRGB anyway Yes, so that's another layer of confusion that you know You just because you monitor can display a wreck 20 20 doesn't mean it will because if the media that is input into the device Says hey, I'm using sRGB Yes, yes, we're an sRGB series. Yes, it is RGB that exactly cool So these three color spaces as you said sRGB p3 and record Are actually available in CSS now. Yes So so far by default everything in CSS everything on the web pretty much was sRGB or turns out You know people who like colors Want access to to the other colors that are outside of the sRGB triangle? And so now We have this syntax to do that which is already kind of exciting that we have more colors So all these these color space are about giving you access to more colors and Safari actually has support for this like in Safari GP you can use these syntax and actually have this cool color picker thing Where you actually see whether the fancy color you're selecting is inside or outside the sRGB gamut Oh, that's so you know, you can see we actually don't get many new blues, but some new reds and a lot more Greens you get when way more greens look at that. Whoa much green Incredible and it kind of matches with the triangles we saw earlier So there's gonna be a lot of safari in this episode because it's it will be implemented chrome, but it's not even in canary yet So yeah credit to them for yeah, absolutely. It's great. Absolutely great. When you say not equivalent. What does that mean? So, you know, I Turned the first color sRGB 100 is as right as possible in sRGB Yes, we have just seen that what that, you know, this way p3 has more red Full red in display p3 is a different red than the red in sRGB Yes, I could have put the equivalent number in there But that would have been work that I didn't want to have to do XYZ is the one which is all possible colors and more and If you put a two in there, what happens? Does the red come out the monitor and There's almost too much red even contain within the screen even XYZ one zero zero is a color that doesn't exist Brilliant so that and that is actually we'll talk about that What does a browser do when you give it a color that it can't display or that potentially doesn't even exist full crash? Yeah, just like panic delete itself Otherwise it would break the universe and backwards compatible, right? Absolutely exactly So as I said, like we have these color spaces which are about giving you access to more colors But it's all just a subset of XYZ. There is also different perspectives onto XYZ Most notably LAB and LCH and we're going to talk about these now a little bit to explain how they're different So some of these are available in in Chrome, right? Well, so there's the There's the other one that's not RGB that we use which begins with an H HSL HSL So is that one of these perspectives? HSL. No, yeah. No HSL. No. Yes. No. No, that's great Brilliant explanation. Just move on. I went Australian and then added another. No, it's HSL is just a different perspective onto sRGB So it is in this has the same constraints Like you don't get access to more color by using HSL, but it is the same switch of perspective Like that you go from a a Cartesian coordinate system where each access the color to something it has an angle and Stuff which you do with with HSL, right? Exactly And this will actually happen here. So LAB and LCH are interesting because they are Perceptually uniform great keyword. So all of these are you don't need me. You're just congratulating yourself. Well done, sir My great keyword. Okay. Well, the thing is I see it thrown around so much and it actually It seems self-explanatory to people who already know what it means, but if you don't know what it means It's not self-explanatory. I don't know what it means. So I'll explain it to you. Thank you So all of these color spaces all of the XYZ stuff is Perceptual because it is based on humans perceiving colors and modeling a Space around how humans perceive it like you match colors and like oh, this is how I put this is orange I perceive it as orange and that's how XYZ was made, but it's not perceptually uniform Which means that you know you have one color and you add a bit of red to it And then you bet the same amount of red to it afterwards that doesn't mean you will see it as a Linear increment of redness in the color like the uniformity isn't there that like it could actually turn a completely different color technically But it's like XYZ and all the subspaces are about how light mixes and how humans perceive that mixed light Right. So the idea if you double the amount of red you as a human would look at it and go That looks like twice as much red even if it might not be no Yeah, no, that's actually not the case with XYZ so because yes, but with these ones Labelab with a uniform space that is the case especially around lightness we go Hey, I want to double the lightness you double the number and you get twice as bright a color Which is obviously very important for you know intuition around colors and when you pick your palates and stuff So let's start with LAB. This is The sRGB gamut inside LAB so every colorized pixel in this graph is A color that is inside RGB sRGB every pixel is outside of these is technically still a color But at least not inside sRGB, but just like XYZ There's also coordinates that aren't even real colors So that can be a bit confusing it can actually come with coordinates that don't represent any real color in the real world And it's just pointless in a way And so LAB has three coordinates LA and B hence the name L is for lightness is between Zero and a hundred and as I said sub uniform So if you go from hundred to fifty it's half as bright because it's half the brightness value, which is quite nice A is the red green axis B is the yellow blue axis It's not very intuitive, okay, I'm not gonna lie, but it is One of the first perception uniform color spaces and so here for example, you know We gain a 40% brightness on a we're going to minus 50 as a is the red green axis This is a nice green tone as rendered here By safari nice, but again, I feel like this is not necessarily very intuitive to use but as a rule of thumb both the ax and the b-axis go from I Think minus 130 to plus 130 to cover the human gamut Right, okay. So yeah, but then again covering the human gamut doesn't mean that your screen can actually Create that color with their pixels. So while you might have a real color It doesn't mean that it's actually a useful color on the web because I guess I'm laughing at it being 130 It's like why is it that but I magic number out of a hat Yeah, but we're used to using like 255 like for which, you know If you were shown if you show someone outside tech that it's like well, whether that number come from that's something They just made up. Okay. I'll get over I'm not sure where this comes from. I think it's just it's just a number Just just deal with it. All right. I'm dealing with it. So let's talk about LCH. So LCH is the HSL of XYZ I Want I want to see this in the museum. Is there a museum where there's this rock? That's like a nice sculpture doesn't was is this how it was invented? Did someone dig up that rock? I'm not like I was like spaces. I found the color stone And it's in a glass thing So I will say I don't find the socialization very helpful It's good Wikipedia, but I had to put something on the slide. Okay. Yeah, it's very pretty though So LCH is the same thing as HSL in that it has an angle and the lightness and the third axis here is Chromaticity It's more intuitive because you know, we kind of get used to like zero degrees is red and heart and 20 degrees It's green from HSL. Yes, what kind of things we kind of know. Is it the same here? It's exactly the same. Okay. The only thing it's really is that you the value you can use for C As you can see here depends on both other values like at zero You're obviously black at 100 your light but in the middle like you can sometimes go with chromaticity to 130 sometimes you can go only to 20 and Again, it is quite easy to fall outside the gamut which with LCH But it is a bit more intuitive. Okay to use So again, we can do 50% lightness 80 chromaticity zero degrees is a nice vibrant red a bit pinker here because chromaticity is Again can change actually what we usually perceive as you because of human eyes And when you're saying like you can fall outside the gamut, that's that would be the sRGB gamut, right? Yes, well, you can even fall outside the p3 gamut or Physical real-world color gamut amazing all of that is possible and it's actually a question like what happens if we give something That is outside the gamut and we'll talk about it a bit. Oh, I was gonna try and guess Well, the first thing it's already weird is that there's actually a thing in the specket I think is quite stupid because if I were to instead of 50% lightness here say 0% lightness. What would you expect? I mean, I would expect it to be black Right, it should be black Sorry does this it gives you a dark red. No, why? Stupid, okay. Actually, let me explain to you why it is Okay, but also give you hope in that the CSS working group of geese that is a stupid and they want to change it All right. All right, but I mentioned in the last video that XYZ is the common denominator that one that we use for conversion from one color space to another instead of like, you know going straight from color space a color space B every conversion goes via XYZ It's like the source of truth color space to convert between all the color space that are out there And that's exactly what Safari is doing So we you know we define LCH with or we give a color defined with zero lightness 80 chromaticity in zero hue And then they just look up the formula for how do I convert from LCH to XYZ and That's just straight up math. This is what comes out the other side Okay, and then they look up math. How do I go from XYZ to sRGB and that's what comes out No, and there's a negative number which we know sRGB doesn't do and so how Safari currently handles that because how you should handle is unspect effectively the clamps It looks every component and says a you're outside go between zero and one and so that turns into a Darkish red, right? Whereas I guess a proper operation would be to shift by you know some amount which would end up with Zero it's actually quite hard to figure out how to describe what you should do But Leo Varou and Chris Lee have actually a really good website called CSS.land slash Color picker? LCH We'll put a link in the description We'll put a link in the description and you can see like once you go to lightness 100 every color is white if you go to lightness zero everything is black and they have Dark up an algorithm that handles this correctly and this is most likely what is going to be added to the CSS color spec So that we don't get a dark red when we just specify zero percent lightness good Thank you, Leo and Chris that will probably be changed and fixed soon What's also quite nice actually I found that in the CSS color for spec There is actually a reference implementation of all these color conversions in a very readable in simple JavaScript It is mostly supposed to be red, but it does work if you want to programmatic red as in hang on That's an overloaded term in this video It's mostly supposed to be viewed with your eyes with your eyes consumed as text. Yeah, okay It's very clearly written so you really see how do you do all these conversions? How do you define the colors luminance and if you want to use if you want to do color operations programmatically? Leah also maintains color.js Which is a library that has all of these things baked in with more performance and actually a nicer API So that's something worth looking at I'm really happy that they've done this because I I've been reading some Compositing specs and stuff and it's written in maths, which I don't understand. I don't understand the symbols. I find it Hard to deal with like these one letter values and stuff. Here's a big sigma. Right. Yeah, thanks I'll take it. No, but and then being able to you know, just find well That's what I've been doing with this compositing stuff is going to finding a implementation written in C Or as a shader or something. It's like oh now I can we know code we can read codes don't do the math Give me the code exactly. So this is great and also very well commented. So definitely Worth a look. Let's talk a bit about how to mix colors because we've been talking about mixing light But CSS actually doesn't do that as of now because let's say we have you know, we have red and blue What is the color in the middle? Right what one yeah, so that won't be seven of each right like it's exactly so that's basically you look at each Component like ours one component the our value the green value in the blue but each called components and you just You have them like you what's in the middle between zero and two or five And you do it per component and the same you do if you want to do like a 75 25 weighting So you could do you know 192 and 64 and the same the other way around and this is how Color mixing works. Yes, and it's actually also how gradients work in CSS, right? So and now you can tell that actually when you do it just per component the color space in which you define a color has a huge influence On what the output of mixing is because you know in RGB. It's RGB, but in HSL It is H SNL that are now being looked at independently and a different color will come out of the mixing process depending on in which color space you want to mix and That is something they are now adding to CSS where you can say explicitly I want to mix these two colors I want to mix them in a certain weight and the mixing should happen in this specific color space So basically this says mix these cousin s RGB, which is the default anyway Yes, which is the one we just saw before but you can basically Define, you know, I mean this like P3 doesn't make sense because it's effectively just a subset of XYZ But you could put LAB or LCH or something in there Define your colors in one space and mix them in another So so it's the when we're saying slig b the The values it takes and not just the gamuts. It's also the the perspectives on those gamuts. Yeah, yeah, exactly Okay, can you do both because you can use can you say well? I guess there's no real such thing as as lab in SLR GB as there is it well, you can you can basically define your colors The way you define the color is completely independent of where you're mixing itself just writing a red I could write color display P3 or or LAB or LCH I see so you define the color in one color space and then for the mixing CSS will convert However necessary to do the mixing appropriately. So in the last episode you identified how gradients were All right, I'm holding on so color mix is The result of the color mix function is a single color, which you know is good. That's handy For gradients, we don't have a syntax yet They are thinking about adding Something like this and in additional syntax where you now also say I want the gradients to be mixed in a specific color space Brilliant hasn't been specced yet. So for the purposes of this demos I've just been creating 255 dibs next to each other and assigning a new color to each so we can talk about How this color mixing really affects? Gradients and the color mixing process. So you might remember this from last time. I'm mixing red and green and as you can see The color space at shoes is quite important. We talked about last time, you know an sRGB you dip to this darkish yellow Blurpy color that's actually not really nice. So you mentioned last time that the doing things in linear color is the is that XYZ is basically XYZ, which is I see and you can see like it looks nicer But actually you go away from red really really quickly. Yes, LAB very even very nice And LCH almost the same I personally actually like HSL the most even though it's neither uniform brightness nor is it It it's just you know, you rotate the hue, but actually I think in turn looking at this I like it the best what I really like about this syntax is if you go to an article about linear gradients and CSS one of the examples that will come up with is a Rainbow yeah, right and the way they'll do it is by having like a load of points Yeah, but I think you're saying here is that you would be able to do this with two points Yeah, you go from 0 360 you go from 0 360 and it would go all the way around the color wheel and keep everything And that's actually really really nice, right? But that is really really nice So yeah, this is the the red-green comparison where I think you know, there's some differences But overall it looks fairly similar like not a huge difference if we look at red and blue it gets it More different again. I actually feel like HSL Looks the best although LCH also looks quite nice. I think it will depend on what you're About to say something obvious yet depends on the visual effect you're going for but I think it's interesting because I as far as I know most Design tools don't allow you to choose yet which color space you want your gradient in but it it will become a Design choice because I don't think there's a clear winner It it really depends on your use case which color space interpolation looks best for what you're going for Yes, I think we can all agree that the sRGB one is not very good No, but the rest is is kind of like well now hold on because we've just been mixing primary colors like pure red and pure blue pure red and blue Pooh red we've only been mixing mate if you have blue poo. That's an issue. You're a smurf So we've only been mixing primary colors, so pure red pure blue or pure red and pure green and Let's mix non primary colors as things will get wild. How about yellow and blue? Wait, hang on These are very different. These are very different. So I think we cancel a green mixing sRGB looks sad. Yeah xyz Technically uniform brightness across but not necessarily what I was going for I think if I imagine going from yellow to blue I wouldn't expect an almost white in the middle and all of these are wrong I don't like any of them, right? It's a LCH and HSL again. Not good. It's kind of weird purple in the middle. I wouldn't expect Okay, that's a different same. I like LCH and HSL. They're not what I expected, but they're pretty. Yes That is that colorful a trip So it's like there's I don't even know Which one I prefer here, but again, I think that's the same advice applies What are you doing? What are you trying to achieve in your design? Yeah So I think it's just really interesting that for me it kind of It kind of became clear that for gradients The color space in which you're interpreting is part of the design choice and something that needs to be shared with the developer That implements the gradients because you know what they differently otherwise. Yes Adam's favorite is doing blue to white or blue to black because if you look at sRGB It's really hard to unsee once you actually dips to a bit of purple Yes, it does along the gradient and you usually don't want that when you go from Black to blue and so his his method of fixing sRGB is like to add as you said like an additional stop That counteracts the the purple shift I mean LCH and HSL just go full purple on you So like again like you can see like it all looks different and people just need to start working with these gradients and differently It's really interesting to see. Yeah, so the reason that sRGB is Not great in any of these examples is because yes, it's it's like all of them linearly interpolating But the values in sRGB are not actually linear. No, they have this gamma correction on top Which stems from CRT monitors, but is coincidentally also kind of how our eyes adapt to brightness Yes, it's like it's it's a it's a happy coincidence But it it doesn't work for color mixing and stuff So most of the time when you operate on colors You kind of need to remove the gamma correction and that's called linear sRGB or XYZ which is actually in this sense then in this scenario Full for the same purpose. All right one last thing I want to talk about Did you notice that HSL has a different text color than all the others I? Do notice it. Yes. Do you know why? Because it would be hard to read otherwise. It would be hard to read. Okay, and you know who made a color black. I It's you didn't know no CSS shows the text color. What because that's a new thing now There's a new function called color contrast Which you put in a color as a first argument and then you say versus and then you give a list of colors and Color contrast will choose the color which has the highest contrast to the first color Not fully automatically which especially you know in the context of dark mode or color animations can't be huge It actually has an additional Syntax where you can specifically define the WCAG contrast ratio Oh, that's and it will pick the first color in the list that qualifies so you can actually Express preference you express them in the order of preference. Is there a way to tell it to just figure out from the background? No, okay, because I think that's quite hard because you know it there's compositing and Transparency so it actually quite hard to figure out be a bit of a round trip at least yeah, okay Yeah, and then also it ends up being you know per pixel because if you have a background image like yeah Yes, it would have to be an average across the element. Okay, okay fine. I would rather have this and nothing at all Oh, right. I'm not criticizing this. I was just I don't know looking from ideas Here's So it is implemented safari and you can see like when it comes to green it switches the text to black because humans perceive the brightness of green much more than the other colors and I think that's gonna be great like with a lot more Color construction going on this will be super handy and speaking of that They used to be a proposal for this color syntax where you you take a color and you have modifier function to make it color lighter Like this stuff that's in SAS. Yes, everything like that. Okay, this is not gonna happen great in the syntax There's another syntax, but this all right. There's still tutorials out there talking about this Everybody should know this is not the syntax. It is has been removed from the spec. This is not happening anymore Instead, they actually opted for something more powerful because it turns out, you know Lightness or contrast is not easily talked about if you don't know in which color space you're working Okay, so what they're doing instead and I think it's a really nice workaround they actually allow you to define a color and Say I want to work in HSL. So use the color from this variable in HSL and then you get HS and L as a variables that you can use in calc expressions To do your stuff and so whatever you choose or that's HSL, LAB, RGB You will get these variables to do proper math on with your calc expressions So example if you're in LAB, you can just say okay add 20% lightness to my color and the color that comes out will be 20% lighter Which I actually think is quite expressive and is that fine even if the input color is not expressed in HSL? Yes, it will convert. So if you use the HSL function, but the primary color variable here points to something that is defined in P3 or LAB The browser will do the conversion give you the variable values probably do the clamping if necessary And and you can do math and that will allow you to do stuff like define some primary colors and everything else could be Computationally generated both the color contrast for the text colors But also lighter shades darker shades like at some point I do envision that we will actually just you know Define some primary colors for dark wood and light, but the rest is programmatically derived very nice from those colors Which sounds like a great kind of future to me. Yeah Yeah, so if you want to know more this was like a speech on of what is in CSS color 4 and 5 most of this in Safari coming to Chrome Hopefully in Q1 2022. All right. All right. All right. Yes I'm looking forward to it. I am too. So what you want? What do you want to? I mean come on Say your words and then