|
|
Colour |
|
Computer screen technology is such, that you can have almost unlimited numbers of colours (well over 16 million). But browsers can make only 256 colours reliably, and all browsers keep a few colours to themselves, so there are 216 left for web page developers: white, black and 214 in between. These colours form the so-called 'browser safe palette', or the 'non-dithering' colours. A lot of them have names the browser (and you!) can understand. You can use these if you want a specific colour for the background of your page, or for the letters, or the headings. Browsers only understand the American spelling of 'color'. For example:
| Click | here | to see the 'named colours', in the box below. |
Make a file with the following:
<html> <head> <title>testing colour</title> </head> <body bgcolor="black" text="white"> <p>This looks rather like a blackboard. Shall we do some sums?</p> <p>1+1=2</p> <p>1+2=4 <font color="red" size="+2">X</font></p> </body> </html>
| Can you guess what it looks like? | Have a look! |
If you want to change the colour of the letters in a heading, for instance, you will have to include a complete <font color="colour">...</font> inside the header tags. For example:
<h4><font color="red">Red heading 4</font></h4>gives:
Colour comes from the way we see light. Combining different colours light will give a different colour, a bit like mixing paint. The biggest difference is, that if you mix lots of different colours of paint, you will get black (or nearly), but if you mix lots of colours of light, you get white.
Building up colour for a computer screen works with tiny red, green and blue dots. If you use only red, and no green or blue, you get primary red. Only blue gives primary blue. Primary yellow is made from equal amounts of red and green, and no blue. So primary yellow in light has a slightly different role compared to the one in painting...
Colour has three properties:
You sometimes see the letters HVS (Hue-Value-Saturation) used in the description of colours inside computer graphics programs (like PhotoShop, for instance).
With the red, green and blue, a numbering system has been devised for computer colours; the amounts of red, green and blue are not counted in tens, but in sixteens (the so-called 'hexadecimal system', you may have heard of it): 0 to 9 as usual, and then a, b, c, d, e and f. f is the largest amount of the colour, 0 the smallest.
A complete colour number is built up of 7 digits, e.g.#ff0000. The '#' tells the computer that a hexadecimal number is coming. After that, the first 2 digits are for red, the second 2 for green, and the last 2 for blue. So in the example, the computer should give you the full amount of red (ff), no green (00) and no blue (00), which means primary red. The fact that there are 2 digits for each colour, means that in effect there are 16x16 red colours, 16x16 green colours and 16x16 blue colours, a total of 16x16x16x16x16x16 colours (which gives the 'well over 16 million' mentioned above).
Not all those 16 million colours are available for all computer screens to work with at the moment. You should try to stick to the 'non-dithering' colours. These are the ones which have only double sets of the following numbers for each colour: 0, 3, 6, 9, c and f. So the example in the previous paragraph (#ff0000) is a non-dithering colour. There are 216 of them, as you can see in my colour table.
Imagine a clock face. The primary colours are spread evenly around the face: red at 12, yellow at 4 and blue at 8 o'clock. Then come the secondary colours, which are equal parts of two primary colours: orange at 2, green at 6 and violet at 10. These colour names work fine in HTML, you can use them directly (as shown above). This is also the wheel you should use when choosing new colours for your bedroom.
| Click | here | to see those named colours in action, in the box below. |
For web page design, we have to approach the colour wheel slightly differently. Here red is still at 12, but green is at 4, and blue is at 8 o'clock. Then yellow ends up at 2, 6 o'clock is a mid-blue usually called aqua, and sometimes cyan or even sky-blue, and 10 o'clock is bright pink, usually called 'fuchsia'. This is so that the numbering (the hexadecimals) is in order and matches the way colours are made on a computer screen.
Have a look at my colour wheels. Comparing the two, you can see that the light wheel is a slightly 'fairer' representation of colour. This wheel is not so dominated by the red colours. You can see in both wheels that yellow, however strong a colour in itself, only represents one brick, and does not 'deserve' to draw out the red part of the spectrum as much as it does in the paint wheel.
Some colour combinations 'work', some don't, everybody knows that. But is there a reason behind this? With the colour wheel ready, it is quite easy to make combinations that work. You need the paint colour wheel to see it easily; the light colour wheel only comes in for the numbers of the colours. Take the primary colours: red, yellow and blue. They work well together. The simple reason for this, is that they are evenly spread around the wheel. This works for any combination of three colours which are spread evenly. Just the same, complimentary colours, the colours which are directly opposite each other in the wheel, work well together, e.g. red and green, or blue and orange, or yellow and violet. Again, the intermediate colours (colours made up from a combination of primary and secondary colours) obey the same rule. There is one more rule: any set of colours (and that can be more than three) which are in the same one-third of the colour wheel, will look nice together.
For an excellent full explanation of the different colour wheels and the theory behind them, have a look at Secrets of Web Color Revealed, by Carrie Gatlin. If this link does not work, you could have a look at the version I have created here.
What do we need? HTML and the .html file Tags Formatting Head and body
Size and shape Colour Colour table Colour wheels Pictures
Special characters Special characters table Hyperlinks Combining and nesting tags Lists
Tables Frames Style sheets Maps Forms Scripts Publicising (meta tags) Bits and pieces
| Course created by Maria Turkenburg | TurkenburkiePower!!!©2001-2005 |