I recently made some tweaks to the colours of this website. I have always felt that colour theory was one of my weakest points as a designer, so I like to take any opportunity I can to learn more about it.
Colours are difficult because it is not just the science of colour theory you have to worry about. It’s the personal associations we all make with certain colours. There are huge cultural differences in the meanings of different colours. Certain colours appear to have psychological effects. So it is very easy to get colours wrong.
Settling on teal
My last few personal website designs have all featured the shade of teal #0080A4. Bluey-green has always been my favourite colour. I remember trying to use a deep teal in my very earliest web designs. I ended up getting sick of it. But as I learnt how to use it more subtly, it has now become the colour I always use for my personal website designs.
How I arrived at this exact shade, I cannot remember. I may have taken an eyedropper to the cover of my favourite album, Confield by Autechre, which happens to feature teal.
Despite this being the ‘main’ colour of the website, it is used for links only. But since there are quite a lot of links, it does seem to be quite dominant.
Complementary shades
From this, I used Kuler to select two complementary shades. The darker #004E64 is used for links in the active state. The lighter #00BCF0 is not actually used anywhere in the design. I originally tried using it for borders and suchlike, but it simply looked too garish. But despite not appearing in the design itself, this shade influenced all of the other colours in the colour scheme.
This design also uses a shade of orange for links’ hover and focus states. This shade was a complementary colour to the light teal: #F07500. I chose it because it contrasts so much with teal — ideal for the hover and focus states.
More colours
I needed to come up with a few more colours though, on the odd occasion that I need them to display graphs or suchlike. This is where I felt less confident. When you want to come up with a yellow, a red, and more, plugging hex codes into Kuler until you find something that vaguely works is contrived. It also leads to poor results.
I recently read a couple of interesting takes on how to come up with a colour scheme. One was to adjust the colours until the greyscale hues matched. But this technique always resulted in an distracting dark yellow colour. It also doesn’t seem like a good idea from an accessibility point of view.
So instead I tried this technique, of taking source colours and then tinting them all towards a main colour. This technique struck me, because I already have a main colour — the teal.
But using the main teal once again made certain colours look too murky. So this was the opportunity to use the light teal, which is otherwise not used in the design.
I picked a series of colours based on the orange shade, this time using ColorHexa to find complementary colours:
#007AF0– blue#7500F0– purple#00F075– green#F0ED00– yellow#F00003– red
I then experimented by overlaying the light teal with varying degrees of transparency. I settled on 10%. Anything much more than that and the yellow began to look too murky again. This resulted in the following:
#0080EF#6A13EF#00EA82#D7E818#D71319
Yellow had been the trickiest to get right. But I think the weakest colour of these five is the green, which looks a bit neon in comparison to the others.
I realised I had to adjust the orange using the same method as well, to bring it into the same family:
#D77018
Getting black and white right
I then adjusted the ‘black’ and the ‘white’ to use a similar technique. I have explained before that I want to avoid using pure black and white, because you don’t genuinely find these colours in the real world. So using black and white can make a design feel clinical and sterile.
I can’t remember exactly how I originally came up with the not-quite-black and the off-white for this website. I think it was trial and error. I decided to use the same technique of laying teal over #000 and #FFF.
#001A21– “black” (teal overlaid with 20% transparency)#F2F8FA– “white” (teal overlaid with 5% transparency)
The final selection of colours
#F2F8FA#001A21#0080A4#004E64#00BCF0#D77018#0080EF#6A13EF#00EA82#D7E818#D71319
[…] have written before about how I have found colour difficult to get right in a web design. Once again I have grappled with colour a lot during this […]