WordPress.org

Codex

Interested in functions, hooks, classes, or methods? Check out the new WordPress Code Reference!

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.

Colour Schemes

Colour Charts

Colour Pickers

Colour Blenders

Colour Gradient Generators

Colour Tools

Related

First Steps With WordPressStepping Into Template TagsLessons: Designing Your WordPress SiteTemplate Tag LessonsLessons on WordPress Features and FunctionsTemplate LessonsWordPress Tech LessonsWebsite Development LessonsValidating a WebsiteKnow Your SourcesWordPress HousekeepingWordPress Site MaintenanceMore WordPress Lessons