Prefer the video version? Here it is!

4 and 8 digit HEX are great because they let you easily create semi-transparent variations of a HEX colour, without the need to convert it to rgb or HSL first. It’s supported by everything apart from old, pre-chromium Edge so most people can be using them right now.

Are you good at Maths? Yes? You can probably jog on then, as you are unlikely to take much from this. For everyone else, here’s just enough hexadecimal knowledge to use 4 and 8 digit hex values in anger.

Why use 4/8 digit HEX codes for colour

I like HSLA. I think of all the colour formats, it’s the most human friendly, and unlike standard 3 and 6 digit HEX, accepts an alpha channel. But the truth is, as a dev, no one ever gives me a design with the colours in HSLA format. Or even RGBA for that matter. It’s always a HEX. And that’s no fault of designers, I do it when designing too. I open the default colour picker, pick my colour and it gets set as a HEX. When I want to realise that design in the browser, it’s that same HEX I’m copying in.

HEX colours are based on a hexadecimal numbering system. Which can seem pretty intimidating when you start looking at how hexadecimal numbering works. Unless you’re an Android or some kind of mathematical savant, you will be used to counting in tens, in decimal.

Well in something akin to Spinal Tap (kids, ask your parents), Hex goes up to 16. Now, don’t get hung up on that now. I can tell you everying you need to understand Hex enough to use it in anger in your next project with ease.

Well I guess I’d better start delivering on that claim. Let’s take a look.

4 and 8 digit colour values

In CSS, a colour can be represented in HEX like so, #RRGGBB where RR is red, GG is the green, and BB is the blue. And some combination of those colour gives you the colour you want. OK, so all the 8 digit variant does is add on an alpha amount. So, we are writing #RRGGBBAA where AA is the alpha.

Here is the way the specification describes it:

The last pair of digits, interpreted as a hexadecimal number, specifies the alpha channel of the color, where 00 represents a fully transparent color and ff represent a fully opaque color.

Right, you with me so far? Last two digits are our alpha channel. Don’t worry about the hex values, just know that one end of the scale is opaque, and can’t be seen through, and the other is completely transparent, so you wouldn’t even know it’s there.

This is great because it means you can make subtle variations of colours when they sit on top of other colours, without needing to convert it to RGBA or HSLA. We can just play with that alpha channel.

The maths part

By the way, I’m British and we say ‘maths’, rather than math because, well, it’s short for ‘mathematics’. Sorry about that, that’s how it is. With that out the way, let’s take a look at the maths part of this hexadecimal stuff. Here is the scale we will be working with in HEX:

0, 2, 3, 4, 5, 6, 7, 8, 9, a, b, c, d, e, f

So look at this scale. Our 0-16 scale starts at 0, goes to 9 and then uses a to f to give us a further 6 increments.

Now, with that being the case, suppose you have an orange colour, which you could write in 3 digit Hex as #f90, which, would get expanded by the machine to be #ff9900, you could write that with 50% transparency as #f908, or #ff990088 if you want it in the 8-digit form. Just look at that scale and know that halfway along is 8 and there you go.

Here is a Codepen to demonstrate. One set of the buttons sets is varying transparencies of white, in both 4 and 8 digit HEX, the lower one is with an orange.

The reality is, you rarely need anything more precise than knowing that 0-16 range for the alpha. For example, if I want to let 25% of the background colour in, I go back 4 from the end to c. So that orange, with 25% of the background coming through would be #f90c. If you want 75% of the background coming through, I know with my limited maths skills, that 75% of 16 is 12, so go back 12 from the end and I’m at 3. So, #f903 is going to give me what I need.

Now if you do want to get more precise, which I maintain I have never had to do, you could count up more precisely. Base16/Hex counts like this, 00, 01, 02, 03, 04, 05, 06, 07, 08, 09, 0A, 0B, 0C, 0D, 0E, 0F, 10,11, 12…

So you need to be aware that 11 in hex, is equivalent to 17 in decimal. Which is when I start to come undone. Like I said, stick with that 16 step range for your transparency and you’ll be golden. You can throw away your Sass color.adjust or PostCSS plugins, this will do you just fine.

Hopefully that makes it clear enough for you to start using if you aren’t already. Now I have this drilled into my head, I love using it. I hope you do to.

Any queries, let me know in the comments. Unless it is anything more complicated than the maths here, in which case, you’re on your own!

If this post was useful, Say thanks with a coffee. Every donation helps keep me going!