# Understanding color (Google I/O &#39;17)

distribution It’s a description of the wavelengths that the object can reflect We call that the reflectance So some of the wavelengths will be absorbed So for instance, a black object absorbs almost everything that’s incoming, and a white object will reflect pretty much all the wavelengths So, to perceive the color of an object, what happens is we have light come in It bounces off an object Some of it is reflected, so we just multiply the two distributions Then it hits our eyes and we get the final perceived color What’s very interesting here is that because it’s a multiplication, any combination of light and reflectance can yield to the same perceived color in our brain So a very simple example is that, if you have an orange object lit by white light, you’re going to see orange, but if you have a white object led by an orange light, you’re also going to see the orange And our brain does a lot of post-processing really to help us understand what is the color of the light, what is the color of the object And a few years ago, there was this famous example of the dress, some people were seeing it in black and blue, some people were seeing it in gold and something else And that’s exactly what’s happening, is that some of us were interpreting the results differently And nobody was wrong It’s just without the context you can’t really know for sure So we can swap the colors, the distribution of the light source, and the object, and we’re going to see the same result So that leads us to something called the Chromaticity Diagram It was standardized in 1931 by the Commission Internationale d’Eclairage, CIE It’s a French commission, apparently And it represents all the colors that we can perceive as human beings So on that horseshoe shape, the outside edge is called the spectral locus It represents all the pure colors, the pure spectral colors So that the spectrum of colors that we saw in the previews diagrams actually bands around that edge all along And everything in between, all the colors that we can actually see, are a mix of all those different wavelengths So it does this weird shape It’s not a rectangle or anything And there’s a lot of colors that live outside of that spectrum We call them the imaginary colors because we cannot see them No matter how hard we try, you will not be able to see those colors There are also multiple optical illusions that you can find online that will help you find those colors It’s actually really weird– not everybody can see them or perceive them There’s one, for instance, where it shows you a blue rectangle for one of your eyes and a yellow rectangle for your other eye, and the way I see it is this really weird color that you can’t really describe that keeps changing from blue to yellow but never stops on one of those two colors The visible spectrum is actually a little bit more complicated than that What you’re seeing is a slice, it’s a 2D slice There’s a z-axis that’s coming towards you, and that is the brightness So the footprints at the bottom, this large footprint you see, is the dark colors It’s because our eyes are better at seeing dark colors than they are at seeing light colors We’ve seen what colors are for us as human beings But you know, everybody’s a developer, I think, in the audience, so the real question is what is called for us as developers? What does it mean for your application? So color really is an [INAUDIBLE] scheme for brain sensations And the formal definition is that it’s a tuple of numbers, or a list of numbers, defined within a color model and associated with what we call a color space And we’re going to look at some examples to make you understand that So here are some of the color models that you may be familiar with RGB is one of the obvious ones I’m sure everybody has used that CMYK, if you have ever printed a picture or a book or something, you might have also dealt with it And there’s another one for instance, called L*a*b There are others There’s xyz There’s many others What’s interesting is that the color model defines how many numbers we need to define a color So you’re used to RGB to three colors, to three values, but CMYK requires four values, for instance So the one that we’re interested in today is the RGB color model It uses a triplet of values– hence the name And I’m sure most of you or all of you are familiar with the hexadecimal notation So there are many ways of representing the tuple of numbers This is one of them It is pretty popular, especially on the web You have probably used it a lot on Android when you want to pass a color directly to one of APIs This is a pinkish color So this is the same color represented as a triplet of 8-bit [INAUDIBLE] integers You are also most likely familiar with it This is something we use a lot on Android when you set the color on the paint or when you use the color to try to extract the red component of a color And this is another notation This is actually the one I prefer This uses floats So the values are between 0 and 1 And it’s interesting because it’s more versatile

You can use it to represent [INAUDIBLE] colors And we’ll see that Android actually makes use now in O of the float notation to have negative colors and colors that go beyond 1 So the big question is, once we have those numbers, what colors do they actually represent? So I told you this is a pink But you’ve seen that spectrum of colors There are many, many, many pinks There’s actually an infinity of pink So which one of those pinks does this represent? So to reproduce colors, all of our displays use additive light So, we use red, green, and blue in our TVs, our phones, our computers, our old CRT monitors And they just mix those different lights So the numbers that you just saw, the RGB triplets, it might sound obvious, but they’re an intensity for each one of those lights So let’s say we pick three lights We pick a green light, a red light, and a blue light And they’re not perfect spectral lights, they’re just random lights that you found They are found somewhere in the visible spectrum And together they form a triangle So when you have an RGB color in your application, you can only represent one of the colors within that triangle You cannot represent colors that live in the entire visible spectrum That triangle is what we call a color space, and there’s an infinity of them Depending on the three lights you choose, you can represent any of an infinity of color spaces So here’s, for instance, one of the widest color spaces we could create The problem we have is that with a triangle with just three lights, we cannot encompass all the visible spectrum We have to choose a smaller slice So this one in particular is called the [? IW ?] wide gamut RGB color space There’s no device that I know of that can capture or recreate this color spectrum, this color space And the problem is that if we wanted to create a color space with RGB that contains all the visible colors, we’d have to create lights that are in the imaginary space So lights that we cannot perceive because we’ve seen that our eyes cannot perceive outside of that horseshoe shape The color spaces are more complicated than that So color space is actually defined by three components The first ones are called the primaries There are three of them Then we need a white point And then we need something called transfer functions So this might look like a complicated diagram, but what I did is I’ve put the visible spectrum on the left, and I’ve overlaid three triangles that represent three common color spaces that are used for still images So the smallest one you see in the middle, the blue triangle, is the one we call sRGB I’m sure you’ve heard that term before sRGB stands for Standard RGB, and it was designed in the ’90s And it kind of matches the reproduction capabilities of the CRT monitors of back then And to this day, it’s still used everywhere It’s pretty much the universal color space, the only color space that you can count on There are other color spaces There is Adobe RGB, for instance It’s the orange triangle Because it’s bigger than the sRGB color space, we say that it’s a wide color space or it’s a wide-gamut So the three vertices of the triangle, the triangle is something we call a gamut And then there’s something called ProPhoto RGB that you can see extends beyond the visible spectrum And this is not a color space that we use to actually represent colors on the screen It is what we call a working color space For instance, when I take a picture with my camera, my camera is set to Adobe RGB, so it captures everything in the color space that you see on screen Then when I import my photo in Lightroom, Adobe Lightroom internally works in ProPhoto RGB And it won’t be able to recreate all the colors that it’s working with on screen, but the idea is to have as much precision as possible So you can ignore this kind of color space for your needs on Android applications So I said a color space has three primaries, and the primaries really are the coordinates of each one of the three vertices of a triangle in that chromaticity diagram, in the visible spectrum So they identify, when you [INAUDIBLE] so it’s that you want a color that’s red equals 1, green equals 0, blue equals 0, it tells you what red we’re talking about And if you look here on the screen, sRGB and Adobe RGB, when you say red equals 1, they have the same exact red, but ProPhoto RGB has a different red So it’s two different reds for us, and then they [INAUDIBLE] for computers, We’ll take a look at that And then we also need a white point, and the white point is the same idea, it gives us the coordinates of white in the color space, and we’ll get back to that So I also mentioned transfer functions Transfer functions are a little bit complicated That’s where a lot of math comes into play You’ve probably heard about them under the name gamma, so if you heard about gamma correction,