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.
The color will be returned in a hex format (eq:
#f00211), the default being
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:
You can read more about the color input in this article on developer.mozilla.org.