Hello, my name is Bishop Zara, and I'm a designer, programmer, amongst other things, but mostly I'm a storyteller.
And so I'd like to tell you a story about color.
So our story begins with a really simple question.
When I look up at the sky and I see a color, and I call it blue, and you look up at the sky and you see a color and you call it blue,
how do we know that we saw the same thing? And we're sure we both called it blue, but how do we know it's the same color?
Science! Right? We can measure it. We're Americans. That's what we do. Measure things.
So yeah, scientists try to measure the problem and they're like, whoa, it's complicated.
There's like all this radiation and there's photons and waves and all this stuff bombarding us constantly.
And so the question becomes, right, how is it that the physics, that those things that's bombarding us constantly, end up in our heads as the thought of the color blue?
And the problem becomes even more complicated because some people don't see color at all.
There's like 5% of people who are colorblind. And then on the other side, there's 5% of people who have an extra cone.
And they can see even more colors than the rest of us. And it's not like 50% of women, 8% of men have an extra photo pigment that allows them to see more color.
One study showed that 36% of the people they tested had genetic aberrations in their visual cortex.
So their biology didn't even work the same way as the measurements that we're about to take.
So let's get a clear picture on what we're trying to talk about. Here's a color, this particular shade of green, patina green, named after a kind of rust.
And Pantone, very nicely, they provide a machine readable ID number as well as a human readable name that we can all call it.
And then the things we see on the right, those are color models, CMYK, RGB, etc.
Each one, you can see that's how they describe that particular shade of green. It's just a bunch of numbers.
But that's what color models are. They're simpler forms. They're just ways of describing colors so that we can always get back to that exact same shade of green.
So the first big color model, CMYK, was invented actually about the same time as RGB was invented.
But it was invented for printing, printing, printing, printing. And C for cyan, magenta, yellow, and K for black.
And as any painter knows, if you take all the colors, you just mix them together, you don't get black. You get this muddy brown.
So they needed that fourth color, black. And CMYK is about 1870, 30 years before that half toning had been invented.
And so that was just like pointillism in painting. It's the idea you're going to paint really tiny dots right next to each other that are different colors.
And your brain, they're so tiny, you can't see the dots. So it just kind of mashes them together inside your head and invents a color that really isn't physically there.
And so this one particular ink company unveiled this four color process printing.
Before this, people were printing colors with like 10 and 20 different passes on the same image in order to make color imagery.
The four color process was much reduced from that. And they found with just these three colors, cyan, magenta, and yellow in different combinations.
They could paint a whole wide range of different colors. And then black gave them really rich dark tones as well.
So that took about 50 years of adoption before CMYK was the printing standard across the United States, across the world.
1956, Pantone Incorporated released a formalization of the CMYK process color, process colors, as well as like 500 other spot colors that they said didn't exist within the CMYK region.
You can't print with CMYK. So it begs this question of like, what is it that our eye can see? And what can CMYK represent? And what is this difference between the two?
So we asked the mathematicians and they give us this four dimensional graph.
I mean, before they give us the gap, they're like, hey, this is a super complicated problem.
I mean, aside from all the biology stuff we were talking about a minute ago.
So the colors in your eye are detected by cones and it would be really nice if there was one cone for red and one cone for blue and et cetera.
But reality is just a little stranger than that.
So the cones have to go off in like combinations in order to signal different colors.
And then the cones don't grow in your eye in a consistent way. So there's uneven distribution of them.
So when you look to the right, you have a different set of color sensitivities than when you look to the left.
And then the angle of light also matters. So the exact center of your focal of what you're looking at is has one has a really high set of color sensitivities.
And then your peripheral vision around that has a different set of sensitivities, right?
And these problems go on and mathematicians just generalize and generalize and generalize.
And they eventually come up with this four dimensional graph that the three dimensional graph they call a gamut.
They're supposed to represent the full range of colors that the average human can see.
But they've averaged so many things that no one human's gamut actually looks like that.
All of us are pretty much all of us are different.
But this is supposed to be, it's a place to start at least. It's the general middle ground.
Now we can see here that like green, green is actually like the whole backside of this object and yellow.
It's just like tiny sliver at the top.
So then mathematicians, they generalize it even further.
They take just a 2D slice of this 3D object and that's the shape that we see over here on the right.
It's called the gamut and it's supposed to represent the full range of color that the human eye can see.
And you can see CMYK and RGB mapped here onto the gamut and they overlap.
They can both have some unique abilities, but neither one of them take up the full gamut.
So this area out here, that's where the spot colors were that Pantone created that were colors that CMYK couldn't represent.
Then where does RGB come from?
So red, green, blue relates to light.
And so that same year as CMYK was released, 1907, the Lumiere brothers were working on a thing called autochrome.
I love names, autochrome, it's such a cool name.
I don't know what it is, but I want it, autochrome.
I totally want it, so whatever.
Yeah, so they're working on, there was a new way of doing color photography.
It was an integrated color photograph and it worked on the same principle as pointillism, right?
Again, really at this really tiny level, we're going to paint a whole bunch of different colored dots
and your brain will mash them together to think that they're colors.
Now, academics at the time, we're talking about this thing called the color triangle.
And for them, the three primary colors were red, blue, and yellow.
And you can see that that makes green, just this kind of tiny sliver down here by yellow.
And yellow takes up this huge portion of the color triangle.
And we know from the gamut that that doesn't match the physical reality.
And when the Lumiere brothers had to decide on what colors they were going to paint at that really tiny level inside of color photographs,
they ended up choosing red, green, and blue instead of red, yellow, and blue,
because it more closely matched the physics of the light that they're trying to work with.
They're working on the physics, whereas what the color triangle was talking about is like,
kind of more like, what colors do people like?
Like, people really like yellow and they kind of don't like green.
It's true. People just kind of don't like green very much.
So that's more the psychogiography.
Whereas RGB came out of this physical reality of how color in light works and what is the real color region.
So then about 10 years later, Bauhaus is in full swing.
And Bauhaus is a school in Germany, and it had major influence on industry.
It created a lot of the design standards that we still use to this day.
At Bauhaus, color theory was a mandated class.
It was a required class for all students.
And Paul Klee, who's a very famous painter, he taught color theory at Bauhaus,
and his thing was like, you have to feel the color.
Right? And Kedinsky, another person who taught at Bauhaus,
he also wrote a book about color theory, he said, he took it even further.
He was like, you have to taste the color. You have to hear it.
It was about this sensory, evocative, emotional center for where color comes from or how it's used.
So what Bauhaus tried to do, what they said was like,
okay, if you have a photograph and you make it a black and white photograph, it's still a photograph.
It still has all the content of what it's a picture of.
So they said, well, let's just take the luminance values as one thing.
And then when you look at the color values, that's the mood.
That's how you create the mood is with the colors.
And then saturation ends up being the intensity of that mood.
So HSL, the color model was invented by Bauhaus.
And again, it took the photo values, the grayscales and the Q values as the mood
and the saturation as the intensity.
But I want to be very clear here. They weren't saying that blue is a calm color.
Yellow is a happy color. And red is an angry color.
Unfortunately, reality is a slight bit stranger than that.
Just like if I were to hit C sharp, just like one note on a piano.
That note wouldn't be triumphant nor would it be melancholy.
It's not until that note is combined into a major chord or a minor chord
that it starts to take on the mood.
And color works in the same way.
The mood value of a color photograph comes from the combination of colors that are in it.
And then the intensity ends up being a measurement of how forcefully that mood is portrayed.
All right, enough history.
So on to our beat down, RGB versus HSL.
Who will emerge victorious?
All right, we're going to try and keep score here. We'll see.
Gameth, yes.
So in terms of what the human eye can see, we talked about RGB versus CMYK.
But HSL is really, it kind of piggybacks on top of RGB.
It uses the exact same part of the color space.
And theoretically, you could map HSL to the CMYK color space just as easily.
So in some sense, it's a tie.
But in some sense too, HSL is more general.
It can be applied to any part of the gamut.
So then in terms of like how colors are transmitted across like cables,
like from your TV connected to the DVD player,
like what is the, how is the colors transmitted across that cable
or how are colors stored on a DVD.
Because the hardware is trying to match the physics,
RGB ends up being closer to the physics. And so that's what the hardware uses.
And it ends up being faster.
If you were to try and store, transmit those colors in HSL,
you're going to have to take it through a layer of translation into RGB.
And so that's going to end up being slower.
So in this case, RGB wins.
So let's look at color picker.
So on the left, we have an HSL color picker in Photoshop.
On the right, an RGB color picker in Photoshop.
On the HSL one, we can see the hue left to right, the amount of saturation up down,
luminance is a slider off to the side.
Whereas the red, green, blue one, we've got green in one corner, blue and down here,
red over here, black down here and over here.
If you want to make your color just slightly brighter,
you have to move the picker at exactly a 45 degree angle in order to maintain the same color.
I mean, try and find yellow on there. It's just like, where is it?
It's not user friendly.
It's not intuitive for people to use.
That's why Photoshop uses an HSL color picker as their default.
HSL wins that one.
So here we have histograms on the left.
We're seeing a image as a photograph and it's got a red cast to it.
When we pull up levels in Photoshop or any Adobe program, we see a histogram
which shows all the dark pixels over here, all the bright pixels over here.
We can see these three weird spikes.
There's nothing obvious about the image that would suggest why we have those three spikes.
We wouldn't know unless we separate the histogram into a red, green and blue channels.
Then it's really easy to see.
We can see that the red channel has been shifted to white and the blue channel has been shifted to black.
If we undo that shifting, we'll then balance the image that's called color balancing.
RGB in this case ends up being really valuable.
In terms of understanding the image, here's the grayscale values of the RGB channels.
We can't really tell much from them.
Mathematically, we could get something of value out of looking at the math readout of the RGB channels.
Looking at them visually, for instance, I couldn't tell that the back wall is blue
just by looking at these three grayscale images.
Nor could I say what is the most saturated item.
But if we look at the HSL, we still have the photograph here on the left.
This is the grayscale. There's still the contents of the image.
From the hue image, we can see that the back wall is blue.
Ziggy's shirt, even though it's really dark pixels and it's really low saturation,
we can tell it does have just a slight blue cast to it.
When we look at saturation, we can see that his hat thing is the most saturated in this bowl
and some stuff on the table.
Other than that, the faces are the most saturated.
That's exactly where they want our eyes to go.
The focal area, the thing you're supposed to be looking at,
is represented by the most evocative part of the image in saturation.
It's the most saturated part.
We can get a lot more information from HSL than we can RGB.
I think it's three to two. Let's see here.
This is Elmo does wrestling or something like that.
This thing on the left here is a vector scope.
This is a piece of hardware that used to be in a rack in every television station across the country.
Everything that went out over the air first got run through the vector scope.
The reason for that was because the way that the images were transmitted over the wire
was a derivative of RGB, there was no easy way to detect
when an image had too much saturation in it.
Instead, they made these machines.
They ran all the footage through them.
Around the outside here, we can see yellow, green, cyan, blue, magenta, red.
We can't quite see.
Then the distance from the center is the amount of saturation.
We can see that this image is completely illegal.
We're never allowed to be on television.
This is way outside of the broadcast safe regions.
The things that are legal to send on broadcast television.
These days, vector scopes don't have to be a piece of hardware.
It's included in Adobe Premiere, Final Cut Pro.
After Effects, every video software has a vector scope built into it.
Again, we can see this is an HSL control.
We have hue around the outside and then distance from the center is saturation.
HSL, again, providing us insight into the image.
Then, in terms of color coding, this is CSS.
This line at the top, we can see, uses a hexadecimal number.
The first two are red, green, blue.
This is still an RGB representation.
It just uses a different color scheme.
There's some letters mixed in there, whatever.
CSS3 enabled us to use RGB colors.
We can just put the numbers and HSL colors.
We can just put the numbers.
You have a color in any one of these three formats,
and then you want to make it just a little bit brighter or a little bit darker,
a little bit more saturated, a little bit less saturated.
Trying to mess with those RGB hexadecimal numbers, you will never get there.
You don't have to go out to another program, find the right color,
and then bring the code back.
Whereas with HSL, the second two numbers are for doing just that.
In fact, those HSL operations proved so valuable
that with CSS3, they also made functions for each of the HSL operations.
So if you do have those old hexadecimal numbers,
because that's what is in most of the old code that's out there,
instead of having to translate it to HSL,
you can just feed it into a lightened function or a darkened function,
or there's a function for hue and saturation adjustment as well.
So again, HSL providing a lot of value.
So one last one here, color cycling.
This is for people, if you're building interfaces for other people,
or whatever, if you're working in processing, or Max MSP,
or Touch Designer, or VVVVV,
or this was made in VDM Max,
but you can see the selector on the left,
they gave us RGB sliders to select colors.
So if you want to make that color just a little brighter,
you have three different sliders to move, and it's time consuming.
It's not a very good user interface.
On the right, on the other hand, they give us hue adjust.
You can see they made that a separate thing,
because it is kind of its own operation really,
but then saturation, brightness, and contrast,
those three go together really nicely,
and that kind of controls ends up being faster and easier to control
and just more human intuitive.
So I forget what the score is, but that's the underlying message.
The RGB is better for the hardware,
because it's closer to the physics,
but anything that interfaces with a human,
HSL is more intuitive and helps people do what they're trying to do faster.
So just a real quick cherry on top here,
Hollywood to the rescue!
So yes, Hollywood has a new color scheme called Float Color Space,
and we can argue about some people's gamut is bigger and smaller,
but Float records way outside of the visual spectrum.
They record into the UV light and into the IR light and the whole bit,
so theoretically it should include every color that the eye can possibly see
for all humans,
and Premiere After Effects video software already set up to do this.
We see the project window from After Effects here at the bottom.
If you switch that setting to 32 BPC,
you are in 32-bit color, you're in Float Color Space,
and you can work on those files.
Now, the bad news is, of course, there's no display devices for Float Color.
Yeah, I mean, there's the Cinema Projectors,
DCI-compliant Cinema Projectors at the movie theater.
That's the only place you can play your files right now,
but you know, this stuff is coming down the line.
Eventually there will be Float Color Display Devices.
And software is already set up for it, so with that...
Thank you, I'm Bishop C. Thank you to the Denver Creative Tech,
and we'll open it up for questions. Thank you.
I went to film school, and I was really interested in engagement, storytelling,
how do we captivate people with media, cinema,
and television were the biggest mediums available.
But these days, the web is the biggest medium available.
And I was always really passionate or interested in
how do we create those same effects that we create in cinema,
like those Hollywood movies that have explosions and things flying around in 3D.
How do we bring those same special effects and that same beauty to the web?
And now with the new HTML5 standard, we have full 3D capability.
I did a site for AT&T, you can arrange where your security cameras are,
where your door locks are, and then if a particular security alarm goes off,
your house flips into 3D and that little icon starts bouncing right on top of it.
Those wow moments, those moments of wonder or delight, where someone's just like,
oh, I can't believe it just did that.
I almost feel like the most valuable part is the mesh work that's created.
That's the experience that you need to have as a contractor.
You need to know a whole bunch of people with different skills that you can all work together with.
I like to see those people, everybody getting together, getting into it,
and being like, yeah, we're going to crush this bug.
I really get nerdy about the conversations that happen between two modules.
They're like, hey, what's their password?
Oh, well, it's this and how they communicate back and forth.
But the thing that's going to keep you coming back to it is if you really just enjoy solving little puzzles,
you have to be passionate about not just the language,
but the thing that you're doing.
Are you solving a puzzle or making it beautiful or making it delightful?
And if that brings you back, then you'll keep coming back to it.
