This content originally appeared on DEV Community and was authored by InHuOfficial
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!
CSS Challenges@challengescss
@InHuOfficial Remove the gradient from the SVG to have a non faded version then add this CSS to .background-right
-webkit-mask: linear-gradient(90deg,#0000,#000)
mask: linear-gradient(90deg,#0000,#000)10:28 AM - 05 Jan 2022
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:
Did you know you can use 4 and 8 digit hex codes for colours with transparency 🤯
A massive thanks to @ChallengesCss for opening my eyes to something I should probably have already known! 🤣
Here is what I learned:🧵👇15:40 PM - 05 Jan 2022
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 #2348
- #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 | 0 |
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!
Did you know you can use 4 and 8 digit hex codes for colours with transparency 🤯
A massive thanks to @ChallengesCss for opening my eyes to something I should probably have already known! 🤣
Here is what I learned:🧵👇15:40 PM - 05 Jan 2022
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! 🤣
Álvaro Montoro@alvaro_montoro@InHuOfficial @ChallengesCss We are going to need you to return your web developer card, please.11:15 AM - 05 Jan 2022
This content originally appeared on DEV Community and was authored by InHuOfficial
InHuOfficial | Sciencx (2022-01-06T09:50:33+00:00) Hold on, there are 4 and 8 digit hex codes for colours? 🤯. Retrieved from https://www.scien.cx/2022/01/06/hold-on-there-are-4-and-8-digit-hex-codes-for-colours-%f0%9f%a4%af/
Please log in to upload a file.
There are no updates yet.
Click the Upload button above to add an update.