CODEWITHSUNDEEP
htmlcssinputtransparency
Janghou
Janghou

Reputation: 1843

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.

Upvotes: 17

Views: 35031

Answers (10)

2winners
2winners

Reputation: 1

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.

Upvotes: 0

user20476491
user20476491

Reputation:

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

Upvotes: 0

cak3_lover
cak3_lover

Reputation: 1938

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>

Upvotes: 8

Marzieh Mousavi
Marzieh Mousavi

Reputation: 1624

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.

Upvotes: 0

Janghou
Janghou

Reputation: 1843

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.

Upvotes: 6

user3026911
user3026911

Reputation: 51

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

Upvotes: 0

Kim-Trinh
Kim-Trinh

Reputation: 79

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

Upvotes: 3

Abdelaziz Mokhnache
Abdelaziz Mokhnache

Reputation: 4349

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>

Upvotes: 7

Kushan
Kushan

Reputation: 10695

Use like this,

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

Refer this,

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

Upvotes: 0

Sankar Smith
Sankar Smith

Reputation: 356

Try this 

opacity: 0.5;

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

Upvotes: -8

Related Questions