Monochrome Theory

In this tutorial (and possibly over the next few updates) I’m going to explore the idea of color theory for web designers. Why? Successful colors schemes support the goals of a site, from the all-important “domain branding” concept to increasing of sales. When you come up with a good, strong color scheme, you can evoke a feeling in your audience that helps you realize the full potential of your site.

Color can assist in achieving goals by suggesting an atmosphere that visitors can identify with. For example, an art gallery can easily get away with shades of black and gray to represent sophistication, but any sane person would never use black as a base color for sites selling baby products.

Web Usability experts will cringe at the entire concept of this tutorial series. I strongly feel, though, that even us avid designers with a love for visual aesthetics can create an attractive site while keeping in mind the idea of WC3 Compliancy… There is obviously more to be considered in web design than the attractiveness of a site – its content, quality links, and every other thing we must constantly stress on – are of vital importance. Come up with a harmonious color scheme, though, and you’re going to have a place that everyone wants to visit because they identify, and feel comfortable.

So enough of the background? Let’s work on the first bit: Creating a site design using monochromatic colors.

Monochromatic Meanings

Monochromatic color schemes are derived from a single base color, and extended using its shades and tints. In simple terms, this basically means that we would start with a saturated green in Photoshop (RGB 0,255,0) and add to it black or white.

Using this idea, we can create a color palette for the design we are working on with colors that cleanly support the base color. How do we properly do this in Photoshop?

1. Using the color picker tool, grab your base color (or one you’re happy to experiment with for now).
2. In the color picker menu, we can see and adjust the values next to three letters, “H”, “S”, and “B”. The letter “H” stands for Hue, “S” for Saturation, and “B” for Brightness.
3. By adjusting the “S” and “B” values, we are changing the intensity, saturation, etc. of our color – but not the basic hue itself. If we start changing hues, we’re ruining our monochromatic scale.

“Real World” in Monochrome

What type of sites use monochromatic colors? Why are you being subjected to all this color crap anyway? Don’t give up yet…

A monochromatic color scheme is often used by sites whose content is of extreme importance, overriding the need to capture an audience with the site itself. It can give a site a clean and classic look, but also provides excellent opportunities to let full color photographs dominate. Think serious political and business sites, banks, customer confidence, as well as fashion sites that understand monochromatic schemes support their own branding and allows photographs to really stand out.

Even with my wonderful writing, I’m sure examples will provide much better understanding.

www.torrid.com This site has focused on a monochromatic scale of reddish shades that not only strongly strengthen their domain branding, but also sets the full-color photographs of their products into sharp relief. Even beyond this is the actual base color choice itself – colors of flame, which evoke an exciting atmosphere.

www.godiva.com

Godiva needs no introduction to any chocolate lover. In their site, they have not worried about branding, other than their branded name. The monochrome colors they have chosen are neutral shades of orange which serve well to highlight text and compliment the photos of their recipes.

Designing Monochrome

Below are monochromatic palettes for each of the five basic colors on the color wheel, plus purple. Save them for your future use, if you like.

1. Defining the color palette – A monochromatic color palette should contain your base color in the middle, two darker shades to the left and two lighter shades to the right. The shades to the right are best if they are more “neutral” – containing a lot of white, or are “earthy”.

2. Palette in Practice – Your next step is to define a “mock” diagram of the layout you will eventually create. This diagram will be nothing but colors and your most basic shapes. From here, you will use the diagram to fill in pictures, textures, etc. – this tutorial’s about color theory, remember? :)