The Web Color Cube
Move your pointer over the buttons below to view each of the individual faces of the cube:
This page demonstrates how the HTML standard 216-color palette can be conceptualized visually. (Original source: Dan’s Home Page - The Web Color Cube)
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.
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.
