Colour inspiration

Palettron.com website
Click on the image to visit the website

I am currently working with a group that have independently created a logo. The logo contains a set of colours that to my eye are not naturally harmonious. The relationships between some of the colours don’t work for me, the problem is I cannot say why.

I have to add here, like most people from an IT/ Engineering background, I should be the last person to question someone’s colour choice. My wife frequently comments on mine, as does my daughter.

The problem I have is the selection of colours is fundamental prior to building a website. I usually have a logo or logo and text to start with that represents the organisation. I usually use this to develop a limited palette of colours that I use around the website. This then helps everything to hang together.

As a new organisation, you may not be too worried about this, however what happens if you become a larger organisation?  Your branding is going to become increasingly important. So it is worth thinking about it from the outset. It costs a lot of money to sort it out later. Rebranding exercises, and getting the rigour and discipline back in an organisation can cost £1000’s.

I am not a professional graphics designer, but I can tell when I receive a logo that has been professionally created. The colours contrast and/or complement each other or have some intangible relationship.

A great tool to play with

I came across the following website some time ago. Fortunately it is still there, I think there are similar ones around. If you go to the following address: http://paletton.com this site is a colour scheme designer it has been created by Petr “Pixy” Staníček.

You can enter the hexadecimal* code for the primary colour in your scheme, and the tool will show you other colours that work based on several relationships.

It is not going to give you a definitive answer. There are 24 million colours that can be shown on most devices with a screen these days. But it will help you to narrow down the choice and find something that is visually pleasing.

On Petr’s site is also  a Colorpedia which you can access here with some of the theory behind it, this has links to other websites:   http://paletton.com/wiki/index.php?title=Welcome_to_the_Colorpedia

The tool allows you to play with the relationship and this visually changes the relationship to other colours in the palette.

Crash course in Hexadecimal

*Hexadecimal:   Colours are defined by values that are coded in different ways. Colours as used on computer screens (as opposed to print) are often defined by RGB values. RGB are Red, Green and Blue. Each colour can have a value from 0 to 255 (decimal). When the colours are mixed together they create a new colour: R=255, G=255, B=255 = white. R=0, G=0, B=0 = black.  R=255, G=0 and B=0 is red.

Binary representation

255 can be represented in binary as 11111111.  Computers all work in binary where there are two states. 1 or 0.  Programmers and IT folk use a shorthand method of working with binary numbers. They group the numbers into 4 characters, so 11111111 becomes 1111,  1111. These numbers are then converted to base 16 or hexadecimal. Hexadecimal has 16 characters which are: 0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F.   Where 0 = Decimal 0, 9= decimal 9, A= Decimal 10, and F is Decimal 15. So 1111 1111 can be represented by the value FF in hexadecimal.

Each colour has 8 bits in binary or 255 intensities in decimal. There are three colours, so the colour range is from 0 to 111111111111111111111111 in binary. Converting that to decimal is approximately 24 million colours. Most devices are capable of showing most of that colour palette. What a device can display is referred to as it’s Gamut. An expensive monitor will display more colours than a lower cost one. But for 99% of us what we see is a moderately accurate representation and “good enough”.

Hexadecimal Colour Representation

When developing graphics, accuracy in colour is critical. This is controlled through the mix of intensities of RGB or Red, Green and Blue. Each has a value of 0 to 255. So each can be represented by hexadecimal 00 to FF.

As there are three primary colours, you can represent any colour in the 24 million colour palette by six hexadecimal characters. from 000000 to FFFFFF.

If you are working with colours, you can always achieve the precise colour by using the hexadecimal value rather than visually tuning the colours to match.

I hope that does not leave you confused!

How do I find out my base colour?

The best way is to use a graphics programme with a dropper tool  icon in it that can “suck up the colour” from some example image. If you can set the colour for the drawing tool in this way, you should also be able to find the colour code it represents.

Free Applications

If you have not got a graphics package on your computer you can get one from here for free: GIMP is a very sophisticated free editor, you can get it from here: https://www.gimp.org/  A more simple graphics editor which I recommend to my clients is Irfanview. You can get IrfanView from here:  http://www.irfanview.com/

Facebooktwittergoogle_plusredditpinterestlinkedintumblrmail

Leave a Reply

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