Checkout my CSS Grid By Example and Getting Started With React video courses on Skillshare. Sign up now and get one free month of Skillshare.

Native color selection in HTML with the input type=color

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.

Home Screencasts Best of Newsletter Search X