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"
| User Level: | Beginner |
|---|---|
| Product: | Fireworks MX, Flash MX |
| Technologies: | CSS, HTML, Flash |
Choosing a Color Scheme
Successful colors schemes online are chosen to support the goals of a site, be they to strengthen branding, increase sales, or maintain readership. An intelligent color scheme not only looks good, but also creates a feeling in the audience. If you choose a scheme that does not support your goals, then you have fallen short of the potential of your site.
Color can assist in achieving goals by suggesting and atmosphere that visitors can identify with. For example, a site selling baby products could use vibrant scheme that parents would appreciate as a bright and positive influence, while an art gallery could employ a black background that presented an impression of sophistication and luxury.
While there is more to be considered than making an attractive site, knowing how to create a harmonious color scheme is a strong start. Harmonious color schemes are derived systematically from the basic color wheel of tertiary colors. For the purposes of this grounding, they are of four types: monochromatic, analogous, complementary, and triadic. Using each, it is best to aim for a selection of three or four distinct hues, coupled with neutrals.
Monochromatic
Monochromatic color schemes are derived from a single base color, and extended using its shades and tints (that is, a color modified by the addition of black and white). Consider, for example, a saturated green (RGB {0,255,0}). The swatches each show the pure hue in the center, with white being added to the right, and black to the left. In each case, the core hue remains identical.
| |
Monochromatic swatches: |
As you can see from the wheel above, by altering the value of this pure hue we can create colors that cleanly support the original.
| |
In Photoshop, changing the value next to the H in the color picker can alter hues. Adjusting the brightness is done using the value alongside the B. The S signifies the saturation of your color. The latter two values are measured as a percentage, while the hue is measured in degrees, positioning the hue on a color wheel. |
| |
Screenshot: victoriassecret.com This site bases its scheme around a feminine pink. The monochromatic scheme avoids detracting from the key, full-color photographs that sell the product. |
| |
Screenshot: evolt.org Here, the monochromatic scheme keeps the focus on the content within the site. |
A monochromatic color scheme is often considered for sites where content is of extreme importance, or when the opinions presented are of a moderate nature. It can give a site a clean and classic look, but also provides excellent opportunities to let full color photographs dominate. Monochromatic schemes are often appropriate for serious political and business sites such as those of some banks where instilling customer confidence in their experience. They are also highly suited to fashion sites where the understated monochromatic scheme supports the branding, but nevertheless allows the photographical elements to provide a focus.
Analogous
Selecting colors adjacent to one another on the color wheel creates a scheme of analogous colors. For example, orange, red-orange, and yellow-orange would be an analogous scheme with a fiery influence. The swatches below are based around an analogous set of colors with supporting tones and neutrals. Applying the first swatch, for example, could see the white being used on the darkest orange as a highlight, or used as a background color for a content region.
|
|
Analogous swatches: |
| |
Screenshot: bullseye.com.au Bullseye, providers of Internet services, use a largely orange scheme that is a direct contrast to the blue used heavily by firms providing professional services to corporate clients. |
| |
Screenshot: hillsmithestate.com Winery Hill Smith Estate has used a combination of heritage greens, accompanied by an analogous straw color that maintains the natural feel. |
An analogous color scheme can provide a truly harmonious feel to a site with a balanced visual experience. Using one of the colors predominantly will establish a solid base for your site layout, while the partnering colors maintain the soothing appearance. Examples of analogous themes are readily present in nature, from the blue-greens of the ocean to the red-browns of natural timber. Such schemes are useful in presenting resource companies as solid and hardworking, or environmental organizations as earthy and resourceful.
George Petrov
George Petrov is the Founder of the highly successful Zones: DMXzone.com, FWzone.net, FLzone.com, CFzone.net, DNzone.com and FlashFiles.nl
He has developed the comprehensive Dynamic Zones Content Management System that is the brains driving them and constantly supports their online communities with his extensive and valuable knowledge.
He is a renowned web development 'Guru' who has written many articles and extension for Adobe's Dreamweaver.
George Petrov is also the CEO and Founder of Dynamic Zones and also very proud of his children Sofie, Victor and Alexander!
User Reviews
Total of 11 reviewsColor & Web Design Tutorial
Written by Terri Robbins on March 23, 2005I 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 ...
Sorry there's just one major mistake
Written by P R on April 19, 2004On 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 ...
Congrats and thanks - a very helpful tutorial!
Written by Hank Fur on January 21, 2004Martha, 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 ...
Color and Web design tutorial
Written by Judi Anglin on June 2, 2003I 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 ...
RE: Excellent...........!!
Written by Martha Graham on December 19, 2002Sorry, no .pdf file. Martha Graham
Excellent...........!!
Written by oki fernandy on December 18, 2002Is there any *.pdf file for this tutorial ???
Great Tutorial
Written by Jeremy Conn on December 7, 2002Awesome tutorial... very nice to see a focus on how traditional design skills need to stay important regardless of the medium. Well thought out and arranged.
