propose a hexa() function that mirrors rgba() functionality for hex color codes #7327
Description
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:
--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):
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.
--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 nor color-contrast.
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,