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

Question

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.

So, you want the user to pick a color and then apply it with 0.8 opacity to something. You can use the color normally and then add opacity:0.8; Or transform hex color to 3 decimal colors and use rgba. — Sergio Tx, Oct 27 '16 at 08:49
Do you wish for the user to see a transparancy in the color? — roberrrt-s, Oct 27 '16 at 08:49
here is a couple of answers [convert-hex-to-rgba](http://stackoverflow.com/questions/21646738/convert-hex-to-rgba) — Aykut Ateş, Oct 27 '16 at 08:51
thats not how you do rgba or rgb, you have a hexcode in your rgba. `background-color:rgba(192,192,192,0.3);` - that is rgba - http://www.w3schools.com/csSref/css_colors_legal.asp — Andrew, Oct 27 '16 at 08:51
Possible duplicate of [RGB to Hex and Hex to RGB](http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb) ,First you need to convert hex value into `rgba` — Abhishek Pandey, Oct 27 '16 at 08:52

score 7 · Answer 1 · edited Oct 27 '16 at 11:29

7

you can do it like this using jquery, you can apply a custom color with a custom transparency to an element.

$(document).ready(function() {

  $("input").change(function() {

    var opacity = $("input[type=range]").val();
    var color = $("input[type=color]").val();

    var rgbaCol = 'rgba(' + parseInt(color.slice(-6, -4), 16) + ',' + parseInt(color.slice(-4, -2), 16) + ',' + parseInt(color.slice(-2), 16) + ',' + opacity + ')';

    $('div').css('background-color', rgbaCol)
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<input type=color value=#00ffff>
<!-- color -->
<input type="range" min="0" max="1" step="0.1">
<!-- transparency -->

<div>this is a div</div>

edited Oct 27 '16 at 11:29

Abhishek Pandey

13,302
8
38
68

answered Oct 27 '16 at 09:30

Abdelaziz Mokhnache

4,269
3
25
35

6

Why Jquery? If you can do with the platform there's no need to load a library. – Andrew Bone Oct 27 '16 at 11:34
you mean that stackoverflow support jquery by default ? I did not understand you well @AndrewBone – Abdelaziz Mokhnache Oct 27 '16 at 16:38
3

Thx, this is a nice JS solution, I guess @Andrew wonders why you made jQuery a dependency and not used plain JS. – Janghou Oct 28 '16 at 18:21

score 5 · Answer 2 · edited Sep 01 '22 at 22:49

5

In CSS4 there is the 8 digits RGB hexadecimal notation: #RRGGBBAA. Last two digits are the values for the alpha channel.

That makes it easy to concatenate the alpha value to the hex string.

Not sure about browser support at the moment.

edited Sep 01 '22 at 22:49

Martlark

14,208
13
83
99

answered Oct 27 '16 at 11:31

Janghou

1,613
1
21
30

cak3_lover · Answer 3 · 2022-12-01T10:58:54.543

Building upon @Abdelaziz Mokhnache's answer

You can also create your own simple color input using pure javascript without having to load externally, like this:

let color_picker=document.querySelector("#color_picker");
let color_wrapper=document.querySelector("#color_wrapper");
let color_picker_alpha=document.querySelector("#color_picker_alpha");

function set_color(el){
    color_wrapper.style.backgroundColor=color_picker.value + (color_picker_alpha.value == 255 ? "" : parseInt(color_picker_alpha.value).toString(16).padStart(2, "0"));
}

#color_wrapper {
  background-color: black;
  display: inline-block;
  visibility: hidden;
}

#color_wrapper::before {
  content: "";
  position: absolute;
  border-radius: 3px;
  outline: black solid 2px;
  border: white solid 3px;
  height: 2rem;
  width: 2rem;
  pointer-events: none;
  background-color: inherit;
  visibility: visible;
  box-sizing: border-box;
}

#color_picker {
  opacity: 0;
  height: 2rem;
  width: 2rem;
  box-sizing: border-box;
  pointer-events: initial;
  visibility: visible;
}


#color_picker_alpha {
  filter: grayscale(100%);
  visibility: visible;
}

<div id=color_wrapper>
  <input id="color_picker" oninput="set_color(this)" type="color" data-color="black">
  <input id="color_picker_alpha" oninput="set_color(this)" type="range" min="0" max="255" step="1" value="255" />
</div>

score 3 · Answer 4 · answered Apr 30 '17 at 03:50

If you want to use this color but only knowing the HEX type, try convert it into RGB or HSL by using color picker tool, there r many online. Then just add alpha chanel ( 0 -1) for transparency. Eg. Rgb(225,10,10, 0.7) Use this: https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Colors/Color_picker_tool

Kushan · Answer 5 · 2016-10-27T09:07:19.660

1

Use like this,

background-color : rgba(0, 255, 255, 0.8);

Refer this,

http://www.wufoo.com/html5/types/6-color.html

edited Oct 27 '16 at 09:07

answered Oct 27 '16 at 08:50

Kushan

10,657
4
37
41

1

is it possible to use rgba values inside your `value="#ff00ff"` ? – roberrrt-s Oct 27 '16 at 08:52
`` clearly it's not. – roberrrt-s Oct 27 '16 at 08:53
What If user puts `#000` in input ? – Abhishek Pandey Oct 27 '16 at 09:00
1

The [MDN page](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color) is correct: "The value of an element of type color is always a DOMString which contains a 7-character string specifying an RGB color in hexadecimal format. While you can input the color in either upper- or lower-case, it will be stored in lower-case form. The value is never in any other form, and is never empty." Always the 6-digit value, never `rgba` or 3-digit or 8-digit (`rrggbbaa`). – Coderer Dec 01 '20 at 09:06

score 0 · Answer 6 · answered Feb 16 '21 at 14:29

function rgbA(color) {    
    rgba=color.substring(0,7)+$('#AlphaFill')[0].value.padStart(2,'0').replace(100,'');
    return rgba;
}

insert an Input type="range". Send your 6 digit Hex to the above function. rgbA('#ff0000')

<input id="AlphaFill" class="range1" type="range" min="0" max="100" step="10" value="100" />

returns 8 digit rgba in HEX: range 80 = #ff000080 or range:0 = #ff000000 or range:100 = #ff0000

Marzieh Mousavi · Answer 7 · 2022-09-13T10:40:34.203

0

The last 2 digits change the transparency

#ffffff00 => min color opacity

#ffffff83

#ffffffff => max color opacity

edit : as Lazerbeak12345 said input[type=color] alpha channel has been requested but no progress yet.

edited Sep 13 '22 at 10:40

answered Dec 18 '21 at 08:41

Marzieh Mousavi

1,213
1
12
28

3

`input[type=color]` doesn't support the alpha channel. (and has been [requested](https://github.com/w3c/html/issues/1422) but no progress yet...) – Lazerbeak12345 Feb 13 '22 at 21:10
oh it's weird i didn't notice that, cause i test before answering. thanks i edited my answer. – Marzieh Mousavi Feb 14 '22 at 09:41
I'm pretty sure the last two digits are also Hex, so 80 doesn't mean 80%, but more or less 50% – Lud Sep 13 '22 at 10:30

score 0 · Answer 8 · answered Feb 06 '23 at 06:08

I solved it by adding 'e6',

 $('#color').change(function(e){
    $('.mask').css('background-color', e.target.value+'e6')
    console.log(e.target.value+'e6')
})

Try using browser console and go to elements, find your target element and pick a color there, the last 2 characters in the color is the alpha... just in my experience

score -7 · Answer 9 · answered Oct 27 '16 at 08:55

-7

Try this

opacity: 0.5;

This will display the transparent color for the user picked one.

answered Oct 27 '16 at 08:55

Sankar Smith

338
1
5
14

4

This makes the entire element transparent. Not the color. – roberrrt-s Oct 27 '16 at 08:56

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

9 Answers9

Linked