The Smashing Book – The Ultimate Guide to Fantastic Color Usage

• By The Smashing Editorial
• October 5th, 2011
• Color theory, Colors
• 3 Comments

← Usability Principles for Modern WebsitesTOCFantastic Color Usage (2/3) →

How can color in Web design focus attention, inform decisions, inspire action, organize information, highlight elements, balance composition and enrich experiences? We’ll explore answers to these questions in this chapter and look at several examples of good color usage in websites.

Primal Needs

Researchers theorize that the color vision of primates evolved to its advanced color-sensitive state because of early needs to distinguish between different types of food, find mates and survive dangerous predators and situations¹. Choosing between the fatally poisonous green lantana camara berry and the not so fatal red one would have been fairly difficult without color vision.

We are now gathering, experiencing, analyzing and sifting through information at a much faster pace than our evolutionary ancestors did, especially when it comes to websites and other media. Poor color decisions in design probably won’t kill anyone, but they can produce an undesirable experience. Therefore, understanding how color can shape and enrich a visitor’s experience and interaction with a design is important.

Building On The Basics

You probably want to dive right into the awesome world of color inspiration and information, but it is important to first discuss some basics about color, color theory and the language we use to communicate about color. Once we have that basic foundation, we can explore color and find inspiration everywhere in our world.

Color Primer

Our eyes have three different types of color receptors, which each respond to the red, green and blue colors of light differently. For instance, the color blue stimulates one receptor more than the others and as a result transmits different information to the brain. The way in which different combinations of color affect these different receptors results in the millions of different kinds of color, called hues. These hues can be mapped to a circle (often called a color wheel) in degrees (°), with each 60° marking a different base color. Three of these base colors are called primary (red, green, blue), three are called secondary (yellow, cyan, magenta) and the six in between them are called tertiary.

A popular color model in computing is called HSB. It uses hue and two related terms, saturation and brightness, to define and describe colors. Saturation (0 to 100%) refers to how vibrant a color is compared to its maximum potential. Brightness refers to a color’s lightness (0 to 100%). Pure colors have high brightness and saturation values, making them more vivid. Dark colors have low brightness values, making them blacker. The less saturated a color, the more colorless it appears, until it has no color. As you can see from the screenshot, many colors can be made just from mixing one hue degree with various shades of white, black and gray. Another screenshot demonstrates this for red at 360°.

The primary colors in computer design are red, green and blue. The secondary colors, cyan, magenta and yellow, together with the primary colors make up the six distinct color hues of the color wheel. Hue values are presented in degrees (°), while hexadecimal values are labeled with the standard pound sign sign (#).

In discussing color, other terms that describe differences in colors include tint, shade and tone. Tint is the amount of white that a pure color has. Shade is the amount of black it has. Tone is the amount of gray it has. The screenshot demonstrates how a color changes based on these properties.

By adjusting the brightness and saturation components of a single color hue, roughly 46,000 distinct colors can be created per color hue.

It may be helpful to discuss color with reference to tint, shade and tone. When a fellow designer says, “I like the color of the logo, but it should be a darker shade”, you’ll know exactly what he means. Brightness and saturation are more complicated concepts and tend to mean different things to different people, making them less useful when discussing ideas about color.

Combining hue, saturation and brightness, we can create any color visible to the human eye². Most computer monitors display color through a mixture of the primary red, green and blue colors. Historically, artists have used red, yellow and blue as primary colors. The print industry uses cyan, magenta, yellow and black to produce different colors. Computers use red, green and blue because monitors emit these colors of light. With a value between 0 and 255 assigned to each color, a computer monitor can produce up to 16,777,216 different colors. Red, green and blue lights mixed together at full value (R:255, G:255, B:255) produce pure white light, while the absence of these three colors (R:0, G:0, B:0) produces no light, or black. This type of color mixing is typically referred to as the RGB color model.

Colors on the Web are understood by the browser as hexadecimal values and are typically labeled with the pound sign (#). Each red, green and blue element of a color is converted from a number (0 to 255) to a set of characters that the computer can understand. At each end of this scale, 0 is represented in hexadecimal format as “00,” while 255 is represented by “FF.” The primary colors in their hexadecimal equivalents are #FF0000 (red), #00FF00 (green) and #0000FF (blue). Many graphics applications automatically convert HSB, RGB and hexadecimal values to each other, but a strong understanding of each will only make your life easier as a designer.

—

1. Regan, B. C., Julliot, C., Simmen, B., Vienot, F., Charles-Dominique, P. & Mollon, J. D. 2001 Fruits, foliage and the evolution of primate colour vision. Phil.Trans. R. Soc. Lond. B. 36, 229-283.
2. Backhaus, W., Reinhold, K. & Werner, J. S. 1998 Color Vision, Walter de Gruyter & Co., New York, p. 321.

← Usability Principles for Modern WebsitesTOCFantastic Color Usage (2/3) →