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.
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;
}
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.
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