Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to add transparency to a value from a HTML input type color field in CSS?

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.

like image 277
Janghou Avatar asked Oct 27 '16 08:10

Janghou


1 Answers

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.

like image 110
Janghou Avatar answered Nov 08 '22 11:11

Janghou