GrahamTheDev

Posted on Jan 6, 2022

Did you know there are 4 and 8 digit hex codes (#11223344?) for colours? 🤯

#css #codepen #beginners #webdev

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!

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:

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

#RRGGBBAA

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):

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%	#RRGGBB00	00 in hexadecimal is still 0
10%	#RRGGBB1A	1A in hexadecimal is 26. 26 is ~10% of 255 (so 26/255 =~ 10%)
50%	#RRGGBB80	1A in hexadecimal is 128. 128 is ~50% of 255 (so 128/255 =~ 50%)
90%	#RRGGBBE6	E6 in hexadecimal is 230. 230 is ~90% of 255 (so 230/255 =~ 90%)
100%	#RRGGBBFF	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! 🤣

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:

#22446688 ✅: This can be shortened as 2==2 and 4==4 and 6==6 and 8==8. It will become #2468
#22456688 ❌: 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 #22456688
#AA4488DD ✅: Yet again R1==R2 (A==A), G1==G2(4==4) etc. So this can be turned into a 4 digit hex code (#A48D)

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)

Opacity to hex code conversion table

You can skip this long table 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

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!

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! 🤣

Top comments (20)

Valeria • Jan 6 '22

Why in the world would you need a table to convert numbers to hex?)

Just open a browser console or type node in terminal and type:

(255).toString(16) // 255 => ff
// Or
(0.8*255).toString(16) // 80% => cc

GrahamTheDev • Jan 6 '22

Great tip for a quick way of doing one off calculations. ❤

Why in the world would you need a table to convert numbers to hex?

If you are doing a design and working with say 10 elements that all need their opacity fine tuning a table is many times faster than writing (0.8*255).toString(16) then (0.75*255).toString(16) then (0.72*255).toString(16) etc. etc.

So tables certainly have their uses. 👍

Valeria • Jan 6 '22

Not convinced, another round?)

If I'd be fine-tuning 10 elements I'd use a browser color picker 😎

GrahamTheDev • Jan 6 '22

Touché.

It is a good thing I added a "skip this long table" link then so people can get past it 🤣.

Valeria • Jan 6 '22

Haha, true that :-)

Abhinav Kulshreshtha • Jan 8 '22

Great tip. But an issue to this approach is fractional values

(0.30*255).toString(16)  //  "4c.8"
(0.38*255).toString(16) //   "60.e66666666668"

So I have to be careful when using this technique to setting up dynamic color values in something like generating css using js params.

Rounding up hexadecimal values is a tricky business....

Valeria • Jan 8 '22

If you need a quick manual conversion - you can simply ignore everything what comes after ..

Or you can use:

Math.round(0.30*255).toString(16) // 4d, rounds up for >=.5
Math.floor(0.30*255).toString(16) // 4c, rounds down
Math.ceil(0.30*255).toString(16) // 4d, rounds up

GrahamTheDev • Jan 6 '22 • Edited

Hey there, hope you enjoyed the article!

Did you know I have over 250 articles planned for the next 12-18 months!

If you don't already follow me on DEV or follow me on Twitter now is the time to do so, this is going to be a mega year for my content creation and I don't want you to miss out (and I want more people to call me an idiot when I get things wrong so I can improve 🤣)!

Oh, I am even looking to create some YouTube shorts...just in case that isn't enough for you! 🤣

Thanks for reading, have a much deserved virtual ❤🦄 from me!

Imia Hazel • Jan 6 '22

I wish you a bit of good luck in achieving this big goal, hopefully getting excellent articles that will be a splendid source of knowledge.

GrahamTheDev • Jan 6 '22

Thanks Imia! Do you have any goals for 2022 (that you want to share of course!)?

Imia Hazel • Jan 6 '22

Thanks for asking about this. I have not set a particular goal but will endeavor to deliver trendy and quality content about UI/UX.

Christian Kozalla • Jan 6 '22

Hi InHu, great work as always!

Been following you for quite a while on DEV!

One thing I noticed in your first example converting an 8-digit hex color to a 4-digit code. The correct 4-digit color should be #2468, or did I miss something?

Anyways, I'll be following on Twitter, too and wish good luck and much fun in achieving your 2022 goals! 👍

GrahamTheDev • Jan 6 '22

I was obviously just checking you were awake as I never make mistakes! 😜

Thanks for pointing out, fixed it and thanks for the kind words! ❤️

Christian Kozalla • Jan 6 '22

We are awake😜

Andrew Bone • Jan 6 '22

Yes

GrahamTheDev • Jan 6 '22

Well fair enough, looks like I am the only noob here 😋

trungtrungdev • Jan 11 '22

There is also 3 characters hex code #ccc = #cccccc for example

carlosridg • May 29 '23

The HEX code for a transparent color is represented by "00" for its alpha channel, along with the six-digit HEX code for the RGB values. For example, if you want a transparent red color, the HEX code would be "#00FF0000." The "00" in the beginning represents full transparency, while "FF" represents the maximum intensity for red. Similarly, you can adjust the transparency level for other colors by modifying the alpha channel value.

The HEX code for a 50% transparent red color would be "#80FF0000." In this case, the "80" represents the alpha channel value, which determines the transparency level. The alpha channel ranges from 00 (completely transparent) to FF (fully opaque), with 80 representing approximately 50% opacity. The remaining six digits "FF0000" represent the RGB values for pure red. By adjusting the alpha channel value, you can create varying levels of transparency for different colors.

Iain Simmons • Jan 7 '22

This feels like a "just because you can, doesn't mean you should" kind of things.

hsla or rgba would both surely be a better choice?

GrahamTheDev • Jan 7 '22 • Edited

Yeah but there are a few little hacks you can do with this (transparent scroll bar thumb on hover, works with hex! Not found a use case for that yet though lol!).

Plus if you are hex everywhere why not keep it consistent so you can easily check one colour is a opacity variant of another.

With all that being said HSLA would be my preference! 💪

View full discussion (20 comments)

DEV Community

Did you know there are 4 and 8 digit hex codes (#11223344?) for colours? 🤯

Prefer to consume content on Twitter?

What do 8 digit Hexadecimal colour codes do?

With 8 digit colour hex codes there are a couple of "gotchyas"

A few examples

A mini tool to help understand 8 digit hex codes!

Explanation

8 digit hex code demonstration!

4 digit hexadecimal colour codes

4 digit hex code examples:

Making it a bit easier!

Opacity to hex code conversion table

Wrapping up on 8 digit hex codes!

If you liked this article...

Final bit of silliness

Top comments (20)

Read next

🚀 Introducing SuperPowerGenerator.com! 💥

Notice Board Realistic illusion using html css and javascript https://www.instagram.com/webstreet_code/

Building a Free Online Music Creator: Free Incredibox Sprunki

Create a Dynamic Code Playground with SandPack + React!