[csswg-drafts] propose a hexa() function that mirrows rgba functionality for hex color codes (#7327)

mangelozzi has just created a new issue for https://github.com/w3c/csswg-drafts:

== propose a hexa() function that mirrows rgba functionality for hex color codes ==
A really key feature in color manipulations is being apply to apply various opacities to colors.
One will often have a theme consisting of a set of CSS custom properties which stores various hex color codes.
PS thank you for custom properties, they are fantastic, and enabled me to finalyl ditch the CSS preprocessor.

However there is currently a big hole in CSS for add alpha to colors, see this stack overflow question with 190K views:
https://stackoverflow.com/questions/40010597/how-do-i-apply-opacity-to-a-css-color-variable

People have tried things like this:
```css
--my-color-red: #ff0000;
background: rgba(var(--my-color-red), 0.5);
```
But it does not work.
You would think one could just do this (to set the alpha to half):
```css
background: var(--my-color-red)80;
```
But that also does not work.

So like there is a `rgba` function which allows you to add opacity to an RGB color, their should be a `hexa` function which allows one to add opacity to a hex value, e.g.

```css
--my-color-red: #ff0000;
background: hexa(var(--my-color-red), 0.5);
```

From I have read about the upcomming CSS5 features, I don't think this feature will not be possible with `color-mix`.

The other common color transformations like when one hovers over a link and one wish to adjust the color brighter or darker will be possible with the level 5 color-mix, by just mixing the color with white or black,

Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/7327 using your GitHub account


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Saturday, 28 May 2022 12:40:15 UTC