color input with transparency

AFAIK there's no option for transparent color picking using <input type="color">, but what you could do is have another input for the alpha, and set the opacity of the color input like this:

function updateColorAlpha (alpha) {
    document.getElementById('color').style.opacity = alpha;
}

<input type="color" id="color">
<input type="range" id="alpha" onchange="updateColorAlpha(this.value);" min="0" max="1" step="0.1" value="1">

I don't think it's possible natively. The color picker only ever returns a hex code, which has no way to represent transparency. You would need to build something bespoke (or have a picker for color and one for transparency and do the calculation behind the scenes yourself).

For more information, see: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color#Value

You can use an an <input type=range> along with the <input type=color>to achieve your purpose. There is no HTML "direct" way to do it.

<input type="color" oninput = "setColor()" id = "color">
<br />
<input type="range" min="0" max="1" step = "0.1" onchange = "setColor()" id = "opacity" value = "1">
<div id = "result" style = "height:50px; width:50px;">
</div>

<script>
    function setColor() {
        var color = document.getElementById('color').value;
        var opacity = document.getElementById('opacity').value;
        document.getElementById('result').style.background = color;
        document.getElementById('result').style.opacity = opacity;
    }
    setColor();
</script>

You get the value of required opacity from the input type range by Javascript following which you set the color and opacity on the result element (the div in this case)

Note that if you require a more "customizable" solution you could try the jQuery plugin at Picker.js