Download Safari
Download Chrome
Download Firefox
Download IE 10+
When many people first start building their Web pages, they create pages in colours that they like. If you’re lucky or have a good eye, you’ll end up with colours that look nice together. But it’s very easy to set up a colour scheme that clashes and is difficult for your readers to view for long periods or at all.
Understanding colour theory will help you to understand how colour works on Web pages. And one of the first places to start learning colour theory is with the colour wheel. Sir Isaac Newton first put together a circular diagram of colours in 1666. This colour wheel allows you to see groupings of colours that are harmonious together and other colours that might clash.
Primary Colours
The primary colours (represented in the image) are RED, YELLOW, and BLUE. These colours, in traditional colour theory, cannot be formed by mixing any other colour. All other colours are derived by combinations of these colours. They are represented in HTML as:
* Red: #ff0000 or #f00 in CSS
* Yellow: #ffff00 or #ff0 in CSS
* Blue: #0000ff or #00f in CSS
Secondary Colours
Secondary colours (represented in the image) are ORANGE, GREEN, and PURPLE. These colours are the combination of red and yellow (orange), yellow and blue (green), and blue and red (purple). They are represented in HTML as:
Tertiary Colours
Tertiary colours (represented in the image) are YELLOW-ORANGE, RED-ORANGE, RED-PURPLE, BLUE-PURPLE, BLUE-GREEN, and YELLOW-GREEN. These are the combinations of the secondary colours. They are represented in HTML as:
To put it all together, move on to the Colour Harmony article.