ColorScheme Designer

I’ve been doing software and web development for many years now, but my design skills are pathetic (and it’s an euphemism for them). However, I’ve tried an amazing tool a few times for color schemes for my WordPress themes that is absolutely amazing – called ColorScheme Designer.

A number of color options are left for the user to pick from:

  • Mono – a single nuance color scheme that focuses on a single color and it’s derivatives
  • Complement – an opposite color to the one you pick as a secondary color in addition to the main one (from the color palette)
  • Triad – a major color and two extra colors from the picker
  • Tetrad – two major similar colors and two opposite ones
  • Analogic – the main color and the neighbor color nuances
  • Accented analogical

In addition to the color picker, there is a nuance configurator (visible on the image above) for high-contrast or low-contrast versions of the specific scheme, depending on whether you need a shiny or a calm color scheme.

The best thing about the tool however is providing two versions of a sample landing page that applies your choice of colors – both light and dark versions:


The previews have their own HTML structure so that you could inspect the layout and pick the color HEX codes used there (although their also displayed on the page above once you hover the colors).

2 thoughts on “ColorScheme Designer”

  1. Kashif Rafiquef says: January 16, 2014 at 12:32 am

    Its really nice suggestion Mario, I will definitely use this tool in my custom theme.

Leave a Reply

Your email address will not be published. Required fields are marked *