Description
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