Colour Schemes for Web Sites

We have started 2016 with two interesting new projects: The first is a complete update of a group of web sites for one of our earliest customers – it’s nice when they keep coming back, we must be doing something right. The second is a more complex CRM system, targeted at a particular industry sector. This was an introduction from an existing customer, which was nice too. More about this in due course.

Getting the colours right

With any web design, it’s vital to get your colour scheme right from the start and these projects are no exception. There are some great colour scheme web sites, such as Paletton and Adobe’s Kuler Wheel, but sometimes you just want a simple approach.

Ian HurryWe often take the boldest colour from a customer’s logo and use this as the base colour. We then allocate percentage tints of this colour to various elements of the design – for example borders may be 50% of the base colour and backgrounds may be 20% of the colour. In the early days, a lot of the colour schemes were devised by my late friend Ian, who worked out the formulae for percentages of RGB and Hex values, shading to white, or occasionally a darker colour. We put these in a spreadsheet for each different design and applied the colours in the CSS stylesheet accordingly.

Mostly, this worked just fine, but sometimes we got unexpected results; for example a ‘blue’ logo was actually dark purple and the resulting tints were a bit pink! Or a nice bold green produced rather sludgey tints. The other problem was that the correct percentage tint for a border or a background would vary with the base colour, leading to a lot of time consuming trial and error.

Interactive Color Chart

Interactive Color Chart

(US spelling reflects HTML / CSS syntax).
The solution is our Interactive Color Chart. Simply type in your RGB or Hex values and see the resulting shades. The simpleĀ  mock-up page below the color chart then changes to match the colours chosen. Or click on any of the buttons to see different preset values – some good, some not so good!

We have found our color chart has saved us a lot of time – hope you find it useful too.