What is color
space?
I
suppose you may be wondering, "What is color space?"
Well, we all know what space is. Space is essentially
a domain, a range of unique coordinates for things to 'exist'.
If we assign each primary and secondary color to a corner
in a cube.
...
we then have a color space. Thus, any color
inside the red-green-blue spectrum will be somewhere
inside this cube, within its eight corners. At the
first corner, we have black. Then, the three corners
immediately connected to black are red, green, and
blue. From there, we have our secondary colors.
This is because any new corner connected to a primary
is also connected to another primary. Confusing?
A little. Look at this, though: the green corner
is connected to the cyan corner, but,
the blue corner is also connected to the
cyan corner! This is why cyan is in that
corner! Blue + green = cyan! Last, we have white,
which is directly opposite black. White is the result
of adding all three primaries together (whereas our
secondary colors were the result of only adding
two primaries together). It is also neat
to realize that every shade of gray lies directly on
the line connecting the black corner to the white
corner.
The color cube, in solid rotating glory.
Now,
we know where black, the primary colors, the
secondary colors, and white go in the color
cube. What about some other color? Any color?
Well,
if you can make the color by combining various
amounts of red, green, and blue together, that
color HAS to exist in the color cube. All you
do is consider each color a coordinate in 3D.
Since you can specify any point in 3D by giving
the proper X Y and Z coordinates, you can also
specify any color in the color cube by giving
the proper R G and B coordinates. Thus, in
color space, XYZ and RGB are basically interchangable.
The color 15, 59, 82, and its position inside
of the RGB color cube.
| Red Coordinate |
Green Coordinate |
Blue Coordinate |
Resulting Color |
| 100 |
100 |
100 |
White |
| 50 |
50 |
50 |
Gray |
| 0 |
0 |
0 |
Black |
| 100 |
0 |
0 |
Red |
| 0 |
100 |
0 |
Green |
| 0 |
0 |
100 |
Blue |
| 100 |
100 |
0 |
Yellow |
| 0 |
100 |
100 |
Cyan |
| 100 |
0 |
100 |
Magenta |
| 15 |
59 |
82 |
Blue-ish |
|
Example 1: Laser and Lens
 I chose this image as the
first example because of the narrow variety
of colors it contains. The colors are
both extremely saturated, and mostly concentrated
around red and yellow. A small amount
of dark blue can be seen in the background.
The dark blue is apparant near the black corner
of the cube, resting slightly to the side of
the red axis. Against this white background,
it appears nearly black itself. What you
should notice is just how little of the spectrum
example #1 actually contains, less than 2% of
the color range is actually used.
At first it may have appeared the image
contained primarily red and yellow colors,
but after looking at the spinning cube,
you can see a sharp angle where the colors
dip into the bright purple area, containing
mostly red and blue, and not much yellow.
|
Example 2: Nature
 This image is a more natural
photo, exhibiting a wider range of colors.
Even here, though, we se the spectrum is relatively
limited, containing mostly gray, with some
tones of dull brown, sky blue, and green. Most
of the colors appear to be clustered around
the cube's gray diagonal, showing that purely
saturated colors are almost non-existant (with
the exception of green, which nearly touches
the side of the cube).
|
Saturation
|
 Saturation
is a measure of the purity of a color. A color that
is completely saturated is as "far" from
gray as it can get.
As I mentioned briefly before, any color near the
line which connects black and white will appear dull
and gray. This simple but important concept
is illustrated here:
 
This image has been very de-saturated.
The resulting plot in colorspace shows every color
revolves around the line between black and white.
 
Here is the original photograph, unmodified.
The distribution of colors in space shows a nice balance
between the grays and the more extreme colors (those
which are furthest from the gray diagonal line).
This ultimately gives it a vibrant, yet realistic
look.
 
This is a severely over-saturated version. Many
of the colors are very far from the gray line, almost
all of them reside at an extreme point in the cube.
This gives the image a drastic 'cartoonish' appearance.
|
Hue
 You've
probably heard the term "hue" before, whether
in your favorite graphics program, or on your TV set,
it's more common than you might think. Often though,
people don't really know what it means, other than
what they've observed when tweaking around its value.
Hue by
definition is rotation of colors in color space.
What does
this mean exactly? Well say you have a red color,
and you rotate its hue 90 degrees. This would
cause it rotate around the diagonal black-white
line, and wind up in the yellow-green area of
the color cube. When you change the hue of an
image, you are rotating all of its colors by some
angle. If you were to rotate an image's hue 180
degrees, then you would end up with every color
being shifted to its complimentary (opposite).
Red would become cyan, green would become purple,
blue would become yellow, and so on.
|
Brightness
 This
is perhaps the most intuitive term of the three we've
covered. Brightness refers to the overall intensity
of a color, which, in the color cube, refers to its
proximity to the black or white corners. Obviously,
a color near the black corner will be darker, and
a color near the white corner will be lighter.
There are
technical details that complicate this simple idea,
however. I will not get into them now, but keep in
mind that a color's path from black to white is usually
not a straight line. Depending on the brightness function,
it may be two connected straight lines (the corner
of the two lines will lie at the actual color), or
a smooth curve of some shape.
Take the
color orange for example. I've made a gradient here
that shows all the shades of orange down to black,
and up to white:
The
resulting colorspace plot of these shades shows the
two connected straight lines i mentioned. Notice they
meet where the actual orange color is:
By
looking at this colorspace plot, you can see that
the gradient is linear; Its a straight line from orange
to black, and a straight line from orange to white.
|
This
introduction to colorspace, although brief, hopefully
helped you see how colors work together, and how
various color operations work in a new perspective.
Later chapters will elaborate further on these topics,
and new topics related to what was covered here.
|
|
|
|
