What is Color Picker for HTML?
The main function of the HTML Color Picker tool is to select a color from a range of color boxes. Users can browse through various color options, select their preferred color, and view the corresponding RGB and Hex values. Additionally, it is possible to adjust the RGB and hex values to observe changes in the color output.
The HTML tag <input type ="color"> offers a user interface element that enables users to define colors either through a visual color picker interface or by inputting the color value in the text field in the #rrggbb hexadecimal format. While CSS colors can recognize different formats like color names, functional notations, and a hexadecimal format with an alpha channel, only simple colors (without an alpha channel) are allowed.
<input type="color">
Users have the option to specify a color either by utilizing a visual color selector tool or by directly entering it into a text field in the hexadecimal format #rrggbb using HTML input elements of type color.
While CSS colors can be represented in different ways like color names, functional notations, and hexadecimal format with an alpha channel, only simple colors without an alpha channel are allowed.
The appearance of the element can vary greatly across various platforms or web browsers. It could be a basic text input field that validates color information automatically, a standard platform color picker, a customized color picker window, or a specialized input field for entering data in the required format.
<p>Select your favourite color:</p>
<div>
<input type="color" id="head" name="head"
value="#0000ff">
<label for="head">Head</label><br></br>
</div>
<div>
<input type="color" id="body" name="body"
value="#ac5353">
<label for="body">Body</label>
</div>
Output:
When we click on "Head" , it will show as below:
Output:
When we click on "Body" , it will show as below:
Output:
Value
The value of an input element with type color is consistently a string of 7 characters, representing the hexadecimal specification of an RGB color. This color input can be provided in either uppercase or lowercase, but it will always be stored in lowercase. It is ensured that the value is never empty or presented in any alternative format.
Note: If we provide a value that isn't an actual, fully-opaque RGB color in hexadecimal notation, the value will be set to #000000. You cannot set the value using any CSS function syntax or the standardized CSS color names. When you consider that HTML and CSS are different languages and specifications, this makes sense.
Furthermore, colors with alpha channels are not compatible. For instance, if a color is defined using the nine-character hexadecimal code #009900aa, it will default to #000000.
Using Inputs in Color
Inputs of type color are simple because they only accept a limited set of attributes.
Establishing a Default Color
The simple example demonstrated earlier can be adjusted to set a default value. This modification will result in the color picker being initially filled with the default color, setting it as the default color for all color pickers.
<input type="color" value="#ac5353" />
When no value is specified, the default color is black represented by #000000 in hexadecimal notation. The color value should be in the format #rrggbb, where rr represents red, gg represents green, and bb represents blue. Prior to modifying the color value, it is essential to convert any colors in alternative formats, such as CSS color names or methods like rgb or rgba.
<!DOCTYPE html>
<html>
<head>
<title>
Example for adding color picker in form</title>
</head>
<body style="text-align: center;">
<h1>
Welcome
</h1>
<h2>
Example for adding color picker in form
</h2>
<form>
<label>First Name</label>
<input type="text" name="fname"><br /><br>
<label>Last name</label>
<input type="text" name="lname"><br />
<p>
Choose your favorite color:
<input type="color" value="#e66465" id="color" />
</p>
<input type="submit" value="submit">
</form>
</body>
</html>
Output:
Choosing a Value
In cases where a browser does not provide a color picker interface, it will display color inputs as a text box that includes an automatic format validation function. Users can choose the text within the editing field by utilizing the select method.
The select function will not have any effect if the browser decides to use a color picker instead. Understanding this behavior is crucial for ensuring the proper functionality of your code under any circumstances.
colorPicker.select();
Advantages of Using Color Picker in HTML
- HTML provides users with color pickers to select and input colors, which are then converted into a string by the browser upon submission.