Did you know there are 4 and 8 digit hex codes (#11223344?) for colours? 🤯
Tags: css, codepen, beginners, webdev
Published: 2022-01-06 09:50:33

10 years as a developer and somehow I have missed that there are 4 digit (\#1234) and 8 digit (\#11223344) hex codes for colours⁉ Here is what I learned about what they are and how we use them! 

Before we start though, a big shout out to @afif (the CSS guru!) who was the one who opened my eyes to this when discussing how to make an SVG "fade out" from one side to the other!

{% twitter 1478674762293465090 %}

## Prefer to consume content on Twitter?
Just as a very quick aside, if you prefer to read twitter threads rather than long form content then I have already created one about 4 and 8 digit hex codes here:

{% twitter 1478753156477693952 %}

---

## What do 8 digit Hexadecimal colour codes do?
In a nutshell they are similar to RGBA, essentially they let you add opacity with the last 2 characters.

So instead of:

\#RRGGBB 

As you would do in a normal 6 digit colour hex code you can do 

\#RRGGBB<b>AA</b>

and add an opacity value using the last 2 characters!

I have put together a quick demo showing this here where I use the same colour code (`#336699`) and then add `bb` to it to make it semi transparent (`#336699bb`):

{% codepen https://codepen.io/inhuofficial/pen/qBPKRBE default-tab=result, css, html %}

## With 8 digit colour hex codes there are a couple of "gotchyas"
Moving from a RGBA mindset to a 8 digit hex code system takes a tiny bit of getting used to!

The first 6 characters are just the same as they always are, but opacity is now on a scale of 0-255 ("00" to "ff")

So 00 still represents 0% opacity, but 255 (ff) now represents 100% opacity!

### A few examples
Just to make it a bit more clear, here are a few examples:

| Opacity | 8 digit Hex Code equivalent | explanation |
| --- | --- | --- |
| 0% | \#RRGGBB<b>00</b> | 00 in hexadecimal is still 0 |
| 10% | \#RRGGBB<b>1A</b> | 1A in hexadecimal is 26. 26 is ~10% of 255 (so 26/255 =~ 10%) |
| 50% | \#RRGGBB<b>80</b> | 1A in hexadecimal is 128. 128 is ~50% of 255 (so 128/255 =~ 50%) |
| 90% | \#RRGGBB<b>E6</b> | E6 in hexadecimal is 230. 230 is ~90% of 255 (so 230/255 =~ 90%) |
| 100% | \#RRGGBB<b>FF</b> | FF in hexadecimal is 255. 255 is 100% of 255 (so 255/255 = 100%) |

Hopefully it is becoming clearer now, but just in case...

---

## A mini tool to help understand 8 digit hex codes!
This tool will hopefully help it sink in (if it hasn't already)

### Explanation
Enter the original colour you want to work with, either using the colour picker, hex colour or RGB colour (I had an issue with HSL so I have disabled those inputs 😪).

Then move the opacity slider or enter an opacity value.

Below that you will see a section with your final colour code and the resulting colour displayed on a striped background (assuming you lower the opacity of course!)

Below that there is a further explanation about the hex code it generated. It will also tell you if you can use a 4 digit hex code (more on that after the demo!)

### 8 digit hex code demonstration!
Have a play, there isn't much error checking though so check you enter valid numbers or...🔥💻🚒 could be the result! 🤣

{% codepen https://codepen.io/inhuofficial/pen/rNGKjZa default-tab=result, js, css, html %}

---

## 4 digit hexadecimal colour codes
If you played with the above example long enough you may have noticed that occasionally you get a valid 4 digit hex code in the "results" or "details" section.

So how the heck does that work?

The rules are quite simple:

R1 = R2
G1 = G2
B1 = B2
A1 = A2

If all of the above are true then you can turn your 8 digit hex code into the short hand 4 digit hex code by taking R1, G1, B1 and A1 and combining them!

### 4 digit hex code examples:
<dl>
<dt>#22446688 ✅</dt>
<dd>This can be shortened as 2==2 <strong>and</strong> 4==4 <strong>and</strong> 6==6 <strong>and</strong> 8==8. It will become <strong>#2468</strong></dd>
<dt>#22456688 ❌</dt>
<dd>This can't be shortened as our G1 and G2 are not the same (4!==5). You would have to use the full 8 digit hex code <strong>#22456688</strong></dd>
<dt>#AA4488DD ✅</dt>
<dd>Yet again R1==R2 (A==A), G1==G2(4==4) etc. So this can be turned into a 4 digit hex code (<strong>#A48D</strong>)</dd>
</dl>

---

## Making it a bit easier!
Trying to remember that "BF" is 191 in decimal which is 75% of 255 is hard work!

So I created this super handy table with all of the codes in it (or you can use the [hex opacity demo I linked earlier](https://codepen.io/inhuofficial/pen/rNGKjZa))

### Opacity to hex code conversion table

You can [skip this long table](#wrapping-up-on-8-digit-hex-codes) if you want, but it might be worth bookmarking this article so you can use it for reference!

| Opacity Percent | Equivalent on 0-255 scale) | Hex Code |
| --------------- | -------------------------- | -------- |
| **100%**            | **255**                        | **FF**       |
| 99%             | 252                        | FC       |
| 98%             | 250                        | FA       |
| 97%             | 247                        | F7       |
| 96%             | 245                        | F5       |
| 95%             | 242                        | F2       |
| 94%             | 240                        | F0       |
| 93%             | 237                        | ED       |
| 92%             | 235                        | EB       |
| 91%             | 232                        | E8       |
| **90%**            | **230**                        | **E6**      |
| 89%             | 227                        | E3       |
| 88%             | 224                        | E0       |
| 87%             | 222                        | DE       |
| 86%             | 219                        | DB       |
| 85%             | 217                        | D9       |
| 84%             | 214                        | D6       |
| 83%             | 212                        | D4       |
| 82%             | 209                        | D1       |
| 81%             | 207                        | CF       |
| **80%**            | **204**                       | **CC**      |
| 79%             | 201                        | C9       |
| 78%             | 199                        | C7       |
| 77%             | 196                        | C4       |
| 76%             | 194                        | C2       |
| 75%             | 191                        | BF       |
| 74%             | 189                        | BD       |
| 73%             | 186                        | BA       |
| 72%             | 184                        | B8       |
| 71%             | 181                        | B5       |
| **70%**           | **179**                      | **B3**       |
| 69%             | 176                        | B0       |
| 68%             | 173                        | AD       |
| 67%             | 171                        | AB       |
| 66%             | 168                        | A8       |
| 65%             | 166                        | A6       |
| 64%             | 163                        | A3       |
| 63%             | 161                        | A1       |
| 62%             | 158                        | 9E       |
| 61%             | 156                        | 9C       |
| **60%**            | **153**                       | **99**    |
| 59%             | 150                        | 96       |
| 58%             | 148                        | 94       |
| 57%             | 145                        | 91       |
| 56%             | 143                        | 8F       |
| 55%             | 140                        | 8C       |
| 54%             | 138                        | 8A       |
| 53%             | 135                        | 87       |
| 52%             | 133                        | 85       |
| 51%             | 130                        | 82       |
| **50%**             | **128**                        | **80**       |
| 49%             | 125                        | 7D       |
| 48%             | 122                        | 7A       |
| 47%             | 120                        | 78       |
| 46%             | 117                        | 75       |
| 45%             | 115                        | 73       |
| 44%             | 112                        | 70       |
| 43%             | 110                        | 6E       |
| 42%             | 107                        | 6B       |
| 41%             | 105                        | 69       |
| **40%**            | **102**                        | **66**       |
| 39%             | 99                         | 63       |
| 38%             | 49                         | 31       |
| 37%             | 94                         | 5E       |
| 36%             | 92                         | 5C       |
| 35%             | 89                         | 59       |
| 34%             | 87                         | 57       |
| 33%             | 84                         | 54       |
| 32%             | 82                         | 52       |
| 31%             | 79                         | 4F       |
| **30%**             | **77**                         | **4D**       |
| 29%             | 74                         | 4A       |
| 28%             | 71                         | 47       |
| 27%             | 69                         | 45       |
| 26%             | 66                         | 42       |
| 25%             | 64                         | 40       |
| 24%             | 61                         | 3D       |
| 23%             | 59                         | 3B       |
| 22%             | 56                         | 38       |
| 21%             | 54                         | 36       |
| **20%**             | **51**                         | **33**       |
| 19%             | 48                         | 30       |
| 18%             | 46                         | 2E       |
| 17%             | 43                         | 2B       |
| 16%             | 41                         | 29       |
| 15%             | 38                         | 26       |
| 14%             | 36                         | 24       |
| 13%             | 33                         | 21       |
| 12%             | 31                         | 1F       |
| 11%             | 28                         | 1C       |
| **10%**            |**26**                         | **1A**       |
| 9%              | 23                         | 17       |
| 8%              | 20                         | 14       |
| 7%              | 18                         | 12       |
| 6%              | 15                         | 0F       |
| 5%              | 13                         | 0D       |
| 4%              | 10                         | 0A       |
| 3%              | 8                          | 08       |
| 2%              | 5                          | 05       |
| 1%              | 3                          | 03       |
| **0%**              | **0**                          | **00**        |

---

## Wrapping up on 8 digit hex codes!
So there you have it, a quick introduction to 4 and 8 digit hex codes!

If you want to read more about it the following resource might be useful: [W3 CSS Color Module level 4](https://www.w3.org/TR/css-color-4/#hex-notation)

---

## If you liked this article...
I hope you enjoyed this article.

If you did could you do me a quick favour and retweet the twitter thread I wrote about this?

It would really help me out and would be massively appreciated as I am trying to grow my tiny twitter following this year!

{% twitter 1478753156477693952 %}

Thanks in advance and thank you for reading!

## Final bit of silliness
Oh and because I didn't know this it is time to give back my developer card according to @alvaromontoro, always good to know you can rely on friends to support you! 🤣

{% twitter 1478686515295309824 %}