Does "color" input HTML Element Support Alpha Channel Values?

The HTML <input type="color" /> element does not support specifying color values with an alpha channel. This means that a color value in 8-character hexadecimal notation, for example, is not supported. Neither are any of the CSS function syntax (or other CSS color names). All such values are ignored, and a default value of "#000000" is used instead. To demonstrate this, consider, for example, the following HTML <input type="color" /> element with an 8-character hexadecimal value:

<input id="color-picker" type="color" value="#888888ff" />

When you access the input's value, in JavaScript for example, it will show you the default value (i.e. #000000):

const colorPicker = document.getElementById('color-picker');
console.log(colorPicker.value); // '#000000'

The only format supported by the <input type="color" /> element is the "#rrggbb" hexadecimal format.


This post was published by Daniyal Hamid. Daniyal currently works as the Head of Engineering in Germany and has 20+ years of experience in software engineering, design and marketing. Please show your love and support by sharing this post.