Colour (color to our transatlantic cousins) on computer screens is made up of 3 "primary" colours: red, green and blue.
You will often see this referred to as "RGB", these colours are "additive": zero of all three gives black, while maximum of all three makes white.
Colours by number
Computers work with powers of two. The relevant vocabulary for describing colours uses "hexadecimal", which is base sixteen.
- 0 (zero) to 15 (which is 16 or 24 higher), using one hex digit for each base colour, for a total of 163, or 4,096 values.
- 0 (Zero) to 255 (which is 256 or 28 higher), using two hex digits for each colour, yielding a total of 2563, or 16,777,216 values;
Each base colour (red, green, and blue) can have a value in one of these ranges.
Hexadecimal colour codes are preceded by "#".
Using the 0-15 method, a RGB colour is represented as #000 for black, through #FFF for white.
In the 0-255 method, black is #000000 and white is #FFFFFF.
Note that equal amounts of red, green and blue produce various shades of gray. Pure reds are of the form #X00 or #XX0000, greens are #0X0 or #00XX00, and pure blue shades are #00X #0000XX. Any colour combination can be created using any number from 00 to FF in each of the three positions, a smaller number use just three numbers of course.
Colours by name
There are also palettes of named colours.
|aqua||#00FFFF||Sample text on black||black||#000000||Sample text||blue||#0000FF||Sample text||fuchsia||#FF00FF||Sample text|
|gray||#808080||Sample text||green||#008000||Sample text||lime||#00FF00||Sample text on black||maroon||#800000||Sample text|
|navy||#000080||Sample text||olive||#808000||Sample text||purple||#800080||Sample text||red||#FF0000||Sample text|
|silver||#C0C0C0||Sample text on black||teal||#008080||Sample text||white||#FFFFFF||Sample text on black||yellow||#FFFF00||Sample text on black|
Text colour coding
Note: colour is spelled without the u in all HTML & CSS.
Using CSS color attribute:
<span style="color:hex triplet or colour name">text</span>
<span style="color:red">red writing</span>
- red writing
<p style="color:#0F0">green writing</p>
<div style="color:#0000FF">blue writing</div>
- blue writing
This has the advantage that other attributes can be included in the same "span" tag.
Another way to get the colour you want is to use a site like this one where you can play with an infinitely variable set of colours until you find one you like.
Other use of colours
Colours can also be defined in other html tags, such as table tags. BGCOLOR="#abcxyz" will set the background color of a table, row, or cell when used inside the appropriate tag. Wiki table colours can also be defined using the "style" attribute.
Examples to copy
As with many tricks and tools on computers, copying something you like is often the quickest way to get there.
- In printing, four colours are used: cyan, magenta, yellow and black (alright black's not really a colour but that's the way it goes) referred to as "CMYK"; these are "subtractive": zero of all four gives white while maximum of all four (or maximum of all 3 colours, or just maximum of black) gives black)
- Hexadecimal numbers are how geeks count up to 16 (0 -15 actually) without using more than one digit. Count in hexadecimal: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.
- You might like to follow up by reading about Cascading Style Sheets in Wikipedia.