Developing a Colour Scheme

Education is not limited to just classrooms. It can be gained anytime, anywhere... - Ravi Ranjan (M.Tech-NIT)

Developing a Colour Scheme

When it comes to colour, there is a lot to think about as you develop or design your WordPress Theme. It's like painting a house. Which colour will cover the entire exterior? What colour do you want the door? Or the window trim? Accents and complementary colours or contrasting colours?

The colours that go into a website are not limited to the colour of the background and text. You have to consider all the colours used together. For example the links on your site can have three colour choices:

  • unvisited
  • hover
  • visited

It's important to make sure everything is in harmony. Your header or masthead may be filled with colour while the rest of the site may be less colourful. Titles, headings, and lists, all can be in colour. And don't forget about the bullets on your lists - they are often coloured, too. With so many colour choices, finding a colour scheme or theme can be a challenge.

To help you pick your website colours, here is a list of colour tools and resources to get you started.


  • 1 Colour Schemes
  • 2 Colour Charts
  • 3 Colour Pickers
  • 4 Colour Blenders
  • 5 Colour Gradient Generators
  • 6 Colour Tools
  • 7 Related

Colour Schemes

  • Kuler - Flash application to create and select colour palettes - also includes an Adobe AIRapplication for desktop use

  • Online Color Scheme Generator

  •'s Color Scheme Generator 2

  • Color Match - gets six matching web colors (MSIE only)

  • Colour Lovers - Browse others' color palettes, latest web trend color schemes, download palettes for your application

  • Web color palette the right way. Create consistent color schemes. Generate color shades, tones and tints values.

Colour Charts

  • Color Charts by HTML Color Codes

  • Bob Stein's Visibone Colour Charts

  • Dynamic Color Chart Of HTML Color Codes

Colour Pickers

  • Free Application for Mac and Windows users for color picking and changing colors

  • Colorzilla for Mozilla Firefox - Color Picker

  • Colorhexa for Google Chrome

  • Color Cop, multi-purpose color picker for web designers and programmers

  • Iconico ColorPic - Great, simple and free

  • Online HTML Color Codes Picker

Colour Blenders

  • Color Mixer

  • Color Mixers

  • Eric Meyer's Color Blender

Colour Gradient Generators

  • ColorZilla Gradient Generator

  • ColorHexa Gradient Generator

  • CSS3Factory Gradient Generator

  • CSSMatic Gradient Generator

Colour Tools

  • Color Hex Information and Conversion

  • Redalt's Color Tools - Enter a URL and reports colors used

  • Manually Add Colors to Change the Layout

  • Online HTML Color Codes Color Picker and Dynamic Color Chart

  • SiTCE - Photoshop Script to Change Hue, Saturation And Lightness of WordPress Theme

  • RGBHexCode ColourPicker - Generate RGB/Hex values and create shades, tint, complementary colours, etc.


First Steps With WordPress • Stepping Into Template Tags • Lessons: Designing Your WordPress Site • Template Tag Lessons • Lessons on WordPress Features and Functions • Template Lessons • WordPress Tech Lessons • Website Development Lessons • Validating a Website • Know Your Sources • WordPress Housekeeping • WordPress Site Maintenance • More WordPress Lessons