The Web Color Cube

This page demonstrates how the HTML standard 216-color palette can be conceptualized visually.

Because there are three primary colors (red, green, blue), an object that represents the colors must be a three-dimensional object—in this example, a cube. (Other objects could be used, such as a sphere or a cylinder.) Each of the three dimensions represents one of the three colors.

• RED is represented in the height dimension. That is, the amount of red in any color increases from bottom to top of the cube.
• BLUE is represented in the width dimension. That is, the amount of blue in any color increases from right to left of the cube.
• GREEN is represented in the depth dimension. That is, the amount of green in any color increases from back to front of the cube.

The first figure below shows the cube separated into six slices. In the HTML color palette, there are six colors in each dimension, hence 216 colors overall. (6 × 6 × 6 = 216)

The second figure lays out each of the six slices horizontally, from left to right.

Notice that this cube, a six-sided object, has eight corners. Each of the corners has a solid color: On the front: white, yellow, green, cyan. On the back: black, red, magenta, and blue. The opposite corners of the cube each have the negative, or opposite color. That is, black/white, blue/yellow, green/magenta, and cyan/red.

There could be any number of slices (divisions) in the color cube. In a computer using 24-bit color, there are eight bits that define each primary color, hence 256 possible degrees of each color. In that case, the cube would have 256 slices in each dimension, allowing over 16 million possible colors. (256 × 256 × 256 = 16,777,216).

 

Here are some more experiments:

Start at the front, top, or left of the cube and work your way through. Go inside the cube and watch the colors change as you move through the six slices. There may be a slight lag while your computer loads each color picture from the server as you select it. There are 18 total color pictures. Javascript is required to view these transitions.

Front to Back:	Top to Bottom:	Left to Right:
Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 Layer 6	Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 Layer 6	Layer 1 Layer 2 Layer 3 Layer 4 Layer 5 Layer 6
Green decreases front-to-back. Red and blue stay constant.	Red decreases top-to-bottom. Green and blue stay constant.	Blue decreases left-to-right. Red and green stay constant.

 

Change the red, green, and blue values below. Observe the effect on the color combinations. There may be a slight lag while your computer loads each color picture from the server as you select it. There are 216 color combinations, hence 216 total color pictures. Javascript is required to display the colors.

	Red	Green	Blue
	FF CC 99 66 33 00	FF CC 99 66 33 00	FF CC 99 66 33 00

 

The Color Cube Separated Into Six Slices

 

The Six Slices of the Color Cube

Click on the image below to see the full HTML color table with the numeric values for the colors. Javascript is required to view the color table.

 

Dan’s Home Page