transparency in html input type="color"

Question

A simple question, I see this simple color picker has only 3 versions rgb, hex, hsl but where is the option to choose transparency even in inspect element there is such an option

So what can I do? I even tried to make a default value of hex with a 00 in the start like changing #ffffff to #00ffffff so that it would be a transparent white, but it makes it just white

How to make to have a transparency tool??

user_8518708 · Answer

I cant seem to find a default HTML input with color that also uses transparency, but looking at the link Alex sent, using a secondary slider input seems to be the easiest method for user input. Here is a slider thats slide background matches whatever color is in the color input and the slider outputs a value between 0 and 1.

var slider = document.getElementById("slider"), color = document.getElementById("color");
color.oninput = function() {
    slider.style.backgroundImage = "linear-gradient(to right,rgba(0,0,0,0),"+color.value+")";
    let rgb = hexToRgb(color.value);
    document.getElementById("test").style.backgroundColor = "rgba("+rgb.r+","+rgb.g+","+rgb.b+","+slider.value+")";
}
slider.oninput = function() {
    let rgb = hexToRgb(color.value);
    document.getElementById("test").style.backgroundColor = "rgba("+rgb.r+","+rgb.g+","+rgb.b+","+slider.value+")";
}
function hexToRgb(hex) {
  var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

.slider {
  -webkit-appearance: none;
  width: 100%;
  height: 25px;
  background-image: linear-gradient(to right,rgba(0,0,0,0),#00ffff);
  outline: none;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 10px;
  height: 30px;
  background: #4CAF50;
  cursor: pointer;
}

transparency in html input type="color"

1 Answers