hark logo

What The Hex: Demystifying Hex Codes

Whether you're a former Myspace tinkerer or a seasoned web developer who deals daily with colour on the web, you've probably come across hex codes before, but how much do you know about this strange-looking combination of numbers and letters? If the answer is not very much, check this out.
Hexadecimal Blog Post Featured Image (1)

If you’re not already familiar with hexadecimal numbering or how colours on the web work, you might think that hex codes are mysterious cyphers that can only be understood by computers, but they’re not as cryptic as they appear. I’m going to show you what these codes mean and how to decode them, but first let’s have a quick primer 😉 on colour itself.

A Primer on Colour

The visible light spectrum is the range of wavelengths within the electromagnetic energy spectrum that humans can see. At one end of the visible light spectrum are the shorter waves of energy, which the visual system perceives as blue light. At the other end are the longer waves that are perceived as red light. Any light outside of this spectrum is not visible to us. Beyond blue is ultraviolet and beyond red is infrared. We can’t see those.

If you ask a traditional artist what the 3 primary colours are, they’ll confidently tell you: “Red, yellow, and blue, obviously”, but a digital graphic designer would not agree. They would argue that red, green, and blue are the primary colours. Strangely, they’re both right in their own way and it comes down to the ways that colours are produced in their respective fields.

Additive Vs Subtractive Colour Mixing

Subtractive colour mixing involves mixing pigments, dyes, paints or other coloured material and applying them to an object. The colour you see when you look at the coloured object is the colour of light that is reflected from it, due to the coloured material absorbing all other colours of light. Traditional mediums, such as painting and printing, use subtractive colour mixing.

A white surface with a row of 4 blobs of different-coloured paint.

With additive colour mixing you begin with black (i.e. the absence of light) and then add light of one or more different colours to produce light of another colour. Devices that emit light, such as screens and projectors, use additive colour mixing.

A close-up of a display showing the red, green, and blue colours of individual pixels.

What Is a Hex Code?

A hex code is one of several ways that colour values can be defined in various digital media, but today we are focusing on their use as colour values in CSS.

These days, the <color> css data type allows colour values to be defined in many different ways, of which the most commonly used are:

  • rgb triplet functional notation
  • hexadecimal notation

These two formats are both used to express a colour in the sRGB (standard RGB) colour space – which is based on the RGB colour model – according to its red (R), green (G), and blue (B) components. Each component of RGB has its own channel, with 8 bits available to hold 256 states, which represent the 256 discrete levels (or amounts) of each colour. Because you can combine any of the 256 values of one channel with any of the 256 values of the other channels, the total number of possible colours in the RGB gamut is 16,777,216 (256 * 256 * 256). That’s a lot of colours.

The rgb triplet function accepts 3 space-separated decimal numbers between 0 and 255. The first value is the amount of red light to mix in, the second is the amount of green and the last, the amount of blue.

p {
  color: rgb(186 218 85);

Hex codes are essentially the same deal, but in a slightly different syntax and using hexadecimal numbers instead of decimal. Instead of looking like a function, the syntax consists of simply a number sign (a.k.a. hash or pound sign) followed by 3 two-digit hexadecimal numbers between 00 and FF, without spaces in between.

p {
  color: #BADA55;

What’s with the Letters?

The number system that most cultures of the world use to count things is decimal, otherwise known as base 10. The likely reason for this is the number of digits on human hands. When counting, we have the symbols 0-9 to represent digits. If we need to count 10 objects, we’ll run out of symbols after we count 9, so we add a 1 to the left and start again at 0 on the right. The 1 and 0 together we call ten. We have names that we give to every number in our number system and we group things in tens. Ten ones is ten. Ten tens is a hundred. Ten hundreds is a thousand and so on. This feels second nature to us because we grow up learning this system and use it in our everyday lives, but it isn’t the only number system out there.

Hexadecimal, otherwise known as base 16, is a number system that has 16 digits instead of 10. Because the only numerical symbols we have from base 10 are 0-9, we need to use some other symbols to represent the 6 extra numbers. In computing – and probably in most applications of the hexadecimal number system – the first 6 letters of the English alphabet are used.

Hexadecimal reference table

Counting in hexadecimal works just the same as it does with decimal, except we can count more objects before we run out of symbols. This means that hexadecimal can represent larger numbers with fewer digits than decimal would need to represent the same number.

How to Convert from Hexadecimal to Decimal

Now that we know about the base 16 number system and what hexadecimal numbers look like, we should be able to convert numbers from hexadecimal to decimal, which unlocks the power to convert hex codes into rgb triplets!

In base 10, the rightmost digit in a number represents the number of ones (100). The digit to the left of that represents the number of tens (101). The digit to the left of that represents the number of hundreds (102) and so on. Going from right to left, the decimal number 235 has 5 ones, 3 tens, and 2 hundreds. (5 * 1) + (3 * 10) + (2 * 100) = 235.

In base 16, again, the rightmost digit in a number represents the number of ones (160). The digit to the left of that represents the number of sixteens (161). The digit to the left of that represents the number of two hundred and fifty-sixes (162) and so on. Going from right to left again, the hexadecimal number 45 has 5 ones and 4 sixteens. (5 * 1) + (4 * 16) = 69. This calculation tells us that the hexadecimal number 45 is represented as the number 69 in decimal.

We started with an easy one there, so let’s try a hexadecimal number with a letter in it. To help with this, we’ll use our reference table again.

Hexadecimal reference table

We’re going to convert the hexadecimal number D7 to decimal now.

If we lookup D in the above table we can see that D in hexadecimal is 13 in decimal. Now that we know that, let’s repeat what we did before: Going from right to left, D7 has 7 ones and 13 sixteens. (7 * 1) + (13 * 16) = 215. D7 is the hexadecimal representation of the number 215 in decimal.

Of course, there are easier ways to do this. For example, these tiny javascript functions can convert hexadecimal to decimal and back again:

const hexadecimalToDecimal = (number) => parseInt(number, 16);
const decimalToHexadecimal = (number) => Number(number).toString(16);

// Pass a string when converting from hexadecimal!
// Expected output: 186

// Expected output: 'BA'

There are also websites that provide tools for converting these numbers such as this one at rapidtables.com.

Applying This to Colour Values

Congratulations, you now know how to convert hexadecimal numbers to decimal, which means you can convert hex codes into rgb triplets. The examples of rgb and hex colour values that I gave earlier were actually the same colour. This can be tested by converting the 3 pairs of hexadecimal digits in the hex code into decimal and using them in rgb functional notation.

The hex code #BADA55 contains 3 numbers: BA, DA, and 55.

BA in hexadecimal is equal to 186 in decimal.

DA in hexadecimal is equal to 218 in decimal.

55 in hexadecimal is equal to 85 in decimal.

Using these converted numbers in rgb functional notation – rgb(186 218 85) – gives us the same colour.

Or you can forget all of this and just use a colour picker. You do you.

Related Content

Welcome to The Age of The Smart Store

No cash, no cards – no tills? If you took this news to the middle ages, they’d have burned you at the stake. But here in the outrageous present tense, all is normal (well, kind of).

Read More

Would you like to find out more about the Hark Platform?

Subscribe to Our Newsletter

Stay up to date with the latest industry news, platform developments and more.