As you already know that input element can be of different types such as text, number, email, etc. One of those types is color. If you set the type of an input element to color, then that input element will act as a color picker and this is something that we are going to cover in this tutorial.
In the following example, we have created a color picker using an input element. As soon as we pick the color, we will change the color of the text in the h1 element as well as change the background color of our web page. Please have a look over the code example and the steps given below.
HTML & CSS
We have 3 elements in the HTML file (div, input, and h1). The div element is just a wrapper for the rest of the elements.
We are using style attribute with div element to center align all the elements horizontally.
We have 2 input elements. In the first input element, we will display the hex value of the color. The second input element will act as a color picker.
The innerText for the h1 element is “Hello World”.