DEV Community

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

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

GrahamTheDev on January 06, 2022

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 lear...
Read full post
Collapse
 
valeriavg profile image
Valeria •

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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
grahamthedev profile image
GrahamTheDev •

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. 👍

Collapse
 
valeriavg profile image
Valeria •

Not convinced, another round?)

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

dev console color picker with opacity and conversions

Thread Thread
 
grahamthedev profile image
GrahamTheDev •

Touché.

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

Thread Thread
 
valeriavg profile image
Valeria •

Haha, true that :-)

Collapse
 
abhinav1217 profile image
Abhinav Kulshreshtha •

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"
Enter fullscreen mode Exit fullscreen mode

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....

Collapse
 
valeriavg profile image
Valeria •

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
Enter fullscreen mode Exit fullscreen mode
Collapse
 
grahamthedev profile image
GrahamTheDev • • 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!

Collapse
 
imiahazel profile image
Imia Hazel •

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.

Collapse
 
grahamthedev profile image
GrahamTheDev •

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

Thread Thread
 
imiahazel profile image
Imia Hazel •

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

Collapse
 
christiankozalla profile image
Christian Kozalla •

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

Collapse
 
grahamthedev profile image
GrahamTheDev •

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! ❤️

Collapse
 
christiankozalla profile image
Christian Kozalla •

We are awake😜

Collapse
 
link2twenty profile image
Andrew Bone •

Yes

Collapse
 
grahamthedev profile image
GrahamTheDev •

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

Collapse
 
trungtrungdev profile image
trungtrungdev •

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

Collapse
 
carlosridg profile image
carlosridg •

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.

Collapse
 
iainsimmons profile image
Iain Simmons •

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?

Collapse
 
grahamthedev profile image
GrahamTheDev • • 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! 💪