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.

Burmaburman

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. – Capricecapricious

Do you wish for the user to see a transparancy in the color? – Ramification

here is a couple of answers convert-hex-to-rgba – Catenate

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 - w3schools.com/csSref/css_colors_legal.asp – Idiopathy

Possible duplicate of RGB to Hex and Hex to RGB ,First you need to convert hex value into rgba – Frizzy

Answer 1

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>

Reform

Answer 2

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>

Overtire

Why Jquery? If you can do with the platform there's no need to load a library. – Phenomena

you mean that stackoverflow support jquery by default ? I did not understand you well @AndrewBone – Overtire

Thx, this is a nice JS solution, I guess @Idiopathy wonders why you made jQuery a dependency and not used plain JS. – Burmaburman

Answer 3

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.

Burmaburman

Answer 4

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

Galbraith

Answer 5

Use like this,

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

Refer this,

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

Matutinal

is it possible to use rgba values inside your value="#ff00ff" ? – Ramification

<input type="color" value="rgba(255, 5, 5, 0.5)"> clearly it's not. – Ramification

What If user puts #000 in input ? – Frizzy

The MDN page is correct: "The value of an <input> 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). – Linlithgow

Answer 6

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

Engdahl

Answer 7

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.

Girardi

input[type=color] doesn't support the alpha channel. (and has been requested but no progress yet...) – Battista

oh it's weird i didn't notice that, cause i test before answering. thanks i edited my answer. – Girardi

I'm pretty sure the last two digits are also Hex, so 80 doesn't mean 80%, but more or less 50% – Scherer

Answer 8

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

Summons

Answer 9

i suggest a other way : might be more convenient in my case i input a color and alpha and save them in a json file to call whenever the page is loaded it reads the json file for saved settings the edit form to change the settings split up the saved color+alpha using substr() then convert to dec with hexdec() before form (php) :

$value =  JData['Page];
$galHighlightColor = substr($value['galHighlightColor'], 0, 7);
$galBorderColor = substr($value['galBorderColor'], 0, 7);
$Ha = hexdec(substr($value['galHighlightColor'], 7, 2));
$Ba = hexdec(substr($value['galBorderColor'], 7,2));

then in the form use 'range' or 'number'(just do for each)(php):

echo "
<td class=\" w3-col s3\" > 
  <input   type=\"color\" name=\"galBorderColor\" value= \"".$galBorderColor."\" ></input>                  
</td>
<td class \"tooltip\">
  Alpha<input type=\"range\" value = \"$Ba\" step = \"1\" class  =  \"coordsInput\"  id = \"Ba\" name=\"Ba\" placeholder = \"alha\" size=\"3\" maxlength = \"3\" min=\"0\" max=\"255\"></input>
  <span class=\"tooltiptext tt-right\">  Apha 0-255 for this color </span>
</td> 
";

handle the form save the complete 8 digit color code do for each get the color and convert the dec to hex again but using dechex() now you got a color +alpha you can use in my example i save it in a json file (php):

<?php
if($_POST['Ba'] < 16){$R = '0'.dechex($_POST['Ba']);}else {$R = dechex($_POST['Ba']);} // edit: added this to handle missing leading 0
$JData['Page']['galBorderColor'] = $_POST['galBorderColor'].$R) ;
?>

Json file entry: "galHighlightColor":"#e63333c0","galBorderColor":"#d6a8a8ff"

use into html (php):

<?php
$galHighlightColor = $value['galHighlightColor'];
$galborderColor = $value['galBorderColor'];

echo"
<div style=\"background-color:$galHighlightColor; border-color: $galborderColor;\">
</div>
";
 ?>

'font' color, background-color, border-color.

Embarrass

Answer 10

Try this

opacity: 0.5;

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

Gilmore

This makes the entire element transparent. Not the color. – Ramification