More ways to declare colors in CSS!
15th
January 2026, 21:45
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.
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.
And it actually worked. That pale shade of orange!
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.
See? I upped the opacity.
...or this...
...I get this! Even more opacity!
The amazing thing is that this was all in place way before I discovered it, quite by accident. Truly, you learn something every day.
Tags
See also
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!
