Blacklist rgb/rgba functions

[fregante]

I found this code:

:root {
    --background-color: #fff;
    --text-color: #202124;
    --secondary-text-color: #5f6368;
    --link-color: #3367d6;
    --input-border-color: rgba(0, 0, 0, 0.2);
}

The last value didn't have to use rgba() just to add the alpha value, it should have been

:root {
    --background-color: #fff;
    --text-color: #202124;
    --secondary-text-color: #5f6368;
    --link-color: #3367d6;
    --input-border-color: #00000033;
}

rgba has historically been mainly used because hex colors didn't support transparency, so you had no choice but convert your hex colors to rgba()

Now browsers support transparency in hex colors as well, so rgb/rgba offers little compared to the shorter hex representation.

[sindresorhus]

Not sure about this. I find the alpha part of the HEX color totally unreadable, which is annoying as I often need to adjust the alpha of colors. I think hsla() is the best alternative.

[fregante]

I find the alpha part of the HEX color totally unreadable

Is it unreadable because you're comparing it directly to the decimal value?

Sure 0.1 is 1a, but you don't have to use 0.1 exactly.

With decimals: 0.1 0.2 0.3 0.4 0.5 0.6 0.7 0.8 0.9 1 With hex: 11 22 33 44 55 66 77 88 99 aa bb cc dd ee ff

[sindresorhus]

Is it unreadable because you're comparing it directly to the decimal value?

Yes. I cannot do the conversion in my head.

[fregante]

Exactly, why are you converting it at all? Why did you pick 0.1 exactly except that it's a round number in its base? Doesn't 22 work just as well?

I had the same issue recently when I converted 0.1 to 1a and 0.3 to 4d... and I'm like... why? So I set 22 and 44 and it worked just as well.

[sindresorhus]

I don’t get your argument. Let’s say I have alpha 0.23 for a color and I see that I need to adjust it to 0.25 (I would first try 0.24 and then 0.25 and 0.26 and ending up with 0.25). The HEX format makes it too hard to make simple adjustments like that.

[fregante]

I don’t get your arguments.

Do you really change the opacity in 0.01 steps and actually notice the difference?

Do you not use a color tool to pick the right value whatever the value ends up being?

I change the opacity in 0.1 steps and in hex they’d be 11 steps, not super hard.

Whenever I need to tweak a value I just use the developer tools’ opacity slider and find it on the site itself, I’m not going back and forth to my editor 10 times (and when I do I’m wasting my time)

The only argument that I’d agree with is that stepping from 99 to aa is slightly less easy than from 0.6 to 0.7, if you’re editing manually.

Another argument you could make is that a single 123456ff string can’t be changed with arrow keys (in the editor or developer tools), whereas rgba’s decimal can be.

Or that the value is too compact and not easily distinguishable from non transparent colors, like #484936 vs #48494836

Then sure, rgba is better

[sindresorhus]

Do you really change the opacity in 0.01 steps and actually notice the difference?

Yes, for shadows.

Do you not use a color tool to pick the right value whatever the value ends up being?

I do, but sometimes I need to adjust them when I see it used in an app. Much easier to just adjust in the editor than having to copy-paste into a color picker, adjust it, and then copy-paste back. Also, for shades of gray, I construct them manually.

I change the opacity in 0.1 steps and in hex they’d be 11 steps, not super hard.

Even if not super hard. What's the point of going for "not super hard" when rgba/hsla are much easier? Not really worth saving a few characters.

[sindresorhus]

Even if I agreed with using HEX+alpha, I don't think it's nice to just block rgba without providing an explanation in the linter output of why it's blocked. If you open an issue on Stylelint about that and they implement it, we could recommend the user use either HEX+alpha or hsl instead.