More ways to declare colors in CSS!

Color codes used to be simple. If I ignored HSV and CMYK, RGB values were perfectly adequate. For more than a decade, I used rgb() and rgba() in CSS to get colors I wanted. This changed recently when I came across some new ways of using the rgb() function, quite by accident.

Fun with colors!

It began when I was doing this, using rgb() instead of rgba(). Obviously I wasn't using "HELLO WORLD" but this is the least complicated example I can think of.

<h1 style="color:rgb(200, 100, 50, 0.5)">HELLO WORLD</h1>

And it actually worked. That pale shade of orange!

HELLO WORLD

So I did a little bit of research into the rgb() function and it turned up a lot of stuff. Apparently this syntax is legacy, which means it's been around forever! 

But now that I was going down this rabbit hole, it appeared that there were other ways to use the rgb() function.

Without commas

rgb() can also be used without commas and with a forward slash if you want to specify opacity. Which sounds really counterintuitive, I know. Apparently some people find this easier. Go figure.

<h1 style="color:rgb(200 100 50 / 0.8)">HELLO WORLD</h1>

See? I upped the opacity.

HELLO WORLD

Using percentages

This is where it gets interesting. Instead of a value from 0 to 255, we can just quit the mental gymnastics and use percentage values. So if I do this...

<h1 style="color:rgb(80%, 50%, 0%, 90%)">HELLO WORLD</h1>

...or this...

<h1 style="color:rgb(80% 50% 0% / 90%)">HELLO WORLD</h1>

...I get this! Even more opacity!

HELLO WORLD

How is any of this useful?

It's really up to the individual web developer, isn't it? I personally prefer using commas, but being able to use percentage values is really cool.

The amazing thing is that this was all in place way before I discovered it, quite by accident. Truly, you learn something every day.

Well, color me flabbergasted!
T___T