[css-color] HEX Color Opacity Handling

[Ernedar]

The issue:

As it is written in reference you can very easily work with rgb() and hsl() and their semi-transparent / transparent variant functions rgba() and hsla().

Hex code can use format #FFFFFF or transparent / semi-transparent version #FFFFFFFF.

Problem occures when you you want to use CSS Variables for adding transparency in to color.

Example:

We have a color red with code in variable for:
rgb: --red-rgb: 255, 0, 0;
hsl: --red-hsl: 0, 100%, 50%;
hex: --red-hex: #FF0000;
and opacity for different background where you do not want to use fully saturated color: --color-opacity: 0.5;

So making those colors with opacity:
rgba(var(--red-rgb),var(--color-opacity));
hsla(var(--red-hsl), var(--color-opacity));
are easy to make but for hex it is not doable. You need to make another css variable with full format, in this case it will be hex with opacity: --red-hex-opa: #FF0000F0;

And since I for example need to change opacity only in the future or just the color, I would need to change whole color code in hex opacity instead of changing it in one place.

Proposal:

New function will be introduced called hexa() for example which will work same as rgba() or hsla().
When working with opacity and hex code color it will support css variables:
hexa(var(--hex-red), var(--color-opacity)); which will generate hex: #FF0000F0 or browser readable option hexa() would be functional instead. With that you will have option to use hex in #FFFFFFFF or hexa() function when introducion transparency in to the color.

Knowledge:

I am aware that when making web and css styling, I can change all hex codes from designs in to RGB or HSL format respectively and just simply use rgba() or hsla() functions instead of making new one. This is idea about having all color formats with consistent functions since <color> is worked on currently.

References:

https://www.w3schools.com/css/css3_colors.asp - reference for color opacity functions

[Crissov]

CSS Color 5 ED (subject to change):

color: rgb(from var(--red-hex) r g b / var(--color-opacity));

[Ernedar]

CSS Color 5 ED (subject to change):

color: rgb(from var(--red-hex) r g b / var(--color-opacity));

Hi. Thank you. I stand corrected, I totally missed this change. Should I close the issue or leave it as an alternative possible solution?

[svgeesus]

@Crissov is completely correct, this relative color syntax is how we expect this particular situation to be handled.

(As an aside, I strongly suggest MDN rather than the misleadingly-titled W3Schools, which is entirely unaffiliated with W3C and frequently incorrect or outdated, as a reference)

[Florinstruct]

The solution proposed by Crissov does not work for me:

rgb: Only 3 elements allowed, but 5 were passed

I assume this is not implemented yet? Sorry for my ignorance - but where can I check the current status? Caniuse doesnt have anything on "Relative Color Syntax" or "from var".

[Jintus]

CSS Color 5 ED (subject to change):

color: rgb(from var(--red-hex) r g b / var(--color-opacity));

As usual, not supported by Firefox...

[svgeesus]

I assume this is not implemented yet? Sorry for my ignorance - but where can I check the current status?

Check it here
https://wpt.fyi/results/css/css-color/parsing?label=master&label=experimental&aligned&q=relative