Menu

We are apologize for the inconvenience but you need to download
more modern browser in order to be able to browse our page

Download Safari
Download Safari
Download Chrome
Download Chrome
Download Firefox
Download Firefox
Download IE 10+
Download IE 10+

Colour Wheel and Colour Theory – Using Colour Harmoniously on Your Web Site

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:

  • Orange: #ff9900 or #f90 in CSS
  • Green: #00ff00 or #0f0 in CSS
  • Purple: #ff00ff or #f0f in CSS

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:

  • Yellow-Orange: #ffcc00 or #fc0 in CSS
  • Red-Orange: #ff6600 or #f60 in CSS
  • Red-Purple: #cc00cc or #c0c in CSS
  • Blue-Purple: #9900ff or #90f in CSS
  • Blue-Green: #00cccc or #0cc in CSS
  • Yellow-Green: #ccff00 or #cf0 in CSS

To put it all together, move on to the Colour Harmony article.

13 thoughts on “Colour Wheel and Colour Theory – Using Colour Harmoniously on Your Web Site”

  1. exemplary work. You have gained a new fan. I hope you keep up the good work and I eagerly await more of these excellent posts.

  2. Hi from china, good website. I should come back later to see what’s new.

  3. That was one particular from maximum important posts I’ve noticed in a prolonged prolonged time. A whole whole lot appreciated, I’m doubtless have to hang around here far extra.

  4. I posted 5 photos on Facebook in the album “Friday Field Trip: Lamps Plus”

  5. you said it right, thanks for all the reliable informationhttp://www.realsaude.net

  6. excellent post. many thanks for sharing this resource. thanks so much for everything you’ve put into it this blog has me coming back time and time again.http://www.chuteirasadidas.net

  7. i don’t know how you can write so well, your articles are excellent.http://www.etiquetaplastica.com

  8. all looking so nice. thanks for this nice info.http://www.creditocartao.net

  9. you have got a really useful blog i have been here reading for about an hour. i am a newbie and your success is very much an inspiration for me..http://www.callacc.com

  10. i don’t know how you can write so well, your articles are excellent.http://www.divulgaemail.com

  11. Hello! Thank you for this post but are you really sure about what you’re saying? Do you have more sources for us? thank you

  12. Hey sweetie from a young womanfan keep up the fab content

  13. Not what I was expecting but great anyway! Good for you!

Leave a Reply

Your email address will not be published.
*

x