Native color selection in HTML with the input type=color

DanielSeptember 17, 2022September 20, 2022

For the past few days, I've been coding a tool for some theme customization and needed a simple way to allow users to select their colors.

It seems that you can build an HTML natural color selector by using the color input.

<input type="color" />

You can set it to default stating color by using the value attribute. And you can also use the same attribute to read the selected value in that input.

<input type="color" value="#ff0000" id="color-input" />
<script type="application/javascript">
    const selectedColor = document.getElementById("color-main").value;
    console.log(document.getElementById("color-main").value);
</script>

The color will be returned in a hex format (eq: #f00211), the default being #000000.

From a Javascript perspective, we can use the input and change events to track the first selection and any changes in the color input.

colorPicker.addEventListener("input", updateFirst, false);
colorPicker.addEventListener("change", watchColorPicker, false);

Below is a small working codepen for it:

See the Pen
by JS Craft (@js-craft)
on CodePen.

You can read more about the color input in this article on developer.mozilla.org.