Color Theory and Web Design
Color theroy is a set of principles that enables the creation of harmonious color combinations via the comprehension of color relationships. Making things more complicated is the fact that color theory doesn’t take tints, tones and shades into account, instead it concerns itself solely with the base hues themselves.
There are significant psychological aspects to color; it’s a cultural signifier and can even affect mood. Much of this works on an entirely subconscious level. Marketing and design decisions have long been influenced by the psychology of color. Color schemes are picked for their subconscious significance or for positive associations with the intended audience.
At the most basic level, colors can be categorized by their attributes. Red-based colors are warm, while blues are cool. The use of neutral colors such as black, greys and whites, as well as some browns and beiges with the chosen palette limited to accent colors, can help to calm down a design, bringing greater harmony to the palette.
Color Wheels
A key tool in color theory is the color wheel. The color wheel is a visual representation of the color spectrum wrapped onto a circular device. One of the earliest accurate wheels was devised by Goethe in the 19th century, building on the work of Issac Newton. Newton’s earlier version didn’t take into account the idea of complementary symmetry.
The purpose of the color wheel is deceptively simple — harmonious color combinations consist of any two colors opposite of each other on the color wheel, any three colors eqally spaced around the wheel in a triangle, or any four colors that form a rectangle. Despite sounding rather rarefield, the color wheel is actually a very useful design device.
For a start, it brings sound scientific principles to something that might otherwise be an incomprehensible and fashion-led veil of confusion. When using a color wheel, it’s worth looking beyond simple complementary colors. A design based solely on complementary colors will surely work, but it will also be high-contrast, vibrant, jazzy and perhaps a bit harsh. Depending on the design, such a color scheme could be very strong or it could be overwhelming.
A color scheme based on analogous colors, meanwhile, is much more likely to feel relaxed and harmonised, although it could be lacking in contrast.
The color model used in displays such as CRT and LCD montors or televisions is RGB, which stands for red, green and blue. As displays create images from light emissions rather than pigment, colors are created by addition. Combining one of the three additive primary colors emitted from the light source, with another in equal amounts, produces an additive secondary color: cyan, magenta or yellow.
In practice, this means each pixel can be lit in a combination of red, green and blue light, creating a maximum of 16,777,216 colors. A typical human eye can distinguish between 10 milion distinct colors.
Color on the web
Back in the dark days of the early web, it was common to have a monitor with an 8-bit screen depth, meaning there was a maximum usable palette of 256 colors. Still worse, Macs and Windows machines had slightly different color models, resulting in a maximum usable palette of 216 colors — 216 common to both platforms. That was known as the ‘web safe’ palette.
Thankfully, today’s machines routinely offer millions of colors, so the web safe palette can be safely ignored, but that doesn’t necessarily mean you always should.
There are times, however, when other people’s screens may not show subtleties. Gamma, and even the kinds of monitor (LCD or CRT) people are using, cannot be controlled. If you’re being too subtle, you may lose it on LCDs.
On top of this, there’s the issue of the mobile web. Many mobile devices such as PDAs and mobile phones may have lower bit depth than PCs or Macs, though an increasing amount can display at least 16-bits per pixel, allowing for thousands of colors.
Color-blindness
One of the main things to be aware of is people with color-blindness and color deficiencies.
In fact, one in 10 males are estimated to suffer from some form of color-blindness, primarily deuteranomaly, a form of red-green color-blindness. As red-green color-blindness is a gender-related deficiency linked to the X chromosome, it’s much less common in women as it requires the deficiency to be present in both X chromosomes.
Resources
Here are some great articles (.pdf) by Linda Goin about color:
Color Schemes part 1
Color Schemes part 2: Triad, Tetrad, and the Perception of Depth
Color Perceptions
Color Usage: Color Schemes and Themes
