[csswg-drafts] [css-color] HEX Color Opacity Handling (#6880)

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

== [css-color] HEX Color Opacity Handling ==
### 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

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


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

Received on Sunday, 12 December 2021 13:19:07 UTC