0:03
The first color specification system we're going to talk about is the RGB.
It's a very popular color specification system,
and RGB stands for red, green, and blue.
And it's very commonly used in
digital devices to describe color in digital devices. Why that?
Well, one important reason is that monitors
are built in a way that these three colors are used.
These three primary colors are used as the basis physically to represent colors.
This image shows you very zoomed
in image of how a pixel of an LCD screen looks like.
So, if you look very, very, very closely,
you'll see that every single pixel is made of three colors, three lamps,
and by tuning the amount of blue, red, and green,
we can create pixels of different colors and different intensities.
This is how digital devices normally work.
You can't see that,
but if you look closely with a lens,
you'll see that this is the structure,
the actual structure of a monitor.
There are many different technologies to realize that,
but the basis is always the same, amount of green,
amount of red, and amount of blue.
Now, if we represent the RGB space as a three-dimensional space,
and basically as a cube that shows
all the possible colors that can be created by specifying different amounts of blue,
green, and red, this is what you obtain.
This is a representation of the color cube obtained with RGB.
The image that you see on the right,
shows you a little bit of
some important colors that you can obtain by mixing these three values.
So, starting from the origin that is completely dark is actually black.
As you move in different axis,
you obtain different colors.
So, for instance, if you go up only in one direction, you'll get blue.
If you go down in only one direction, you'll get red.
And in the other one, you'll get green.
But then, you can also mix two of these colors.
For instance, if you mix blue and red, you'll get magenta.
If you mix blue and green, you'll get cyan.
If you mix red and green,
you'll get yellow in different intensities.
Another thing to notice is that,
when you sum the three of them,
all with the same value,
so the diagonal that you see in the middle,
you'll get different shades of gray,
and the maximum value for the three axis,
so one, one, one,
you'll get pure white.
One thing I forgot to say is that in order to create the cube,
the RGB values have a domain that goes from zero to one.
So, zero is the minimum and one is the maximum.
So, the point in the cube that corresponds to zero, zero,
zero is black, and the point that corresponds to one, one, one,
or sometimes is also specified as 100 percent, 100 percent,
100 percent, so, a scale between zero and 100,
you'll get pure white.
And combinations of these values lead to different colors, okay?
So now, let me give you live
demonstration of how it looks like to use the three channels,
RGB, to specify some colors.
So, in this interactive demo,
you can see that I can change the amount of red,
the amount of green,
and the amount of blue.
And as I change the amount of each of these colors,
the final color changes dramatically, okay?
So for instance, if I do lots of red and lots of green,
I get yellow, right?
If I do lots of green and lots of blue,
and I remove red, I get cyan.
If I have all values close to zero,
it gets very dark,
and basically to black.
If use the maximum intensity of all of them,
I get closer and closer to white.
Okay, now, one interesting problem with the RGB color space is that,
it's not particularly easy to generate colors
in ways that are natural and useful for visualization.
So, let me give you an example.
For instance, let's say that I want to have yellow,
but at different intensities of yellows.
So, first of all, I have to know that yellow is obtained
by having roughly the same amount of red and green.
If I have too much green or too much red,
I don't get yellow, I get different colors.
So, I have to know that they have the same amount of red and green.
And if I want to change the intensity,
I have to change the intensity of these two values at the same time,
which is not necessarily natural.
If I want to obtain another color,
it's not necessarily intuitive how to obtain this color.
Let's say, I want to obtain brown,
how do I get to brown?
If I want to obtain, I don't know,
a specific kind of blue,
or orange, how do I get to orange?
It's not necessarily intuitive.
As we would see later on, especially in visualization,
we want to be able to specify color mainly by
describing the intensity of the color and the color type.
I want a red, I want a green, I want a yellow,
I want a blue, I want an orange, and so on.
And specifying these colors is not natural in the RGB space.
And as we will see in a moment,
that's a problem with RGB and that's also the reason why it's
not particularly useful as a color space to use in visualization design.
In general, one thing to remember is that,
we are interested in manipulating colors and using
color spaces in a way that is closer to the way we perceive color,
and we want to describe color.
And even more specifically,
the way we want to encode color in visualization by
mapping properties of the data with properties of the color.
If we want to do that in a natural way,
we have to use a color specification system that is more natural.
Enrico BertiniAssociate Professor
Cristian FelixPhD. Candidate
