How to add a Color Picker in HTML

Color Picker

Color Pickers in HTML allow the user to select and input a color.

Once submitted, the browser converts the input color into a string that represents it.

Usage

To add a color picker in an HTML page, use an <input> tag with type = 'color'.

The initial value can be set using the value property. This value needs to be set in hexadecimal because colors are represented as six-digit hexadecimal values following a hashtag (#). The first two digits represent the red component, followed by two for the green component, and then the last two for the blue component. These components represent a full RGB color. Following this format, #ff0000 is red, #00ff00 is green, #0000ff is blue, and ##ffffff is white. These three colors can be mixed to get more colors. For instance, #bdaa55 gives us a brownish shade.

The default color will be black or #000000 if no initial value is entered.

This example demonstrates the usage of the <input type = 'color'> tag. The initial value is set as #0000ff, i.e., blue.