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 |
A Starting Place for Your Scheme
A color scheme is often anchored to a seldom-altered brand. Consider a few of the more memorable color choices and schemes on the Web today, and you'll find that while some of the sites have undergone substantial redesigns, very few have deviated from the colors that their audience has come to recognize.
| |
The Register has grown to establish its place as bold and opinionated with a red that could not be more self-confident. |
| |
The Onion has selected a medium green half way between the heritage green of an established news source, and the livelier green of an onion shoot, reflecting its unusual and fresh attitude to humor. |
| |
Over many years, IBM has defined the blue of the business world, a color that exudes an impression of stability and careful dealings. Yellow is used as a complementary accent. |
| |
Target is one of the most recognizable commercial users of the red and white combination. Here they have added a fresh complementary green to introduce product for a new season. |
When creating a design for a client large enough to have an established brand, existing components should be considered first.
Corporate Colors
The first priority in the majority of color decisions should be consideration of current corporate colors. Opting for colors complementary or analogous to those within the corporate scheme ensures an eye-pleasing result.
| tommy.com partial triadic |
bluefly.com analogous |
| wishlist.com.au monochromatic |
caltex.com.au complementary |
| motown.com monochromatic |
adobe.com complementary |
A broad range of colors can accompany a single corporate hue, whether analogous, complementary, monochromatic, or triadic in relation. Your exact choice should depend on the industry, positioning, and goals of the site in development. Basing a color scheme on the familiar blue of the IBM logo (pictured below) could potentially take one of the four paths shown here:
If the identity colors are analogous, it is easy to extend the scheme to a third color adjacent on the color wheel. Similarly in the event of two colors having the same source hue, selecting a third shade or tint to form a monochromatic association is easy.
Sourcing Colors
The identity design firm contracted to create the style guide for your company or client has generally defined the corporate colors. If no one has them noted somewhere convenient, you should contact the designers. More often than not, these colors will be provided as Pantone values.
Pantone color numbers are a proprietary system created to guarantee accurate representation of color in printed materials. They are an essential part of life in a professional design company, but are of somewhat less use online, where differences in monitor quality, gamma correction, viewing conditions, video hardware, and user preferences combine to make the Web the occasionally impossible place we know and love. Nevertheless, where budget (and patience!) permits, kicking off with the correct Pantone colors is a good move.
The values you are given may correspond to any number of standards, so you might need extra information, but the more popular of those available is generally Pantone Uncoated.
To translate your Pantone colors to your RGB working space in Photoshop, you will need to open the colorpicker, select the custom button at the right-hand side, and then confirm that your color standard is selected in the Book drop-down box. Then enter the color digits and allow the dialog to auto-select your color, before choosing to return to the Picker. This will give you your RGB triplet and, in more recent versions of Photoshop, the color in hexadecimal format. This screenshot shows the CustomColors dialog box.
| |
| In the case of designers having disappeared and Pantone values being unavailable, color picking from a digital file, such as an EPS (Encapsulated PostScript file), is your next option. All quality graphics applications have a tool (the eyedropper in Photoshop, for example, highlighted in the image at the right) that allows "sampling" of the color value at any given pixel. |
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.
