Really great article. Thanks correct about rgb being 24-bit and rgba being 32-bit.

This is in response to Gary Armstrong’s comment about max colors in hsl, I just did some tests.

Just thought you’d like to know that your comment about rgb being higher fidelity than hsl is incorrect because you can use decimal percentages for saturation and lightness. But you can’t use decimal values for rgb.

eg. (on mac chrome)

hsl(290,60%,70%) = #D185E1
hsl(290,60.5%,70%) = #D284E1

It looks like you can’t have decimal hue values though.

I’m not sure if the hsl values are converted to hex or rgb. You might be maxed out at all possible hex or rgb colors if the hsl value gets rounded to one of those before getting displayed.

But i think it’s fair to say hsl has at least as many colors as rgb, if not more.

Example: rbga(150, 150, 150, 0.5);

rbga =)

https://www.smashingmagazine.com/2016/04/web-developer-guide-color/

Thanks!

— Bo

The requested URL contains malicious code that can damage your computer. If you want to access the URL anyway, turn off the Avast web shield and try it again.

Infection type: JS:Redirector-BNI [Trj]

One thing, regarding the currentColor snippet:

.div-external { color: orange; }
.div-internal { border: 1px solid currentColor; }

The above might not be the best example that shows the power of currentColorbecause in this case currentColor is already the default value for the border-color.

Which is why HSL is a subset of 24-bit RGB color. HSL can actually only address 3,492,722 different colors (360 × 99 × 98 + 2). Technically, RGB has better fidelity, with multiple RGB values mapping to the same HSL.

I was actually in the middle of writing an article on HSL vs. RGB (http://blog.armstrongest.com/why-i-love-hsl-more-than-rgb/) when I noticed this article, but decided to publish anyhow.

One short note. You write:

“Back in the old days, chucknorris was a blood red color (it’s only supported in HTML now as far as I can tell), but that was my favorite.”

It’s actually more interesting than you let on. chucknorris isn’t a named color — the full list is here and was originally based on X11 colors.

But then why does chucknorris turn out red? The StackOverflow answer you link to explains it in detail.

Browsers are trained to ignore invalid data. Missing digits and invalid hexadecimal digits are treated as 0. So CHUCKNORRIS is converted to C00C0000000. The number of hexadecimal colors’ digits has to be a multiple of three; since this has 11 we get an additional padding digit of 0 at the end.

Browsers then divide the code into three equal chunks for RGB, so we get C00C 0000 0000. And finally, they truncate each chunk to two characters: C0 00 00, aka #C00000, aka dark red.

Commenters point out that other random strings also produce colors, including strangely appropriate ones, including grass (green) and crap (brown). You can use this fun tool to type random strings and discover the interpreted color.

Anyway, great article!

Your passion for this topic certain comes through.

Indeed deserves a bookmark

I love the depth you go into each sub-topic; Some enough depth to really understand how and why, and others just enough to know WHY you should be interested in reading more.

I didn’t need any breaks while reading, didn’t find myself skipping ahead. Even when you were explaining something I already have a firm grasp of, I was still interested in your overview of it.

Now that I look back through other articles written by Sarah I am noticing they are often ones I have bookmarked or committed to memory.

Thanks Sarah. Looking forward to your next article with bated breath.

#00000 being black

Missing a zero.