AOL - Web Page Course - Working with colours

Working with colour

STEP 8
Using colour in your web pages effectively is a very important part of good design. You must remember that a large audience will be using your web pages to gather information or learn some specific information on the company you have represented.
There are so many examples of poor use of colour (in our opinion) too numerous to list here. The basics of good design include using "contrasting colours" with care and to use the K.I.S.S. priciple again - "Keep it simple students!".
Using red, dark blue and green text on a dark background will only serve to frustrate your web page visitors as the text will become very hard to read. A lot of web page designers use a darker background with lighter text for the body because the dark background is more "soothing" to the eye when staring into a monitor late at night. You muse use this design strategy with care; over doing it will drive visitors away from your pages, NOT hold their attention (which is what you are trying to accomplish in the long run...).
As there are different browser applications and computer platforms, there are different colour groups and rules. We are going to introduce you only to the simplest of "hexidecimal numbered" colours in this course. We will provide a valuable link to a couple of "browser safe colours" sites at the end of this section - drop by for a visit, bookmark these sites and use them for reference on a regular basis.
"Hexidecimal Colour Numbers" are those that are based on the RGB colour space (red, green and blue) that controls the display of colours on your monitor. These reason we ONLY use 256 total colours in web page designs is that most of the Internet community still use standard VGA computer monitors that only support the display of 256 levels of colour. Graphic artists usually use the "millions of colours" colour space for printed material and printing presses - we have a much easier system in which to use.
The "hexidecimal colour space" is made up of the following elements:
" # " - number sign
" ff0000 " - six letters and or numbers
The " # " alerts the browser to use "hexidecimal colour space" while the letters and numbers represent the "levels" of red, green and blue for the monitor to display where the first two letters or numbers represent the "red value", the next two represent the "green value" and the last two represent the "blue value". The letters "FF" call for the colour in question to be displayed as "completely ON" or using ALL 255 pixels displayed for that colour while the numbers "00" call for the colour to be displayed as "completely OFF" or using no pixels to display it. There is a somewhat confusing addition to this colour space - A number of "33" calls for 51 pixels (or 20% tint) to be displayed while "66" calls for "102" pixels (40% tint) and "99" for "153" pixels (60% tint). This allows you to control shades of colours quite carefully. There is also another code in the "CC" letters that will display "204" pixels (80% tint) of any colour. Don't let this system overwhelm you too much at this stage, it gets easier which practice and you can always refer to your browser safe chart anyway for reference.
Using this method, the colour value of "#00FFFF" would display a colour that has "no red, 100% green and 100% blue" which would display as an "aqua" colour.
There are a couple of "unique" examples that will display "specialty" colours like "C0C0C0" which will display the colour as "silver" or a very close approximation. The real trick to all of this is to simply experiment and find what works best for you.
HINT: You are designing a web page for your company. You are presented with the challenge of trying match the corporate colours as close as possible on the website. Get your hands on a "digital copy" of the company logo and open it in your Paint Program. You should be able to "sample" the colours with the "eye dropper" tool and get the approximate values for the RGB that makes up that colour. Convert this colour into the "hexidecimal" information as closely as possible using the "tint values" (33, 66, 99, CC) to match the colour on the website.
Now it is time for you to try to use colours with text on a simple page. Enter the following in your text editor:
<html>
<body text = "#000000" bgcolor = "#FFFFFF">

 AQUA TEXT 
 BLACK TEXT 
 BLUE TEXT 
 FUCHSIA TEXT 
 GRAY TEXT 
 GREEN TEXT 
 LIME TEXT 
 MAROON TEXT 
 NAVY TEXT 
 OLIVE TEXT 
 PURPLE TEXT 
 RED TEXT 
 SILVER TEXT 
 TEAL TEXT 
 YELLOW TEXT 

</body>
</html>

CLICK TO TEST

STEP 9
You may remember from earlier that we used "non-hexidecimal" colours when we set up our pages. We used the values "white" and "black" instead of "#FFFFFF" and "#000000".
The reason we can do this is because Netscape browsers understand "colour names" in addition to "hexidecimal" colours. This is a very easy trap to fall into as it is a lot easier to enter colour names and not values. The problem with this comes when non-Netscape browsers are used like Microsoft Explorer and those that support AOL (America On Line), etc. For the time being, we suggest you stick with the "hexidecimal" colour space to ensure that your pages will display more consistently across a wider range of Internet browsers.
For the sake of interest, try entering the following code into your text editor to see what happens:
<html>
<body text = "#000000" bgcolor = "#FFFFFF">


BLUE VIOLET TEXT 

BLANCHED ALMOND TEXT 

CORN FLOWER BLUE TEXT 

LAVENDER TEXT 

PALE GOLDENROD TEXT 

SANDY BROWN TEXT 

LIME GREEN TEXT 

</body>
</html>

CLICK TO TEST
Here is a great website that displays all the "browser safe" hexidecimal colours that you can use in your web page design. Enjoy.
Browser Safe Colour Chart - CLICK HERE!

LET'S GET ONTO THE LINKS!
The next section of this course gets into the REAL nitty gritty of web page design... hyperlinks! The most useful feature of any web page is the use of "interactivity" within your own website and in relation to the entire World Wide Web. This may be a really good place to take a breather - this is the MOST IMPORTANT part of designing really useful websites!

[ CONTINUE ] [ BACK ] [ HOME ]