Your browser does not support the HTML5 canvas tag.
Written By Leon Simula

Color vision

The human eye has different kinds of photoreceptive cells. Certain cells, called cones, are linked to the perception of color. Usually there are three types. Let's call them red, green and blue cones. Each type is particularly sensitive to a certain wavelengths of light. Other colors are percieved by the combined activation of different types of cones. For example, simultanous activation of red and green cones within the same visual area is percieved as yellow.

The RGB model

The RGB-model is a color model based on red, green and blue light. The model was established before the existence of computers, but is especially useful for displays that presents content by emitting light. For passivly reflecting materials, other models are needed. In the RGB-model adapted to computers, each primary color (red, green and blue) is divided in 256 shades starting from 0. Zero means no light. For example the color RGB(255,0,0) has the maximum of red light and no green or blue light. So this represents pure red. The number 256 is a suitable quantity for computer that works best with powers of 2 (2 multiplied by itself a number of times). All the shades in a primary color can be referenced by 8 bits (256=2x2x2x2x2x2x2x2=2^8) equal to 1 byte. Without compression, each pixel of an image is stored into 3 bytes. The combined shades of red, green and blue can then produce 256x256x256 = 16,777,216 different colors. Humans are able to distinguish between 10 million colors or so.

Complementary colors by the RGB-model are pairs of colors which, when combined cancel each other out (lose hue) by producing a grayscale color like white. For example, yellow is the complementary color of blue. Adding pure blue with a RGB(0,0,255) to yellow with RGB(255,255,0) gives RGB(255,255,255), which represents white.

In HTML, RGB-colors are often coded in a mysterical looking format based on hexadecimals. For example the RGB(255,0,0) for red would look like #ff0000 with hexadecimal coding. Here the hex-number "ff" represent 255. Hexadecimals are base-16 instead of the usual base-10 known to most people. Hexadecimal-representation was probably convenient for software developers early in the history of HTML.



Base 10012345678910111213141516
Base 160123456789abcdef10

Use the sliders below the figure to mix colors and get the corresponding RGB- and Hex-notations.



Color Description RGB-notation Hex-notation
Shade of red {{redFill}} {{redFillHex}}
Shade of green {{greenFill}} {{greenFillHex}}
Shade of blue {{blueFill}} {{blueFillHex}}
Combined color {{whiteFill}} {{whiteFillHex}}
Complement of above {{complementFill}} {{complementFillHex}}


A color experiment

As the size of each squares in the images below becomes smaller and less spatially separable, the color is looking closer to uniform and similar to the expected combined colors of the RGB-model. The shades are darker than if the light sources actually overlapped.



Creative Commons License
This work is licensed under a Creative Commons Attribution-NonCommercial-ShareAlike 2.5 Generic License.