Web Design: Color & Design

Not everyone has an innate sense of color. Most art students are first introduced to color theory in Design I or II, and promptly forget most of it. Then ther are those who JUST DON’T GET IT®.

There is help.

The web taditionally has 216 colors that are ‘safe’, or dispaly the same accross platforms. This is for displays that only display 256 colors. This is pretty outdated, as most displays are capable of at least 16-bit color, or thaousands of colors, and actually 24-bit, or millions, is the usual norm.

There are some relatively painless ways of choosing color, from simple color theory schemes, to helper applications, to sampling. The following are some of those.

Specifying Color

Color on the web, and in particular color for CSS, can be specified several different ways:

hexidecimal

#RRGGBB: hex-pair notation, with each pair specifying the value of red (RR), green (GG) and blue (BB), in hexideciaml, in RGB order. The values range from 00 to FF. ‘Pure’ red would be noted as #FF0000, and pure blue as #0000FF.

shorthand hexidecimal

#RGB: shorthand hex notation, with each digit specifying the value of red (R), green (G) and blue (B), in hexideciaml, in RGB order. The values range from 0 to F, and represent a pair. Thus, ‘pure’ red is noted as #F00, instead of the long form of #FF0000.

rgb percentage

rgb(rrr.rr%, ggg.gg%, bbb.bb%): Values range from 000.00% to 100.00%, with decimals allowed. Pure red would be rgb(100%, 0%, 0%).

rgb numeric

rgb(rrr, ggg, bbb): RGB as numeric value. Values range from 0 to 255. Pure red would be rgb(255, 0, 0).

keyword

Currently there are only 17 useful (as in mostly recognized) keywords: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, and yellow. With the exception of white and black, the vagueness of color names precludes these from being really useful. I’ve created a chart showing these colors and equivalents.

Tools

These are a few web-based tools to help with color.

1. EasyRGB:

   The most fun is the Color Harmonies section, where you put in a color value, and the script cranks out a bunch of related colors.

2. More Crayons

   Lots of information about web color, and an expanded ‘web-safe’ palette, with 4096 colors as opposed to the traditional 216.

3. Visibone

   Products! Charts, amps, and the Visibone 2 color palette.

4. Eric Meyer’s

   Cool little ditty to blend between two colors.

Color Theory

Not to go wandering into the myriad paths of color theory, here are some basic schemes from that area. And yes, one could make the argument that all schemes are color theory, but we need to start somewhere.

These schemes are based on the color wheel, and where colors are in relation to each other on that wheel. Before we get into that, we need to establish what kind of color we are using. Since web sites are displayed on, well, displays, which emit colored light, the system we are talking about is called additive. In additive color, the primaries (which are red, blue and green) are added together to make white:

With web design, we are always dealing with additive color.

That being said, there are standard color combinations or schemes which come from color theory. These are used all the time, often without people realizing it (sshhh!), because they just look right.

When talking of the common color schemes, we refer to color’s positions (or relative positions) on the color wheel, and usually refer to the subtractive color wheel:

Complimentary

Complimentary uses colors that are opposite on the color wheel. Complimentary schemes are red/green, blue/orange, yellow/violet. Usuallly one color is dominant. Mezzoblue uses this kind of pallette, with blue being dominant.

Analogous

An analogous palette uses colors that are adjacent on the color wheel. Most often they are either warm—the red/yellow side—or cool—the blue-green side, but can go into tertiary and farther out in the wheel. A couple of examples: Antipixel, and Mike Daividson’s site, and Jeffery Zeldman’s.

Monochromtic

Monochromatic uses variations on a single hue. There is usually some kind of contrasting color involved, but the design will be predominantly a single color. See Stopdesign and Vitamin.

Another version of monochromatic is greys. A really nicee example of this is Koi Vinh’s Subtraction. Very few greys are used, it’s mainly black and white, but notice how the small color images used to illustrate entries really draw the eye.

Sampling

Sampling form an image to generate a palette for a design is actually pretty common. It is remarkably easy, and works great, which is probably why a lot of designers are reluctant to admit using the technique. Here’s how. Take an image, any image, that you are reasonably confident of (compositionally and color-wise):

Using the Eyedropper tool in Photoshop (you can also use Digital Color Meter in Mac OSX), I just sampled some areas, and came up with this:

The colors are #090000, #93823A, #FBCA00, #7F4C0D, and #AF8B4A.

By further messing with the image (applying some heavy blurring), the colors blend together more, and you can get a different (but similar) palette:

So…

Probably the crux of the idea is to base your color choices on something, related somehow to the content. Sampling gives you a natural kind of palette: the sampled color combinations exist. Color theory gives you established relationships. They may look artificial at times, but are also effective.