services


gallery


tutorials


process


contact


links

Gallery:  Color Primer


     
Understanding Color: Why Bother?
Browser Safe Colors
The Color Cube
Chunky Color
Rainbow Colors
Primary Colors
RGB vs CMYK
Complementary Colors
Secondary Colors
Primary and Secondary Colors
Additive and Subtractive Colors
Ink vs. Light
Muddying the Picture: HSB
Gray and HSB
Color and HSB
Bit Depth
Bits and Bytes
Beyond Two Bits
Indexed Color and CLUTs
Indexed Color vs. RGB
Bandwidth
Image File Compression
GIF
JPEG
JPEG / GIF trade-offs



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.


Chunky Color

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 neighboring blocks.

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.

Rainbow Colors

Front Back

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 are:

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.

Primary Colors


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 RED.
Notice that the top row of numbers show the RGB values for pure red as

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:

  1. A color represented by just ONE channel in RGB (e.g., Red) is represented by TWO channels in CMYK (e.g., Magenta and Yellow)
  2. Red and Cyan are opposites, each containing zero of the other.

This will be helpful for understanding complementary colors.

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.
  1. Pure red contains absolutely no cyan and vice versa.
  2. Pure blue contains absolutely no yellow and vice versa.
  3. 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.

Secondary Colors

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.

Therefore:
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." It's blacK.

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 color wheel.

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 come out:
H (Hue)=120, S (Saturation)=40% and B (Brightness) = 100%

Bit Depth

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:
00
01
10
11

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
0000
0001
... 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

"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.

GIF

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 GIF compression.

JPEG

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

home

services

gallery

tutorials

process

contact

Copyright © 2013 Cyberglitz