Introduction
In this article we are going to understand working with a color picker in HTML5 using some JavaScript code. A Color picker is one of the most important elements in HTML5. It provides the ability to pick a color from the color picker control and use their value anywhere in the page to change the look at runtime. There's not much in the code for a color picker; it is just an input type tag with a "name" attribute. We are also able to get the value from the color picker that is selected by the user and applied on any element in the page using a scripting language. The Color picker input type is rendered to the browser depending on the browser type. It is mostly run by all the major browsers with the latest version, but the Opera browser provides an elegant control to allow the user to select a color or type in a color's code and all the other browsers like FireFox, IE, and Chrome do not provide a nice control at this point. The code however still works in them if the user types in a recognized color string. We can also bind the various events with a HTML5 Color-picker like an on change event and the JavaScript function will be called upon the event of a change of the HTML5 Color-picker. In the later section we will define the HTML5 Color Picker control and run it in the various browsers to see how they each work.
Here we will see the output of various browsers
Opera 11's Color Picker: In this browser the images show the actual color picker control in which the user can choose from a larger set of colors or can be define a custom color, then we use some JavaScript code to be invoked when a color is selected and then the color of the background is changed according to the color selected by the user and the code of the color is also displayed in the textbox. In this example we use two control pickers; one is to change the color of the header text and the other is use to change the background color of the page and also display the selected color into the text-box for the background color.
Here is the Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title></title>
<script language="javascript">
function newBackgroundColor(color) {
document.bgColor = color;
var a = document.getElementById("t1");
a.value = color;
}
function processdata(c2) {
var a = document.getElementById(c2).value;
var ab = document.getElementById("h");
ab.style.color = a;
}
</script>
<style type="text/css">
#color2
{
width: 465px;
}
#color1
{
width: 464px;
}
</style>
</head>
<body>
<h1 id="h" style="color: #00FFFF">HTML 5 Color Picker Demonstrated</h1>
<input type="color" name="color2" id="color2" /> <input id="Button1" type="button" value="Change Label Color" onclick="processdata('color2')"/> <br />
<p>Select Background Color
<input name="colorpicker" id="color1" type="color" onchange="newBackgroundColor(colorpicker.value);">
</p>
Selected Color is:
<input name="selectedcolor" id="t1" type="text">
</p>
</body>
</html>
Output
![1.jpg]()
We can also use custom color from color picker
![2.jpg]()
Other Browsers: FireFox 3.6, Chrome 8, Safari 5 and Internet Explorer 8 does not support the color picker in the manner that Opera does. All of these browsers render the color picker control in the same manner. These browsers represent the Color picker as a simple text field, but when the user enters the name of a color as a string it can be interpreted as a valid color code, and we are able to perform all the operations using that text and the functionality still works appropriately. In these browsers we don't use the custom color facility of the control.
Here is the Code
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript">
function processdata(c2) {
var a = document.getElementById(c2).value;
document.getElementById("Label1").style.color = a;
}
function newBackgroundColor(color) {
document.bgColor = color;
var a = document.getElementById("t1");
a.value = color;
}
</script>
<style type="text/css">
#color1
{
width: 465px;
}
#color2
{
width: 464px;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:Label ID="Label1" runat="server" Text="Select Color for change the color"></asp:Label>
</div>
<br />
<input type="color" name="color2" id="color2" />
<input id="Button1" type="button" value="Change Label Color" onclick="processdata('color2')"/> <br />
<input type="color" name="color1" id="color1" onchange="newBackgroundColor(color1.value);" /><br/>
<br />Select the Color for Background
Selected Color is:
<input name="selectedcolor" id="t1" type="text"/>
</form>
</body>
</html>
Output
![3.jpg]()