Getting a hang of hex codes

Posted on January 23, 2018


A constant problem web designers have with clients is getting an understanding of colours. Most of us are very unspecific about particular shades, describing them in simple primary colour terms like “blue”, “red” and “yellow”.

The problem is that one “blue” can be very different to another. The sky, water, blueberries, cobalt and Everton’s home kit can all be described as “blue”, but these are all different colours. It’s therefore easy to see how if someone says they want part of a website to be “blue”, there could be confusion over which particular blue to use.

Both for the ease of web programming and to help identify and specify colours, we can use hex codes. These are alphanumeric six-character codes, usually prefixed by a hashtag, that are each unique to one of 16,277,216 colours.

To explain how they work, we need to understand a little about bases. Last week, we talked briefly about binary, which is a counting system that uses just two numbers: 0 and 1. If we want to count any higher than one, we have to add a new digit.

The counting system we use from day to day is base 10, or decimal. This means that we have 10 different numbers (0 to 9) to use to make any number. If we want to go above 9, this is no problem, but we need to go into two digits.

Hex codes work in base 16, meaning a system where we can count up to 15 without going into two digits. Of course, our counting system only has 10 digits, so we have to make up the remaining six using the alphabet. The letters A to F therefore represent numbers 10 to 15, and the number we recognise as 16 would be shown in hexadecimal (base 16) form as 10.

Through this, we have a system where the lowest number is #000000 and the highest is #FFFFFF. These are the hex codes for black and white respectively – everything in between is represented by a different six-figure combination of the 16 characters used in hexadecimal counting.

If you’re a word nerd like me, this can be a lot of fun, because you’ll soon notice that some of what we recognise as words can be numbers and therefore colours. #DECADE, #DEFACE and #FACADE are all hex codes, and if we substitute some letters for numbers that look like them, such as 0 in place of O or 1 in place of I, the possibilities become a lot greater.

In some cases, these subvert our normal expectations. Did you know that in hex, #C0FFEE is a pale mint green colour and #ACAC1A is a fairly unattractive yellowy brown? On the other hand, #5EABED is a pretty accurate light blue, and you can create a #BADA55 shade of yellow-green.

A chart of all the hex codes that form recognised English words can be found here. If you have a hex code of your own and want to see what colour it creates, type it into Google (e.g. #AAAAAA) and you’ll be given a tool that shows you the colour.

Content Team Leader at Engage Web
John works for Engage Web as a Content Team Leader and regularly contributes to the website and programmes of his beloved Chester F.C.
John Murray
Latest posts by John Murray (see all)
Call Now Button

Who Engage Web has helped:

Ice Lolly Minuteman Press BUNZLGS1 UK The Underfloor Heating Store West Cheshire Athletic Club Thomas Cook MWB Business ExchangeWeb Media 360 D2 Architects Beacon Financial Training Steely ProductsBurlydam Garden Centre Asentiv BodyHQ Clever Vine Endeavour Mortgages Pro Networks Comm-Tech Wickers World Ascot Mortgages Top Teks
TEL: 0345 621 4321