The Color CubeThe Web Color Cube

Move your pointer over the buttons below to view each of the individual faces of the cube:

Select a side of the cube

Sides of the 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.

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:
Cube layers Cube layers Cube layers

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.

Color Wheels Red Green Blue

 

The Color Cube Separated Into Six Slices

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.

The six slices of the color cube

 

Dan’s Home Page

Front back left right top bottom