Color Spaces: Do YOU know the difference between sRGB, LAB and CIE XYZ? - HTTP 203

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 [Music] all right jake i want to talk about color spaces why are you making the font so small so okay when we were doing the lock down stuff your episode on gzip someone in the comments pointed out that my contributions that episode was occasionally going this is interesting and you decide you will now please tell me more information sir you will now hate on my slides because you want to make more contributions than just that i've got 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 well in the studio we've got a screen with the slides so i'm going to be able to it's summer's going to do episodes and i'm going to have meaningful contribution because i'm going to be able to see it i tiny you know what i'm going to blame you oh because this is a new slide template because last minute changes it was bigger before yeah i could have fixed it but i didn't 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 well you know what the title sounds perfect it does but it might leap you when we're talking about more things we're going through one aspect which i found really interesting i still don't understand this entire topic fully i think it's hard i'm not even sure i got 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 all right fine so go for it 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 ff000 would you believe me i would believe you it's not it's this because the actual red red is this and you can see oh that's that's actually more red it did get more red it did get more red so the question i guess what what this leads to is what does ff000 or 25500 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 i feel like i've already lost you no i'm i'm well i'm going back to my default mode of this is interesting surma please tell me more information the answer is that srgb 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 srgb 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 srgb and that's why most of the web is srgb if you define a color in css these coordinates mean this is srg and srgb 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 srgb color so the intention here is that the ff00 f00 on one screen is going to look like f00 on the number screen if they're both using srgb and are calibrated but yeah yeah yeah at least close-ish to that value now the question or the the thought is that you know srgb 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 colors that you are giving me an srgb 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 cie xyz and if that isn't a great name i don't know what is all right i've literally never heard of that so you know in these episodes there's a little bit of you know games of like oh sid b tell me more about that i have literally never heard of cie and we are going to basically derive c i e x y z ourselves a little bit 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 can i buy a tv with this one is that possible you will find out why not okay is it probably because but it is some of them would actually give me sunburn 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 allah cover spaces because it can describe every possible color instead of having a conversion from srgb to every single monitor out there and for all the other color spaces to every single model elsewhere we have one base color space c i e x y z so we can convert from a color space to xyz and then from xyz back to the device and vice versa and that's how color spaces work but let's talk a bit about how they got that because that's actually a really interesting story all right so i'm going to assume that 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 electromagnetic wave with 650 nanometers length will be red or will appear red to us at least with our eyes other ice it's all perception exactly it is red it's all in the brain and it don't think about that too much because it gets difficult yeah 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 but those that actually i think you think 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 where is it what is it then i'm actually not talking about that but you can look it up on wikipedia okay will you carry on so they did in the 30s oh 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 they did an experiment in the 30s and what they did is they put a special 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 the experience a very it was a very long and tedious process and lots of humans participated and so this is the cie experiment and created the c-i-e-r-g-b color space now if you look at this or if any astute observer looks look 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 what does negative mean yeah i've never seen one of those lights before so i buy one so on the x-axis we have the 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 and 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 of course which is how these negative values came to be so what this is this is actually interesting that means that doesn't actually contradict the original statement you can there's still the idea 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 oh bear with me all 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 right we can figure use this to figure out which colors could actually create all possible colors that we can perceive which three primaries and they did and that's x y z now there's a couple of interesting things about exit a it's a purely mathematical construct they use 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 there are colors that don't actually exist or don't map to any real known wavelength so is lab color the the kind of a close reel we're going to talk about near the end this is why i don't like no it's a really good point so it's yeah 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 are by necessity real but temporarily in a mathematical sense going into imaginary cards is fine because we're going back to real colors afterwards so that's it's not useful as a real device color size and that's why you can't buy a tv that can do xyz 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 that 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 the 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 looks like someone stood on it but that's something that probably many people have seen before because this is the very famous xy chromaticity diagram i should say again no the xy 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 sigb p3 rec 2020 can all fit inside this that's exactly what i want to talk about next so if you 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 shape the out the curvature on the outside has all the the wavelengths on it so the 520 nanometers is like a turquoise and it's way up there and can't couldn't actually be matched by this cie rgb 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 as rgb we use srgb 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 to us physically or the other way around towards the edges it's larger than it looks and it's just because two points are closed 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 srgb 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 i know it's in the xyz color space rather than srgb 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 for spec and it also contains these in this case it's for srgb but what's 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 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 srgb and we want to go full red so we're going more to the webgl model of using floats between one right but now obviously 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 yep 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 um but yeah that is exciting rec 2020 is what like that when people refer to hdr tvs yes that tends to be rec 20 exactly it was an hd tv stand or something so maybe people don't realize how big the difference is so i'm i tried 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 exactly 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 srgb now because we're all watching this as a video on youtube and everybody has probably just srgb 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 srgb gamut and applied the same transformation to the srgb side so we're saying that the same the rel the difference between the two remained the same yes obviously the right hand side is currently just as 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 srgb to display p3 and that is really interesting to see that we've been missing out on so many colors for so long i i had screens for a long time which supported this stuff which we just can't do on the on the web world until recently so these three triangles the innermost one is srgb 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 god as a rule of thumb i guess the way srgb 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 rec2020 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 srgb was used for so long because it works surprisingly well for just 8-bit yep 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 threat value linearly from your start point to your endpoint yeah so red goes from 255 down to zero green goes from zero to two and it looks like this yeah 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 yeah that doesn't seem right and the the the reason this happens is that human perception is not linear while light is in trouble it depends on where your perspective is i guess what i'm saying srgb has a so-called power function which is probably better known as gamma gamma correction 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 srgb which is srgb without that gamma correction and then we can do the same application 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're like wait we're going away from red really quickly and then it feels like you're green for a while yeah it stays 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 the blue exactly and this is now where as you mentioned earlier other color spaces like lab come in because their goal is not to men not to model how physical light sources add up and what we get in the end but what humans perceive and so lab is one of them and there 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 xyz so xyz really is the most fundamental color space that we use to convert from anything to anything and that's why it's so meaningful the universal language of color space pretty much right and so if we interpolate a color two between two colors in lab 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 and a fair amount of it it's still a perfect because humans are different and everyone and it's hard i think to figure out how a brain perceives the color but i found it interesting because i never really questioned that the gradient and srgb looks bad until i saw linea i was like oh linea 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 a 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 via lab seemed 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 there we go 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 to 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

Channel: Google Chrome Developers

Views: 10,987

Rating: 4.9541736 out of 5

Keywords: purpose: Educate, pr_pr: Chrome, series: HTTP203, type: Interview, GDS: Yes, random paint effects, http 203, http, http developer, developer, developers, chrome developer, chrome developers, google chrome, google chrome developers, google, chrome, Jake Archibald, Surma

Id: cGyLHxn16pE

Length: 25min 17sec (1517 seconds)

Published: Tue Sep 14 2021