Web Colours Made Clear

In 1994, 216 colours were defined by Netscape having a priority in browsers based on the 256 colours exhibited by an 8-bit system. However, 40 colours showed up differently between PCs and MACs and were therefore done away with.

These 216 fixed colours, also named web safe colours have been universally recognized by all browsers and operating systems. In other words, websites using these colours only are more likely to look similar on any browser.

Fewer than 5% of computer systems are at present using 8-bit systems and are consequently limited to 256 colours. Nevertheless, you should still make use of web safe colours to start off with, particularly for logos, flat colour illustrations, backgrounds, and large areas of an identical color in any picture.

Web colours are constructed around 3 pairs of hexadecimal digits. Each pair stands for a value from 3 root colors: red, green, and blue usually shown as RGB.

Hexadecimal is not based on 10 digits but 16. Therefore, A would be equal to 11, B to 12, and so forth. For example, 000000 is black, FFFFFF is white and FF0000 is red. The first pair of numbers show the amount of red, the second set represents how much green and the last set stand for how much blue is employed to get that particular colour. 00 represents no amount of that colour (0%) while FF is the most amount of any colour you could use (100%).

The percentage breakdown goes as follows:

0%=00, 20%=33, 40%=66, 60%=99, 80%=CC, 100%=FF.

Colours which are made up of 3 pairs of identical hexadecimal digits, or web safe colours, are composed of every combination of 00, 33, 66, 99, CC, and FF for each root colour (6 x 6 x 6 = 216).

Nowadays, computers aren’t limited anymore to the 256 colours shown by 8-bit video cards. 4096 colours are displayed on 16-bit cards (also called web smart colours), whereas 32-bit cards will show millions of various colours (known as unsafe colours). The complete number of possible colours goes beyond 16 million, because each root colour can be one of 256 values (256 x 256 x 256 = 16,777,216). As long as your video card will support it, your browser will be able to display any of these colours.

You can find many colour wheels and charts available on the net that will help you choose web safe, web smart, or unsafe colours. Find a few below:

216 web safe color charts can be found at: http://www.permadi.com/tutorial/websafecolor/

And also at: http://www.techbomb.com/websafe/

The 4096 Colour Wheel will give you the hexadecimal values for web safe, web smart, and unsafe colours together with various saturations of shades. This is available at: http://www.ficml.org/jemimap/style/color/wheel.html

The 4096 Colour Picker & Mixer shows you how different coloured texts can appear with matching coloured backgrounds by using the web smart colour palette. This is available at: http://www.webcolors.freeserve.co.uk/pick4096.htm

The DHTML Colour Wheel gives the hexadecimal codes for all 16,777,216 colours. It can be found at: http://www.geocities.com/~prof_al/examples/colorwheel.html

Another version of the same colour wheel can display your chosen colour on the entire page. You can find it at:


Despite the fact that modern browsers display beyond 16 million colours, any colour which is not web safe won’t display in the same way on different browsers. If you would like to make use of colours on your web pages from the web smart or unsafe colours choice, always double check your pages on all the different browsers. Doing this will ensure that your chosen colours look good to all the people visiting your website.

Martin Redford is contributing editor at WebDesignArticles.net. This article may be reproduced provided that its complete content, links and author byline are kept intact and unchanged. No additional links permitted. Hyperlinks and/or URLs must remain both human clickable and search engine spiderable.

Using Your Web Site Graphics To Their Best Advantage

Graphics can make a site more attractive when used properly; also, it can make your visitor’s impression a positive one. However, you must be cautious, because if a web site is unattractive, your visitor will get a negative impression and click away.

When you insert graphics on your web pages, you must try to use your sense of logic. For example, adding more graphics won’t make your website better! Don’t overwhelm your site with graphics, clip art, and animated gifs. Excessive graphics can lead to your page loading slowly, as well as muddling the web page. Also, excessive graphics can aggravate your visitors, and increase the difficulty for your visitors to read the content.

In fact, graphics should only be used in order to contribute to a site’s good functioning. A header graphic for example is good for your site to be recognized, your products can be shown using graphics, drawing attention to important sales points can be used with arrows or check boxes, and a button for your payment link. If you like, you can also add a footer graphic, buttons for your navigation menu, and/ or a background image. Other graphics should only be used if they are for adding something to your site.

It is best to only use JPG or GIF formats for your graphics since these two formats are universally used on the Internet. A new format called PNG will come into use soon, but it is not broadly used and therefore not supported in all browsers.

You can obtain images from several places. They can be personal images or images that you’ve bought. You can also download images for free from the following websites: Free Images at http://www.freeimages.co.uk/ which offers over 2500 free photos and Stock.xchng at http://www.sxc.hu/ which has over 100,000 free photos for you to choose from. Several other sites also offer graphics like buttons, arrows, clip art, GIFs, etc. Some are free, others you might need to buy. Of course, you must be ready to spend hours browsing through thousands of images or graphics till you find the right one.

If you want your page to load faster, make sure you optimize your images and graphics. To do so, you will have to reduce the graphics to their smallest size while still maintaining their quality. The larger your file size, the more KB it will take up and the longer it will take to load. Your graphic mustn’t be larger than 30 KB on your web pages and you must always include a height and width attribute in your image tag for the download time to be optimal.

These tools can help you optimize your graphics and images:

1) PIXresizer, a free image resizer from Bluefive you must download.
Software at http://bluefive.pair.com/pixresizer.htm.

2) Dynamic drive offers a free online image optimizer for JPG,
GIF and PNG formats at http://tools.dynamicdrive.com/imageoptimizer/.

Use JPG graphics for photos and GIF graphics for anything else on your web site like buttons and arrows. JPG graphics are good for photos because they use a compression method that does not reduce the number of colors in the image. GIFs are usually better for graphics containing few colors as they can only use a 256 color palette. A colourful GIF, may need to be saved as a JPG for its quality to be kept intact.

When first visiting your web site, a viewer will see your header graphic so it must tell him what the content of your site is about. Part of your web site’s identity is in the header graphic so it must be used on each page of your site.

Consider your header graphic as the cover of a book. A book cover should catch the attention and the user and encourage him or her to open the book. The purpose of a header graphic is the same; it should encourage your visitor to stay on your site and look through it.

If you have products to sell, put in an image, especially if your products include ebooks and downloadable software. As these products are virtual and not physical, your visitors will feel safer about buying the product if they see a book cover or a software box.

You can also use arrow or check box graphics to grab the attention for the most important areas of your sales letter, but don’t overdo it. If you use these graphics excessively, your visitor will disregard them.

Your payment button can be a simple “Pay Here” type button or a more complicated one which will include credit cards images together with the payment information. Always use graphics that fit in with the theme of your web site.

You can use a narrow colored strip for your footer or a smaller version of your header graphic. Always put in the copyright information.

Make sure your background image, color, colors used in your text, and the colors in your graphics don’t clash. All the works of your web page should be in harmony. Look at how all the graphics come together as a whole, not individually.

Finally, make sure the graphics match the theme of the site. If your site is more romantic, choose pastel colors and minimal graphics. On the other hand, if your site is bolder, use brighter colors and loud images.

Graphics are an important part of any web site design. When used properly, they can be a really positive feature for your site.

J.M. Stevens is contributing editor at WebDesignArticles.net. This article may be reproduced provided that its complete content, links and author byline are kept intact and unchanged. No additional links permitted. Hyperlinks and/or URLs must remain both human clickable and search engine spiderable.