Colour Coding in HTML

Named Colour
You can name colour as in colour names ="red". However it is best to use hex values for colour.

Hex colour
HTML colors are defined using a hexadecimal notation for the combination of Red, Green, and Blue color values (RGB). The lowest value that can be given to one of the light sources is 0 (hex #00). The highest value is 255 (hex #FF). e.g. White is #FFFFFF, background colour of this page is #8BAFD3

Background Colour

bgcolor attribute inside the opening body tag

colour.html
<body bgcolor="red" text="black">

 

Background Colour with Hex code

This time using hex codes to specify the background colour of the bgcolor attribute and the text colour

colour2.html
<body bgcolor="#666666" text="#cccccc">
This creates a dark grey background with a paler grey text.

Note: when specifying hex colour values ensure that # is included at the start.

Coloured Links

In the links section we looked at how you can specify colour values for links in the body tag.

urls2.html
<body text="#000000" link="#FF0000" alink="#000000" vlink="#00FF00">

If you don't specify the colours for text and links, the standard default linking colours are:
Text=black
Link=blue
Active Link=orange
Visited Link=magenta

Tips

Colorpickers

http://www.html-color-codes.com/

http://www.w3schools.com/html/html_colors.asp

http://www.lynda.com/hexh.html

You can select hex colour values in photoshop. It is a good idea to experiment with colour relationships in photoshop, then when you get the colour combination you like, you can use the color picker to select colours so that they become the selected colour, when you double click on the selector box, various colour values are available to you, and the hex value is also displayed.

 

 

 

Tips

Online Color Scheme Picker

http://www.colorschemer.com/online.html

Colour shades and tints
It is very effective to use combinations of shades and tints of a colour belonging to the same colour family. It creates a harmonious colour scheme.
Example Shades at:
http://www.w3schools.com/html/html_colorsmore.asp?color=0

 

 
Colour Picker in Photoshop.
Create New file in photoshop, experiment with background colours and text colours, if you wish to experiment with colour shade relationships a tip is when choosing the colour for the text, use the color picker tool to select the background colour then adjust the colour slider...here you will have a choice of colour tones in the same colour family.

Useful Resources

http://www.lynda.com/hex.html
http://www.builder.com/Graphics/CTips/ss01.html
http://www.html-color-codes.com
http://graphicssoft.about.com/cs/color/index.htm
http://www.colorschemer.com/online.html
http://www.coolhomepages.com/cda/color/

Colorpicker software
colorpicker software

Example Colour Values
http://www.w3schools.com/html/html_colors.asp

My own Gathering of links and Resources on Colour
http://homepage.eircom.net/~musima/colourtheory/colourtheory.htm

 

Interesting Example Sites that use colour

http://www.smartmoney.com
http://www.huihui.de
http://www.copyrightdavis.com
http://www.clevelandbrowns.com/