Capt. Horatio T.P. Webb
Parks -- Spring 2014
Version 7 -- Last Updated 9:00 PM 5/11/2014
A single pixel's color is based on 3 numbers that represent: (1) the amount of red; (2) the amount of green; and (3) the amount of blue that are combined to produce a single color. Each of the three colors has 256 possible intensities (0 → 255) yielding 256 x 256 x 256 or 16,777,216 possible colors.
Below is a 3D oblique projection of a color grid representation of the "truecolor" or "24-bit" color model. There are 3 dimensions: red (0→255); green (0→255); blue (0→255) that create a 256 x 256 x 256 pixel 3D cube (16,777,216 unique colors). When the slider for the "chosen color" is moved (chosen by the radio buttons at the bottom right), one of the 256 planes of of the "chosen color" is shown where ALL the pixels in the "chosen color" plane have the slider value. There are 65,536 different values for the non-chosen colors (256 x 256) in each visible plane.
HTML5 adds a fourth color component called variously: "alpha", "opacity", or "transparency", This is expressed as the fourth number in the "red,green,blue,alpha" or "rgba" string. The values for "alpha" range from 0.0 → 1.0. Specifically:
The reason this is called "alpha" is not because it is more simple than saying "opacity" or "transparency" (which both mean the same thing -- just from a different directions), but because the generic term is from "alpha channel". This terminology is most often used in graphic image editors to describe the transparency layer of an image. This information references to how the red, green and blue color information should be merged with the color that is "underneath" or "behind" the image.
Thus, when working with transparencies/opacity there is a need to be able to refer to how the color (the one on top) and the background (the one underneath) are merged or composited together.
The "color-alpha picker" above allows the user to pick the blue, red, green and alpha values and provide the color-alpha specification in a textbox.
HTML 5 specifies a new input type named "color" that appears like a textbox. When the user clicks in the textbox a color picker is shown that allows the user to pick the rgba colors by sight and then place the rgba color specification in the textbox.
The w3c spec (as of 5/2013) is here.
Chrome 33 and Opera 18 (April 2014) bring up a rgb color picker when the user clicks in the textbox with a default color of black. Other browsers tested did nothing. The color pickers that worked are rgb ONLY -- they do NOT allow for alpha to be chosen as the W3C input type=color specification states:
"The input element represents a color well control, for setting the element's value to a string representing a simple color."
Above "a simple color" means a hexadecimal rgb color -- like red: "#ff0000". It is curious that since HTML 5 has many rgba color possibilities that the spec doesn't discuss or suggest anything about 24-bit color with opacity/transparency.
There are 16,777,216 (256 x 256 x 256) possible combinations of:
Combined with the alpha channel, we get an addition choice of 101 possible values for transparency → opacity. This color picker expresses as alpha as 0.00 → 1.00 yielding 101 opacity possible choices (16.777 million x 101 or 1,694,498,816 possible rgba color values).
Without alpha (i.e., red and green and blue only in 3 bytes) color is commonly called "true color" or "24-bit color" or "3 byte color". With alpha, it is 32-bit or 4-byte color. Even though we are only using 101 values (0.00 to 1.00 in 0.01 increments and NOT 0 → 255) the transparency/opacity is stored in the 4th byte -- thus using 32-bits or 4-byte color.