The must-know of color theory
The Web Dev Zone is brought to you in partnership with Mendix. Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.
Clever use of color is one of the pillars of web design. No one wants to teach you how to combine crominance and luminance signals, but the fundamentals of color theories and the color spaces available in a browsers are a must-read for every web developer.
Color is a property of light, directly derived from its wave length (or equivalently, from its frequency). Our screens are not capable of reproducing all the wave lengths visible to the human eye, but can indeed generate red, green and blue signals with a great precision.
Due to the way the human eye works (in photopic vision), we can synthetize a fake color simply by combining these three types of light, whose wavelength vision receptors peaks on. Our eyes are easily fooled, and that is the reason for the success of RGB as a color space in the last hundred years.
RGB is not the only color synthesis method available: is is an additive approach, while there are also subtractive approaches used in print. However, on a computer screen you should only worry about RGB.
We have said that three values for each pixel of an image are enough for storing color information. But how much space is allocated to a single pixel?
- many years ago, only 256 colors could be seen on screen, in a standard dictated by the same conventions of ASCII code. 8-bit color allocated 3 bits to red and green, and two bits for blue.
- HighColor, the subsequent innovation, used 16 bits for each pixel, divided as 5 for blue and red, plus 6 for green. This mimics the mechanics of the human eye, which has an enhanced perception of green. This combination can represent about 65 thousands colors.
- The Truecolor method is the most diffused nowadays, and it divides 24 bits equally between each base color. This combination can represent about 16,8 millions of color.
You can even assign 32 bit to each pixel, by adding an alpha channel for transparency. The laast 8 bits serve the purpose of telling the percentage of opacity of the pixel.
There are even deeper color representation, sometimes called DeepColor, which use 30 or 48 bit for pixels. However, the majority of devices available to the consumer are not designed to display such a precision.
A variation on the previous color depths is indexing. Just like iso-8859-X charsets assigned different characters to the ASCII characters in the 128-255 range, indexed images assign different color values to bit combinations, allowing for example an image with 16 different color to be represented with 4 bits for pixel, even if the color have fine-grained values such as #0466F2 and #904A31. This technique is used in formats like Gif to render drawings and icons, which have a natural color depth inferior to photographs.
Now that we now how color is modelled digitally, how can we specify one in a web page? There are multiple options.
We're not entering in the details of different RGB color spaces, but basically it is the natural choice for defining accurately a color to be seen on screen (with respect to keywords such as blue and red). RGB colors can be specified in two types of notations, both supported by CSS:
- hexadecimal values: #006699, or #069 as a shortand. #069 is converted to #006699, not to #006090.
- decimal values: rgb(0, 102, 153) or rgb(0%, 40%, 60%)
These values are defines as the type <color> in the CSS specification, and can be assigned to properties like color (obviously) or background-color, or background, and so on.
A quick, but not accurate, way of specifying a color is by its name: black, white, lime, purple... Only a handful of colors are officially available as keywords. I use them mostly for debug: if I had to visualize the background of a <div>, it's simpler to type background-color: purple than background-color # what was the first? ah, red. Than the second green, is... Wait, purple was red plus green or red plus blue...
There is an additional color space not available via CSS but always present in graphic programs such as Photoshop and Gimp: HSV, which stands for Hue, Saturation, Value. The Hue defines the basic tint; Saturation is the intensity of the color over a neutral gray, and Value is the luminosity. CSS3 offers support for this color space too, but I'm unsure on its adoption.
I have two final notes for the young web designer that have come to the final part of this article.
The first is that wou may heard a bit about the web safe colors, a palette composed of 216 supposedly safe colors that should render unambiguously on every browsers that respects standards. We can say in 2010, with screens capable of visualizing millions of different colors at the same time, this palette is rather obsolete.
The second is a reminder on accessibility: do not base your navigation only on colors (like traffic lights do.) Color blindess almost touches the double digit percentage in many segments of the population, and these users would be disappointed by not being able to perceive your big red warnings differently from the nice green boxes. Try making a screenshot of your application and save it to grayscale in your graphic program to see if the overall picture is acceptable even without colors.
That said, I wish you well in your design activity and I hope you'll return to this website hungry for more web development training material.