Skip to content
Related Articles

Related Articles

How to Create Color Picker input box in HTML ?

View Discussion
Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 25 Jul, 2022
View Discussion
Improve Article
Save Article

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: Itspecifies the value of the element with which it is used orused 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>


Output: The value of the text in RGB fields can be changed according to convenience anytime and a new color will be generated.

Supported Browsers:

  • Google Chrome 20.0
  • Microsoft Edge 14.0
  • Firefox 29.0
  • Opera 12.0
  • Safari 12.1

My Personal Notes arrow_drop_up
Recommended Articles
Page :

Start Your Coding Journey Now!