How hex codes work

You might be familiar with hex codes if you’ve ever tinkered about with HTML or CSS while working on a website – they’re the six-character alphanumeric strings preceded by a hash symbol which reference a particular colour; #000000 for black, for example.

But despite having known about them and having used them for years I realised that I had never looked into how they worked. I’m also nursing a stupid cold and who among you HASN’T become obsessed with something you’ve used in CSS when feeling under the weather? EXACTLY.

**Now let’s begin**

The “hex” in hex codes is short for hexadecimal. This means that you are working with a base-16 system and explains why you see letters as well as numbers in the codes — in day to day counting we use a base-10 system which means that for base-16 we need to find a way of representing an extra six digits. As such the numbers 0-15 become the characters 0, 1 ,2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E, and F in hexadecimal.

The six digits of each hex code are divided into three pairs, which correspond to the amount of red, green and blue needed to create the colour. The first two digits ALWAYS deal with the amount of red, the second two with the green and the final two with the blue. There are 256 different combinations of digits in each pair (16×16) so each different permutation can represent one of 256 possible intensities of that colour channel with 00 being the least intense and FF being the most. That’s why #000000 shows up as black as all the colour channels are on their lowest intensity and #FFFFFF maps to white — everything is on maximum strength.

256 different possible values for each of the RGB colour channels means over 16 million potential colours at your disposal. However, back in the day, not all electronic displays could make sense of all these different options — as it goes, even the human eye struggles to distinguish more than 10 million of them — so web-safe colours were introduced to offer a level of standardisation.

You can tell web-safe colours at a glance because they only use the digits 0, 3, 6, 9, C and F, and each pair of digits matches (#33FF99, for example). They correspond to 0%, 20%, 40%, 60%, 80% and 100% intensity of each channel. As a result there are only 6 possible values for each colour channel and 216 potential colours — perfect for monitors limited to a palette of only 256 colours.

It wasn’t a foolproof system but generally provided a decent solution. In case you were wondering there was actually an even smaller colour palette devised of super-duper web-safe colours to prevent mishaps but nowadays it seems a little redundant because advances in technology mean that most electronic displays you encounter on a regular basis are more than capable of dealing with a wider range of colours. That said, it’s always good design practice to remember not everyone has up-to-the-moment tech at their disposal!

I use hex codes most often in CSS when I’m tweaking the look of a blog. In CSS you can actually use a shorthand form of hex code which only involves three digits. These triple digit codes only shorten pairs of identical digits though, hence #4499CC would become #49C but #80FF00 would need to remain as a six digit code. CSS also allows you to use all manner of different systems to tell it which colours you fancy using but I love the modularity of hex codes and find them strangely beautiful so I always use them for preference.

**And finally**

If you ever want to translate RGB numerical values (such as rgb (255,0,0) which is bright red) into a hex code you can do it as follows:

  1. Take the red value first
  2. Work out how many 16s are in the number (this is basically primary school division – you want whole numbers and remainders NOT decimal places)
  3. Translate the whole number into a 0-F digit. This will be the first digit in the pair.
  4. Translate the remainder into a 0-F digit. This is the second digit in the pair.
  5. Repeat for the green and blue values.
  6. When you have your three pairs of digits list them in RGB order after a # symbol. Voila!

To go the other way and translate a hex code into numerical RBG values you reverse the process:

  1. Divide the code into three pairs of digits.
  2. Starting with the red pair, convert each digit in the pair to a decimal number (0-9 stay the same while A-F map to 10-15)
  3. Multiply the first number in the pair by 16 and then add the second number.
  4. Repeat for the green and blue values.
  5. You then represent the numerical values you get from this process in the format rgb(255,0,0)

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s