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> |
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
Please Login to comment...