Understanding Color: Why Bother?
My quest to understand color was originally inspired by a
desire to create web pages that load fast
and look good.
Some day bandwidth may not be an issue, but for now,
understanding color may be the key to keeping people from
leaving your web site due to long, boring waits for your
beautiful but large graphic files to download.
Making your pictures look good on a web page requires an
understanding of how web browsers handle color, and
the best pictures, whether on the web or elsewhere, are
products of careful handling of color balance. You can go
about that by shooting in the dark, or you can start with
a foundation of basic understanding of how color works.
I've found that understanding the concepts in this Primer
save me a lot of time and frustration because handling
color has become intuitive rather than random experimentation.
Browser Safe Colors
Out of the millions of colors your monitor is capable of displaying
there are only 216 colors that you can absolutely count on being
displayed correctly (identically) on all platforms by all browsers
on the Internet! Because different operating systems use different system
palettes, your viewer's monitor running at 256 colors or less may
cause your non-Browser Safe colors to shift, with results ranging
from disappointing to bizarre.
You will want to use Browser Safe Colors when you need to be
guaranteed that the colors will display exactly as you intended.
Here are the 216 Browser Safe Colors, sorted by descending RGB
(Red, Green Blue) values, showing one "slice" (6 X 6 layer, bounded by black squares) of
the 6 X 6 X 6 color cube at a time.
- The first layer starts with White:
- R = 255
- G = 255
- B = 255
- The last layer ends with Black:
- R = 0
- G = 0
- B = 0
Every color in the Browser Safe Palette has one of only six
possible values for R, G and B for each color. The values are
0, 51, 102, 153, 204 and 255. When converted to Hexidecimal,
the values are correspondingly: 00, 33, 66, 99, CC and FF.
- Since the hex numbers are quite distinctive, you'd know
right off if you see the following HTML:
- < BODY BGCOLOR="# 33CC99" TEXT="56CF12" >
- the background color is Browser Safe, but the text isn't.
The Color Cube
The Color Cube is a conceptual organization of all colors in
the visible spectrum into the space of a cube. Developing
a familiarity with the layout and composition of the Color
Cube is a good starting point for understanding color.
Each of the eight points on the cube contains either a single
Primary Color or Black or White. Everything in between the
eight points, whether on the surface of the cube or within
its interior, contains a mix of the Primary colors.
The line-up of colors from one cube point to the next is often
referred to as a "color ramp" since the colors along the way
phase gradually from one color to another.
The cube you see here is very "chunky" in that it shows the
relationship of all colors via 216 color "chunks" arranged
6 X 6 X 6. If this cube were an accurate model of the
millions of possible colors, then each one of these 216
little blocks would actually contain thousands of
ever-so-subtly different colors forming a color ramp to its
This chunky version of the Color Cube has been constructed
using the 216 colors designated as Browser Safe Colors.
Aside from being useful for web pages, these particular
colors make a very simple representation of the Color Cube
for grasping its meaning because they are perfectly
evenly spaced along the color spectrum.
Notice how the colors around the perimeter of the cube when viewed
from this angle are are arranged just like the rainbow. This
arrangement is often referred to as the Color Wheel.
In elementary school you were probably told that the rainbow colors
Red Orange Yellow Green Blue Purple
and you were probably also taught that the Primary colors from
which all other colors can be produced by the proper mixing are:
Red, Yellow and Blue
But this isn't quite right.
The colors at each of the points of the Color Cube (except Black
and White) are the Primary Colors.
There are actually only three Primary Colors, but two different
"Color Spaces": Both the RGB and CMYK color spaces are
represented by the six colors at the outer points of the Color Cube.
You could say of Primary Colors that there are only "three at a time." It's like speaking in only one language at a time, but the concepts can be expressed in more than one language.
In the RGB color space the Primary Colors are Red, Green and Blue.
In the CMYK color space the Primary Colors are Cyan, Magenta and Yellow.
RGB vs CMYK
Here are some numbers that represent the color
Notice that the top row of numbers show the
RGB values for pure red
R (red) = 255 (the highest value)
G (green) = 0 (none at all)
B (blue) = 0 (none at all)
But notice also the values for C, M and Y. These are the CMYK equivalents
of the RGB values for pure red.
From this you can learn something about the relationship between
RGB and CMYK.
In the CMYK color space, pure red
is created with
C (Cyan) = 0 (none at all)
M (Magenta) = 255 (the highest value)
Y (Yellow) = 255 (the highest value)
Two things are immediately clear:
- A color represented by just ONE channel in RGB (e.g., Red)
is represented by TWO channels in CMYK (e.g., Magenta and Yellow)
- Red and Cyan are opposites, each containing zero of the other.
This will be helpful for understanding complementary colors.
The colors opposite each other on the Color Wheel are called Complementary Colors: Red and Cyan,
Green and Magenta,
Blue and Yellow.
Complementary colors are mutually exclusive.
- Pure red contains absolutely no cyan and vice versa.
- Pure blue contains absolutely no yellow and vice versa.
- Pure green contains absolutely no magenta and vice versa.
The fact that complementary colors sit opposite each other is because
they are literally the opposite of each other. For instance, cyan
pigments appear cyan precisely because they absorb red light
and reflect blue and green. Cyan is the absense of red.
Each complementary color pair contains:
zero % of each other, and
100% of the other two primaries in the opposite color space.
Here is another way to look at the relationship of the
Primary Colors in the RGB and CMYK color spaces.
We've seen that pure Red consists of 100% of two of the
primary colors in the opposite color space (i.e., CMYK).
So what do those two colors (Magenta
and Yellow in this
case) mean in the RGB color space?
They are called Secondary Colors.
The Primary colors in each of these color spaces
(RGB and CMYK) are the Secondary colors in the other.
In RGB, the primary colors are RGB (Red, Green, Blue) and
the secondary colors are CMY (Cyan, Magenta, Yellow).
In CMYK the primary colors are CMY (Cyan, Magenta, Yellow)
and the secondary colors are RGB (Red, Green, Blue).
Primary and Secondary Colors
Combining two primary colors creates a secondary color in the same color space.
For example, in RGB, Red plus Green make the secondary color Yellow.
Every one of the six colors is a Primary Color in its own color space.
Every one of the six colors is a Secondary Color created by its two neighbors in their color space.
Additive and Subtractive Colors
You ADD RGB colors to get White.
So RGB colors are Additive colors.
You SUBTRACT CMYK colors* to get White.
So CMYK colors are Subtractive colors.
* Actually what's really true is that CMYK colors are
made of ink or dye or paint, physical media, which produce color
by subtracting light. Printed on a page, each primary color
absorbs (subtracts) light of its complementary color while
reflecting its own color light for the eye to see.
Ink vs. Light
Your monitor creates colors using light.
The native color space for light is RGB.
Whereas it might not seem intuitively obvious that adding color
creates white when the color is made of light,
it is clear that the absence of color is black. The more you
add color in the RGB color space, the closer to white becomes
the result. Thus, R/G/B values of 0/0/0 produce black and
255/255/255 produce white.
Your color printer creates color using ink.
The native color space for ink is CMYK.
To make colors on a printer, ink is added, mixing cyan, magenta
and yellow. The absense of ink (on a white page) is white.
A whole lot of all three colors of ink laid on top of each other
is theoretically black. But inks are not perfect absorbers of
light, so it becomes necessary to add black ink. That's where
the "K" comes from in "CMYK."
Muddying the Picture: HSB
If Primary Colors are all 100% and zero % of one thing or another,
what happens if the mix is somewhere in between?
When the mix diverges away from primary colors, the result is
lighter, darker, or grayer, and the color appears to be somewhere
in between the primary colors.
A third color space, HSB (Hue, Brightness and Saturation) helps
to demonstrate the results of diverging from primary colors by
mixing various amounts of each RGB or CMY color. To understand
HSB, start by observing the difference between grays and colors.
Gray and HSB
The farthest you can get away from primary colors is gray.
Or black, or white. Together, white, gray and black form
the Gray Scale, and what these "colors" have in common is that they all have equal amounts of R, G and B (and therefore also equal amounts of C, M and Y).
On the gray scale, Brightness can range from 0% (Black) to 100%
(White), but there is no Hue value, and because of that Saturation
is always 0%.
To have Hue (and saturation), the RGB or CMY values must
not be all the same.
Color and HSB
Hue is simply the position in degrees of the color on the Color Wheel. Here, a light green has been chosen (the color shown at
the center of the dial). This hue of green
occurs at a position of 120 degrees within the full 360 degree
Saturation and Brightness are both expressed as percentages.
Brightness tells you how light or dark a version of that
Hue you have, and Saturation tells you how "pure" or
"dense" it is, i.e., how much closer to the full color than gray or white.
For the light green shown above, here is how the numbers
H (Hue)=120, S (Saturation)=40% and B (Brightness) = 100%
The term "Bit Depth" refers to a scale of how many bits it takes for your computer to internally specify (name in ones and zeroes) a particular color as distinct from every other color possible in a picture.
Your monitor is probably capable of displaying millions of different colors. A picture with millions of different colors requires a bit depth of 24. It takes 24 bits to give that color a unique identification in computer language.
Bits and Bytes
Your computer accomplishes miracles with nothing but zeroes and ones.
One bit can be either zero or one (0 or 1).
Two bits can be four different things:
If the bit depth of your picture is 1, you can have two colors in it, one identified as "0" and the other identified as "1".
Guess how many colors you can have if the bit depth is two?
You got it, four colors.
Beyond Two Bits
Three bits gives you eight possible colors identified by:
- 000 100
- 001 101
- 010 110
- 011 111
Four bits gives you
- ... Well, you get the idea. Beyond two bits a chart is nice.
Bit depth Number of possible colors
- 1 2
- 2 4
- 3 8
- 4 16
- 5 32
- 6 64
- 7 128
- 8 256
Indexed Color and CLUTs
Color depth of 8 bits or less can be handled as Indexed Color,
with each color identified by a number from 0 to 255
(8 bits provides a maximum of 256 colors)
Indexed Color uses a Color Palette.
A Color Palette is accessed via a Color LookUp Table (CLUT) by
simply numbering the colors in the palette from 0 on up.
Here is an example of a two-bit palette.
The color Magenta is the third color in this palette.
But since computers like to start with zero, its CLUT number is 2.
Indexed Color vs. RGB
Technically, indexed color is RGB color on your monitor
(since the native color space for monitors, which use light to
produce color, is RGB), but non-indexed color is often referred
to as "RGB color."
Whereas the number of colors possible with non-indexed color is
limited only by your monitor setting, indexed color is limited
to the colors in the picture's palette, and the maximum is 256 colors.
Why would you want to choose Indexed Color vs. RGB (non-indexed)
color for your picture? The answer has everything to do with
"bandwidth," the time it will take to get your picture onto
the screen of someone who has visited your web page.
"Bandwidth" is the generic term used to describe the amount of
time it takes to get information from the Internet onto a
computer screen. The primary limitation on bandwidth is
usually a modem. If worst case is a 14,400 baud modem,
then your pictures are going to load at approximately 1
Kilobyte per second. That means that a 60K file would
take a whole minute to appear on your viewer's screen!
This could well provide your viewer the motivation to decide
that now is a good time to check out another site.
If you aren't in the position to assume that most of your
target market will be using high speed cable, DSL or T1 connections to
the internet, then bandwidth should be a consideration in
your web page design.
The first step is to eliminate any images that don't pull
their weight in impact value. Then you need to select the
correct file compression for each of your remaining images
and convert them.
Image File Compression
For the internet, the most common image compression formats are
GIF and JPEG. It's important to understand the difference,
because their usage is usually pretty much mutually exclusive
depending on the kind of picture it is. Generally, photographs
work best with JPEG, and everything else with GIF. GIF
compression is most effective on pictures that repeat the
same pattern over and over, such as stripes or checkers, or
unbroken areas of the same color. GIFs are limited to 256
colors, so JPEG is the choice for smooth gradients.
You can use GIF compression most effectively when your picture
actually contains a small number of colors and has a lot of area
that is either a repeating pattern or all the same color.
The greatest advantage of GIF compression is the opportunity to
reduce the bit depth of the file (and therefore the size) if the
image only uses a few colors.
For example, the above picture was originally created in Photoshop
using a monitor that was set to display millions of colors,
and saved as a 24 bit-depth bitmap. The file was 9,970 bytes
in size. When I saved it as a GIF, I was able to reduce the bit depth
to 2 (all it needs) and the file size became 237 bytes. That's 2%
of the original: a phenomenal saving.
The original file would have taken ten seconds to download with a 14.4kbs modem.
Is it worth it? You decide. But at about a quarter of a second,
it makes a worthwhile example to use on a web page explaining
JPEG compression is extremely effective on photographic type images
where subtle gradations of color make them completely unfit for use of GIF.
With JPEG, the size of the file can be minimized by selecting a
poorer quality end result (you are prompted when the file is
converted). The poorest quality is usually quite adequate for
monitor display of photographs, but very precisely rendered images
may require a minimum of
"High" quality to preserve their clarity.
JPEG is a good choice when the picture cannot be rendered in Browser
Safe Colors since the picture will be dithered to millions of colors
fairly effectively regardless of the platform or browser it is viewed
from. There is no advantage at all of confining your JPEG picture to
Browser Safe Colors because upon download they will be will dithered
to the widest possible range of colors regardless.
JPEG provides at least the illusion of 24 bit color whether you want
it or not.
The above photo saved as a 24 bit-depth bitmap without JPEG compression
is 98,200 bytes. This would take over a minute and a half to display
for a viewer with a 14.4 K baud modem.
Saved as a Maximum Quality JPEG the size drops to 28,000 bytes (half
a minute), and a Low Quality JPEG (which looks exactly like the
Maximum Quality version to me) weighs in at 5,430 bytes and will
display in a very acceptable 5 1/2 seconds.
The main thing to keep in mind with a JPEG is whether the picture
is going to be of sufficient interest to your viewers to keep them
waiting one second per kilobyte to see it.
JPEG / GIF trade-offs
Pictures that use many colors can often be forced down to 256
colors or less (the fewer the better) for GIF compression
without a noticeable degradation of quality,
but you must always consider which colors.
If Browser Safe Colors don't suit your picture you may be better
off with a JPEG.
One very useful function of the GIF is to be able to specify your
palette, and to make it a Browser Safe one so that you can be
guaranteed that the colors will display exactly as you intended.
One commonly used GIF benefit is the ability to make a part of the
picture transparent. This lets you make a selected portion of your
picture appear to float on a background of any color.
GIFs can be interlaced, which can be an effective way to keep
your viewer busy reading your captivating text, for instance,
while the picture gradually appears first in chunks of approximate
color, and then by steps into progressively finer resolution.
This is useful for things they can get a general impression of
and then safely ignore, but it's also quite nice for something
they're already anticipating with great interest. This
capability is also available for JPEG images with some of the
newer imaging programs such as Photoshop 4.0, with the "Progressive JPEG."
If you have a picture that seems to fall somewhere in between
the indications for GIF and JPEG, try saving both a GIF version
and a JPEG version. Eliminate all unused colors from the GIF.
If the result is larger than the JPEG (and the JPEG looks as
good or better), then you have your answer.
Back to top