Post
Ask Question

Working With HTML5 Color Picker

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 on 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 to any element on 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 an 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 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 used 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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html>  
  3. <head>  
  4.   <title></title>  
  5.   <script language="javascript">  
  6.       function newBackgroundColor(color) {  
  7.           document.bgColor = color;  
  8.           var a = document.getElementById("t1");  
  9.           a.value = color;  
  10.       }  
  11.       function processdata(c2) {  
  12.           var a = document.getElementById(c2).value;  
  13.           var ab = document.getElementById("h");  
  14.           aab.style.color = a;  
  15.       }  
  16.   </script>  
  17.    <style type="text/css">  
  18.         #color2  
  19.         {  
  20.             width: 465px;  
  21.         }  
  22.         #color1  
  23.         {  
  24.             width: 464px;  
  25.         }  
  26.     </style>  
  27. </head>  
  28. <body>  
  29.   <h1 id="h" style="color: #00FFFF">HTML 5 Color Picker Demonstrated</h1>  
  30.   <input type="color" name="color2" id="color2" /> <input id="Button1" type="button" value="Change Label Color" onclick="processdata('color2')"/>   <br />  
  31.    <p>Select Background Color  
  32.    <input name="colorpicker" id="color1" type="color" onchange="newBackgroundColor(colorpicker.value);">  
  33.    </p>  
  34.    Selected Color is:  
  35.    <input name="selectedcolor" id="t1" type="text">  
  36.    </p>  
  37. </body>  
  38. </html> 
Output
 
1.jpg
 
We can also use custom color from the color picker
 
2.jpg
 
Other Browsers
 
Firefox 3.6, Chrome 8, Safari 5 and Internet Explorer 8 do 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
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2.   
  3. <html xmlns="http://www.w3.org/1999/xhtml">  
  4. <head>  
  5.     <title></title>  
  6.     <script type="text/javascript">  
  7.         function processdata(c2) {  
  8.             var a = document.getElementById(c2).value;  
  9.             document.getElementById("Label1").style.color = a;      
  10.        }  
  11.         function newBackgroundColor(color) {  
  12.             document.bgColor = color;  
  13.             var a = document.getElementById("t1");  
  14.             a.value = color;  
  15.         }  
  16.     </script>  
  17.     <style type="text/css">  
  18.         #color1  
  19.         {  
  20.             width: 465px;  
  21.         }  
  22.         #color2  
  23.         {  
  24.             width: 464px;  
  25.         }  
  26.     </style>  
  27. </head>  
  28. <body>  
  29. <form id="form1" runat="server">  
  30.     <div>     
  31.         <asp:Label ID="Label1" runat="server" Text="Select Color for change the color"></asp:Label>     
  32.     </div>  
  33.  <br />  
  34.  <input type="color" name="color2" id="color2" />   
  35.  <input id="Button1" type="button" value="Change Label Color" onclick="processdata('color2')"/>   <br />  
  36. <input type="color" name="color1" id="color1" onchange="newBackgroundColor(color1.value);" /><br/>  
  37. <br />Select the Color for Background  
  38.  Selected Color is:  
  39.  <input name="selectedcolor" id="t1" type="text"/>  
  40.  </form>  
  41. </body>  
  42. </html> 
Output
 
3.jpg
 


Similar Articles