Add a Color Picker in your web-page

HTML Color Pickers serve as valuable tools for users to conveniently select and input colors. The <input> elements with type "color" offer a user-friendly interface that enables users to specify a color either through a visual color picker interface or by directly entering the color into a text field using the #rrggbb hexadecimal format.

With the visual color picker interface, users can interactively explore a range of colors and make precise selections by adjusting sliders or clicking on the desired color within a spectrum. Alternatively, users can manually input color values in the #rrggbb format, where rr represents the red component, gg represents the green component, and bb represents the blue component, all in hexadecimal notation.

The ‹input type="color"› defines a color picker.

<input type="color" id="colorpicker">

Providing a default color

You can update the above code to set a default value, so that the color well is pre-filled with the default color and the color picker (if any) will also default to that color.

<input type="color" id="colorpicker" value="#ed6868">

If you don't specify a value, the default is #000000, which is black.


run this source code

Full Source | HTML/CSS/JavaScript
<html> <head> </head> <body> <label>Pic your color:</label> <input type="color" id="cPicker" value="#ed6868"> </body> </html>

Get the new value of colorpicker when it changes

When you want to get the new color code, you need to attach a handler to the onchange event of your colorpicker.

document.getElementById("cPicker").onchange = function() { selectedColor = this.value; }

run this source code


Full Source | HTML/CSS/JavaScript
<html> <head> </head> <body> <label>Pic your color:</label> <input type="color" id="cPicker" value="#ed6868"> <p id="msg"></p> <script> var sColor = document.getElementById("cPicker").value; var msg = document.getElementById("msg").value; document.getElementById("cPicker").onchange = function() { sColor = this.value; document.getElementById("msg").innerHTML = "Selected Color is : " + sColor; } </script> </body> </html>

Input type color styling

You can add style to your color picker.


run this source code


Full Source | HTML/CSS/JavaScript
<html> <head> <style> .cContainer { position: relative; overflow: hidden; width: 40px; height: 40px; border: solid 2px #ddd; border-radius: 40px; } .input-color { position: absolute; right: -8px; top: -8px; width: 56px; height: 56px; border: none; } .cLabel { cursor: pointer; text-decoration: underline; color: #3498db; } </style> </head> <body> <div class="cContainer"> <input id="input-color" value="#ed6868" class="input-color" type="color"> </div><br> <label class="cLabel" for="input-color"> Click here to get Color Picker </label> <p id="msg"></p> <script> var sColor = document.getElementById("input-color").value; var msg = document.getElementById("msg").value; document.getElementById("input-color").onchange = function() { sColor = this.value; document.getElementById("msg").innerHTML = "Selected Color is : " + sColor; } </script> </body> </html>

Conclusion

The flexibility of HTML Color Pickers makes them valuable components in web forms and applications where color selection is an essential part of the user experience. By providing intuitive and efficient ways to interact with colors, HTML Color Pickers enhance the accessibility and usability of websites and web applications, allowing users to express their creative preferences and make meaningful choices in the visual design of digital content.