Add a Color Picker in your web-page

HTML Color Pickers are primarily used to select and input colors. The ‹input› elements of type color provide a user interface element that lets a user specify a color, either by using a visual color picker interface or by entering the color into a text field in #rrggbb hexadecimal format.

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>



NEXT.....Android Color Management