Help:Colour

From Teflpedia

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.[1]

Colours by number[edit]

Computers work with powers of two. The relevant vocabulary for describing colours uses "hexadecimal", which is base sixteen.[2]

  • 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[edit]

There are also palettes of named colours.

Colour
name
Hexadecimal Colour
name
Hexadecimal Colour
name
Hexadecimal Colour
name
Hexadecimal
Background
Text
Background
Text
Background
Text
Background
Text
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[edit]

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>
    • green writing

  • <div style="color:#0000FF">blue writing</div>
    • blue writing

This has the advantage that other attributes can be included in the same "span" tag.[3]

The use of the HTML tags: <font color> </font>; is still valid but deprecated:
  • <font color="red">RED TEXT</font>
    • RED TEXT
  • <font color="#0F0">GREEN TEXT</font>
    • GREEN TEXT
  • <font color="#0000FF">BLUE TEXT</font><
    • BLUE TEXT

Shortcuts[edit]

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[edit]

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[edit]

As with many tricks and tools on computers, copying something you like is often the quickest way to get there.

Notes[edit]

  1. 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)
  2. 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.
  3. You might like to follow up by reading about Cascading Style Sheets in Wikipedia.

See also[edit]