Back to Top
The nuts and bolts for
Creative web development

Color and Web Design

This chapter introduces the basics of color theory, choosing color schemes that work, and good practice when dealing with color on the Web.

 

 

This sample is taken from Chapter 2: "Colors" of the Glasshaus Title "Web Graphics for Non-Designers"

Color performs a significant function in our world, providing an effective means of communicating a message. The skin markings on animals, and interpretations of these, influence thinking and alter actions. In everyday life, the color of lights, signs, and other signals give us compelling directions. On the Web, circumstances are much the same.

"color is a sensation and not a substance."
History of Color Photography (1947) Joseph Friedman

In the hands of a web designer, color is a powerful tool. With a grounding in fundamental color theory, it is a competitive advantage and an asset to clients. Strong reactions to color from the audience of a site can assist in such things as brand confidence, sales growth, and readership. Attaining or improving on these crucial goals can bring promotions, awards, and referrals of new clients.

A well-considered color scheme is frequently the difference between a reasonable web site and a great web site. It can also mean the difference between a great site and an unusable site, if the scheme used is too outrageous. To ignore the benefits of intelligent use of color is to limit youself as a professional, and to also limit the sites that you produce.

Color branding is a distinct afterthought for a great number of sites on the Web today. While for the vast majority of sites there is not always the budget, time allowance, or skill available to devote an army to brand management, ensuring that your color choices are inline with the style and goals of your branding is a quick and straightforward step forward that should not be ignored.

For some with a background in artistic pursuits, harmonious color selection comes instinctively, while for others it can be an unnatural process. The following guide to basic color theory and color schemes will give the uninitiated a chance to catch up. Also in this chapter, you will learn how to choose an appropriate color scheme and how to use color on the Web (and the various traps to watch for), as well as the importance of color consistency.

With this knowledge, and drawing inspiration from everyday life, creating attractive sites is achievable.

Color Theory

At the heart of basic color theory lie the three Primary colors: red, yellow, and blue:

Combining these gives the Secondary colors of green, orange, and purple:

Subsequently, going a level deeper and the combination of a Primary and Secondary color gives us the Tertiary colors of red-orange, red-purple, blue-purple, blue-green, yellow-green, and yellow-orange:

Tertiary colors are a form of intermediate colors, which are the result of further combinations from the color wheels presented. A color wheel shows these hues (as you will learn soon, a hue is a pure color) from which every other color is created.

Every other color available for use on the web is a variation in tone, tint, or shade, each of which you will learn more about shortly. Combining natural hues with the neutral colors black and white (and the grays in between), gives these variations. From the definition of a hue that follows, you will learn that these neutrals have no hue.

Color Terms to Know

Hue: A hue is a pure color with no black or white added. It is the feature of a color that allows it to be identified as, say, red or blue:

Intensity: Also known as saturation or chromaticity, intensity describes the identifiable hue component of a color. A blue with RGB (0,0,255) is considered intense (or completely saturated, and high in chromaticity) and 100% saturated. A gray, however, has no identifiable hue, and is termed achromatic with 0% saturation:

Shade: A shade is a hue with black added:

Tint: A tint is a hue with white added:

Tone: A tone is a hue with gray added (tending towards neutrality), or a hue with some strength of its complementary color added:

The results of adding a hue to its complement generally appear richer than the addition of straight neutrals:

RGB and CMYK: RGB and CMYK are color spaces relied upon by designers every day. The RGB space, representing red, green, and blue, will be the most familiar to web developers. Understanding the two, though, is as easy as comprehending the differences. RGB is additive color used by electronic displays (and curiously, the human eye) where red, green, and blue light creates the colors we see on screen. The default black you see on screen is simply a deficiency of all of these colors. Conversely, combining the three gives white.

CMYK, on the other hand, is subtractive and standard in the printing industry. A blank page, for example, is white and reflects all colors. Adding cyan, magenta, and yellow to the page actually subtracts from the light reflected. Combining cyan, magenta, and yellow does not give black, and so black is added independently. It is represented as the letter K.

Due to limitations of printing with ink, the CMYK color space is actually smaller than that of RGB. Photoshop, for example, has the ability to warn you of colors in the RGB space that will not survive a conversion to CMYK. As such, when converting from RGB to CMYK, some colors are lost (you may have seen Photoshop's "out of gamut" warning which is telling you that this is occurring). Nonetheless, for the most part web developers will not need to step outside of RGB, other than to occasionally convert corporate color values, and should not be troubled by this.

Alpha: The term "alpha" refers to a further value within a color definition, and determines transparency. As you may be well aware, a GIF provides support for transparency, but the value at a given pixel must be either fully transparent or opaque. Forward-looking formats such as PNG provide better alpha bearing, but are not as supported by browsers as the GIF and JPEG formats.

George Petrov

George PetrovGeorge Petrov is a renowned software writer and developer whose extensive skills brought numerous extensions, articles and knowledge to the DMXzone- the online community for professional Adobe Dreamweaver users. His expertise in countless languages and technologies gives inspiration and teach valuable lessons on his website – DMXzone.com, which is visited daily by more than 30.000 people and is most popular for its over high-quality Dreamweaver extensions and templates.

See All Postings From George Petrov >>

Share this Article

Comments

Color & Web Design Tutorial

I found this to be a very helpful tutorial. I don't quite understand what the first comment was referring to. I've always been taught primary colors were red, blue and blue, and Google agrees with that. (also, that person needs to learn how to spell!). I have seen some VERY poorly designed websites that use the wrong contrast for their text, some being impossible to read. Never understood why the web designer didn't "see" that! Good work, and thanks! Terri-Wake Forest, NC

Sorry there's just one major mistake

On the first page you state "At the heart of basic color theory lie the three Primary colors: red, yellow, and blue:" this is absolutly wrong, you obviously don't understand the meaning of primary colors. Here is the true definition of Primary colors"Primary colors are colors which cannot be obtained by mixing other colors" The pictures you show us of the colored circels are also totaly mad. For the true primary colors you should refer to CMYK for "paint" see this image:
http://nl.wikipedia.org/wiki/Afbeelding:SubtractiveColorMixing.png

and for the primary colors for "light" you should refer to:
http://nl.wikipedia.org/wiki/Afbeelding:AdditiveColorMixing.png

The rest of your piece is a good read but please take out the fist page because it makes no sence at all...

Congrats and thanks - a very helpful tutorial!

Martha, thanks very much for a great explanation of colour use on the web.  I just discovered it and really appreciate the thoroughness and clarity with which all the various topics are covered.  I actually took a (paid) online course on colour theory from a graphic design school last year, and its content doesn't hold a candle to yours in terms of actually helping me figure out how to come up with a good colour scheme for a client.  Great job.

- Frank Herr, Toronto

Color and Web design tutorial

I was expecting more in the way of determining which colors combine well and the best intensity levels to use for website development. It is stated at the beginning of the tutorial that these are important images but it is not covered during the lesson.
See all 11 Comments