How to add a colorpicker in HTML
problem
You wish to let the user pick a color on your website. In this post we will see how to use the <input> tag to allow the user to choose a color like in the screenshot (varies from OS to OS).
SOLUTION
Using the <input> tag with the attribute type=”color”. Let’s see an example:
<input type="color"/>
output
Example - setting the value by default
Just set the attribute value. The value accepted is a string which contains a 7-character string specifying an RGB color in hexadecimal format. [1]
<input type="color" value="#24CD2F"/>
output
The hexadecimal value #24CD2F corresponds to the green color as shown above.
This input control is clickable and the user is free to select a custom color.
conclusion
In this post we saw how to use the <input> tag to create a color picker so the user can pick a custom color or enter their RGB code among other color code formats.
References:
[1] https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/color
Share it!
Ellion
Professional IT consultant, writer, programmer enthusiast interested in all sorts of coding.
Eats all cookies 🍪