Using HTML

Colours

Colours are a little strange on the web. There are two different ways to reference colours on the web - text and hexadecimal

Text

This works for the basic colours: black, red, white, blue, green etc... However, if you want a specific shade of a colour, you need to learn the hexadecimal notation. Most up-to-date image applications will provide you with the hexadecimal number for any shade.

Hexadecimal

  • #000000 is also black.
  • #FFFFFF is white
  • #FF0000 is red
  • #00FF00 is green
  • #0000FF is blue

It works like this. The first 2 digits refer to the red value, the second 2 to the green value, and the last two to the blue value.

Why #000000 is black.

The 00 values across the digit, means that there is no red, no green and no blue in this colour. Therefore, there is no colour at all, hence black.

Why #FFFFFF is white.

The FF values across the digit, means that there is the maximum amount of red, the maximum amount of green and the maximum amount of blue in this colour. Therefore, we have red green and blue mixed together maximally and in equal amounts. This is white light, hence white. The values you can choose from are 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F so F is the biggest value. There are 16 possible values for each digit, hence this notation is called hexadecimal.

Why #FF0000 is red.

#FF0000 is red because there is only red, and no blue and no green. It looks like this.

How do I get a dark shade of red?

The closer a digit is to #000000, the closer it is to black. To make red darker, we need to decrease the amount of red...#990000 is dark red.

What about pink?

The closer a digit is to #FFFFFF, the closer it is to white. The make red lighter, we need to increase the amount of blue and green in the digit, so increase the last 4 numbers... #FF8888 is pink.

How do I get purple?

Purple is a mixture of red and blue, so:

FF00FF, 880088, FF99FF

Orange

FF9900 CC6600

Application

All colours should be specified in a linked style sheet. This is the next exercise.