Some Color Theory for the Web

Warm and Cool Colors

Colors are generally grouped into two sets - "Warm" and "Cool":

Warm / Hot colors, ranging from red to yellow, convey a sense of heat to the optical center of the brain, because of their relation to things that are hot (fire, molten lava, heated metal, etc.).

Cool / Cold colors, ranging from green to purple, exude a cool air. This is because of their relation to the cooler elements of our environment (i.e. trees, water, air, a night sky).

Grays (ranging from white to black) are generally considered a "neutral" color, as they are neither warm nor cold. However, even within the set of colors known as "gray", there is an infinite array of variations from "cool grays" to "warm grays".

Choosing the right colors for your site is a very important stage in the design process. Usually, this step is

Color Effects

Color Effects are the psychological effects that the mind exerts upon perception of different colors, in brilliance, hue, etc.

A color (such as a specific shade of blue) that might appear bold and aggressive in one context, might have a totally different "feel" in another. For instance, brilliant yellow (#FFFF00) in the context of a white background appears brighter than on a black background. In fact, on the black background, it almost seems to fluoresce.

Pixel Shifting and Other Sub-Pixel Dynamics 

In addition to the psychological effects created by colors in traditional media, web media are subject to an entirely new host of issues due to the manner in which the colors are displayed: RGB monitors

There are certain combinations of colors which, due to sub-pixel structuring, can create entirely different results than expected. For instance, a one pixel vertical yellow line drawn to the left of a one pixel vertical blue line on a white background will create the appearance of a one pixel vertical BLACK line.

Vertical scan lines - Black-on-White, Yellow-on-Blue, and Red-on-Cyan

The reason for this can be explained through the way colors are rendered on an RGB monitor. Each pixel in a monitor is divided into three (3) vertical "sub-pixels": Red, Green, and Blue (R / G / B).  So in sequence, a horizontal row of subpixels will look like this: RGB|RGB|RGB|RGB.

To create the illusion of color, the monitor is instructed by the CPU to turn sub-pixels on or off, or give them a percent alpha fade. Hexadecimal Colors give the exact instruction sent to a particular pixel. An RGB value of #808080, for instance, tells the pixel to fade all three sub-pixels to 50% maximum brightness, resulting in a medium Gray. The RGB value #FF6600, on the other hand, tells the Red to appear at full brightness, Green at 40% brightness, and Blue at 0% brightness. The result is a bold Orange.

The scan-lines again, with 4x magnification.

White (#FFFFFF) is achieved by an illusion of the combination of all three colors at maximum intensity. Therefore, a black line (#000000) on a white background would be the absence of illumination of a pixel line in a fully illuminated screen.

The illusion of creating a black line with a yellow and blue line is as simple as grid geometry. We can represent row of pixels consisting of White-White-Black-White-White like this: #FFFFFF, #FFFFFF, #000000, #FFFFFF, #FFFFFF. A row made of White-Yellow-Blue-White-White would look like this: #FFFFFF, #FFFF00, #0000FF, #FFFFFF, #FFFFFF. Compiling the two, you will find the first is FFFFFFFFFFFF000000FFFFFFFFFFFF and the second is FFFFFFFFFF000000FFFFFFFFFFFFFF. The final result is the same black line, but shifted 1/3 pixel to the left. At least, that is the perceived effect. Thus the illusion and a major flaw in RGB monitor color rendering.

Here is the original scan-line image blown up 4 times to show you what you're actually looking at.  Surprised?

Exploitation of this flaw can allow for some wonderful new technologies, such as sub-pixel rendering in fonts.

Color Harmony

Color Harmony can be described as the effect of multiple colors in conjunction with each other. Every individual has a subjective sense of what colors create a harmonious union, and therefore this is a difficult element of color theory to teach.

Johannes Itten, author of "The Art of Color" and "Elements of Color", defines color harmony as

The Hexadecimal Color System

Hexadecimal is a numeric system with a range of 16 values per digit. The possibilities of a hexadecimal digit are: 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F. The A-F digits are alternate representations of numbers which don’t exist in our decimal system, so are replaced by alphabetical symbols. Their values are A=10, B=11, C=12, D=13, E=14, and F=15. Since the numeric system is base 16, the values of ordered digits increase in powers of 16. This means that while one digit numbers are face value, 2-digit numbers are calculated at (16 x the first digit) + (face value of the second digit), and so on. This numbering system can get really confusing for someone who has used decimal his entire life.

RGB Color

RGB is a standard for defining colors for CRT display. This system uses a combination of Red, Green, and Blue variations to create virtually any color imaginable (there is a 16.7 million color palette with this system). The way it works is by specifying a 6-digit hexadecimal number, the digits of which have the values RRGGBB (where R=Red, G=Green, B=Blue). 

CMYK (Print) Color