Color My Web

Can you imagine a web without color? It makes for an interesting vision indeed. Where would we be with only plain black and white to make use of? You can forget those intricate layered interfaces, and the animation can join the scrap heap too. So much of our modern design work is centered on the use of various web colors to create an atmosphere. Depending on how a designer implements it, a well chosen color scheme can make a homepage stand out from your screen.

Unfortunately, a poorly chosen scheme can burn the eyes so horribly that we're tempted never to return.

But why is color such an essential component of a self-respecting web page? The truth is, if you design a website which uses every last color in the rainbow, you'll be making an even bigger mistake than somebody who chooses, say, pink for a male magazine.

Color sets the mood, tone and first impression for your site. Of course, it doesn't work alone. But it's one of the bare essentials of good design practice.

We use color for a variety of purposes, ranging from text to table cell backgrounds. The standard HTML configuration is to output text in black and backgrounds in white. We can change this easily by dipping in to the code and changing the FONT tag, or the BODY tag, as shown below.

<font color=â€â€¦â€>
<body bgcolor=â€â€¦â€>

It's also possible to get the same results by implementing a Cascading Style Sheet (CSS). To do this, we would simply define the properties for an HTML group set. The CLASS tag stipulates which style set an HTML object falls under.

For example;

<p class=â€myStyleâ€â€¦

In the tag above, any text that falls within the P tag (Paragraph) will be sent to the CSS for evaluation and the correct style will be applied.

So presuming that the CSS style sheet had a property under P.myStyle that looked something like this:

P.myStyle { color: White; }

Any paragraph classed under that particular style set would have white text. This is a rather basic example of how we use HTML and CSS together to provide global settings for color.

Why don't we simply use the FONT tag for everything? Well, if you can imagine going through how ever many pages your website has, and reassigning a color to each FONT tag, you'll be busy for a long time indeed. CSS is extremely efficient in comparison to hard coded HTML.

You may have noticed in the example above, the color is defined as "White". This is, technically speaking, very bad practice.

Whenever you assign a color to an HTML tag, or CSS for that matter, you can use either the name of the shade, or the equivalent hexadecimal value.

Hexadecimal is simply a way of providing an RGB triplet (CMY triplets are not available) to the browser, which renders the exact color on to the user's monitor. While stipulating "White" or "Red" can show the same results, what your browser associates as red, somebody else's might associate with a deep mauve. Hexadecimal takes the issue away from the browser's interpretation, creating a more consistent color scheme.

For example, changing a tag of "White" to "#FFFFFF" will make no difference whatsoever when you view the page in your browser. Both terms equate to white. But if you choose a color such as grey, various browsers have various different definitions of what constitutes as being grey.

When we break the Hex code down to its core essence, we're left with three hexadecimal numbers. These exist in pairs of two, as you can see below.

# FF (< First triplet - RED) 00 (Second triplet - GREEN) 00 (Third triplet - BLUE)

Speaking in hexadecimal jargon, this attribute will produce red color. The reason for that is because the red triplet is FF, which is the strongest hue you can have in hexadecimal. The two instances of "00" represent the lowest hue you can have on the scale, in the same way as a traditional zero effectively.

When the code is sent to the browser, and subsequently your monitor, the hex code will send a little message to display the entire red channel, and none of the blue or green channel. This gives us red output.

As you can imagine, the hexadecimal format offers much more leeway for manipulation than standard color name attributes. There are hundreds of possible hex combinations, but we can shorten them down to what's known as the 216 browser-safe color codes. These are colors that can be produced to the exact same effect on an old-fashioned 8-bit monitor.

When it comes to designing websites with maximum usability, you'll probably find that this becomes a factor in how you go about your work.

If you select a hex code, and it doesn't fall within the browser-safe color set, a process called dithering will take place. We don't like dithering. This is where the browser will evaluate the code and try to output the closest match that it can find. Subsequently, the dumber browsers on the market can make a complete mess of your carefully designed color theme.

How do you know whether your hex is a browser-safe color? The important thing to take note of is that valid hex codes contain a small number of possible options. These are 0, 3, 6, 9, C and F. If your code contains any figure which doesn't fall within those bounds, you run the risk of inconsistent design. For further information on valid codes, be sure to check out the w3 consortium website, which is the holy grail of all web usability resources.

Once you have the basics of applying color attributes, you can begin to enjoy experimenting and trying to find the right theme for your site. After all, colors can be used to provide some extra zest to those plain white tables, or the default black text. Feel free to experiment and play with your CSS Macromedia's Dreamweaver is a good tool for this.

But stop for a moment. How many of the biggest websites on the Net actually pack their templates with color? Think of Ebay. Think of Amazon. Think of MySpace. In all of these cases, you'll find that white is the most common color. There's good reason for this. White space is one of the most useful weapons in the web designer's armory.

White is the perfect tone for your standard web template, presuming that you don't have a pre-arranged theme to meet. It's clear, easy on the eyes, and acts as an excellent compliment to your text and images. If you scout around the Net, you'll generally find that most websites make good use of white.

Black, on the other hand, should be used as an absolute last resort!

Color themes should be employed across the entire website, not just parts of it. You will also have to make the decision between a two-color template, and a three-color template. What's wrong with four-color and five-color, you ask? It's not discriminating, it's just widely accepted that any more than three global colors and you won't have a theme at all.

A two-color theme can prove equally unattractive in the sense that contrast is important. Don't get in to the habit of using the same color for everything. You should use it sensibly to draw your visitor's eye where you want it.

Color is the one attribute which can give your website the fresh feel that you desire, so use it carefully and avoid those black backgrounds!-------------------------------------------------------------------------------------------------------If you are a business owner get listed at Best Technology Site, part of Localwin Network.