Color Theory and jQuery Events

Apr 19, 2010
Episode 21
Nick goes over the basics of color theory and Jim explains the differences between bind, live, and delegate, in jQuery.
Spotlight

Thanks to those who make Doctype possible!

Color Theory

Color theory is a subject that’s not always well understood, and yet has a tremendous amount of impact on the web.

Color Mixing

When you were younger you were probably taught that the primary colors are red, blue, and yellow, and when you mix them together, they make black. However, you were also probably taught that white light is actually a combination of all the colors in the visible spectrum. So then, which is it?

There are two types of color mixing. When you were learning how to finger paint, you probably mixed red, blue, and yellow together and saw that they made a sort of brownish black color. When you witness the mixture of paint or pigment, it is called subtractive color mixing. You’re basically starting out with a bright white and then absorbing certain wavelengths of light, and reflecting other wavelengths. So for example, the CMYK color model is a subtractive model which is why it’s commonly used in print work.

Conversely, when your computer monitor combines red, green, and blue light in the RGB color model, it is known as additive color mixing. The combination of the three colors creates white, because you’re increasing the amount of light rather than absorbing it with pigments.

In the mid 19th century the Scottish theoretical physicist James Clerk Maxwell pioneered our understanding of additive color. In 1861 he found that by taking 3 black and white photographs of the same object with red, green, and blue filters, he could combine them to form color imagery. When combining the images, he set up 3 projectors that again had the same red, green, and blue filters, and when the light from the projectors were composited, they formed a full-color image, thus demonstrating the additive color model.

The Color Wheel

You’ve probably seen a color wheel before, and you may have even used one. Here are a few ways you can intelligently combine color in your web pages, and anywhere else.

Monochromatic

A monochromatic color scheme consists of several different shades of the same hue. In other words, you pick a base color, and adjust the brightness level to create other colors. These color schemes can feel very stable and authoritative, but they can sometimes lack excitement.

Analogous Colors

When a color scheme has several colors that are adjacent to one another on the color wheel, the color scheme is said to be analogous. Analogous colors are often found in nature and as such, can be very pleasing to the eye. Yellow, green, and blue, is one example, where the green hue is the base color and yellow and blue are the analogous colors.

Complementary

Complementary colors are two colors that are opposite one another on the color wheel. The most common examples of this are purple and yellow, red and green, and blue and orange. Complementary colors are very common because they are visually exciting. When you put two complimentary colors side by side with a hard edge between them, they can be so visually unstable, that they appear to vibrate. Once you’re looking for complimentary colors, you’ll start to see them everywhere.

There are many other possible color schemes that I didn’t cover, but if you want to explore more color schemes, I highly recommend you check out Kuler at kuler.adobe.com, and experiment with the color wheel there.

Color in Web Design

During the 20th century, many people tried to link colors to subjective ideas. For example, one might have said blue is serene, or masculine, and red is very passionate, but this didn’t really work, one reason being that colors have various meanings across different cultures. A better approach is to think about the context your colors will be seen in, and pick a color scheme based on that.

When using color in your web designs, you need to decide on the audience. If you’re designing a corporate website for example, you’ll probably want to use an analogous color scheme because of its visual stability.

On the other hand, if you’re designing a website that needs to capture the short attention span of the typical website visitor, or if you’re designing a web application that will be used by people on a daily basis, an analogous color scheme would be a good choice. It generates enough visual interest to keep the eye moving, but no so much that it’s hard to look at for extended periods of time.

Finally, if you’re creating a marketing website for a sports team or a restaurant that needs maximum visual flair, it’s hard to beat a solid complementary color scheme. This keeps the eye moving through pages rapidly and generates a lot of visual excitement.

Finding Inspiration

When looking for color schemes, you might turn to a tool like Kuler, you might take a walk outside and draw inspiration from the natural world, or, you might even find an interesting color scheme in one of your favorite t-shirts.

Resources