In my CSS I need an color based on user picked color. The color picked is used with a fixed transparency of 80%.
The following form element will let the user choose a color easily.
<input type=color value=#00ffff> // #00ffff
But how can I add transparency to it in CSS?
rgba(#00ffff,.8) // doesn't work
Update: I specifically asked how to do it in CSS, not in JS. BTW it's for a PHP driven CMS. I don't wanna force JS on users, and I prefer not to write conversion functions in PHP.
Probably I have to wait for CSS4 (SASS/LESS like) color functions, or for the input type color element to be enhanced with an hsla/rgba pattern attribute functionality.
In CSS4 there is the 8 digits RGB hexadecimal notation: #RRGGBBAA. Last to digits are values for the alpha channel.
That makes it easy to concatenate the alpha value easily to the hex string.
Not sure about browser support at the moment.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With