How to Create Color Picker input box in HTML ?

In this article, we will know about the HTML color picker & will understand its implementation through the example. The <input> element of type color in HTML provides the user with an interface to select a color from the default color-picker to interface or design their own color by giving the desired value in the field of RGB.

Syntax:

<input type="color" value="#228c4e">

type: It specifies the type of <input> element to display. The default value is text.
value: It specifies the value of the element with which it is used to specify the initial value of the input element.

Approach:

Declare the <input> tag inside the <body> tag.
Use the type attribute with the <input> element.
Define the type attribute to value “color”.

Example 1: In this example, we will place the default color picker.

HTML

<!DOCTYPE html>

<html>
 
<body style="text-align: center;">

    <h1>

        GeeksforGeeks

    </h1>

    <h2>

        HTML default color Picker:

        <!-- The default color picker color is black-->

        <input type="color">

    </h2> 

</body>
 
</html>

Output: The default value of the Color Picker is #000000 (Black). The user can specify their own shade of color picker with the help of the value attribute.

Example 2: In this example, we will set the default color as green by using the value attribute.

HTML

<!DOCTYPE html>

<html>
 
<body style="text-align: center;">

    <h1>

        GeeksforGeeks

    </h1>

    <h2>

        HTML User's preferred color Picker:

        <!-- Here we set a fixed color by value attribute-->

        <input type="color" value="#009900">

    </h2> 

</body>
 
</html>