Post
Ask Question

Creating a Color Picker in HTML 5

Introduction

 
This is a simple article for beginners for developing with HTML 5 that helps to understand how to set a color picker in a web application using HTML 5 tools. We know that HTML is the client-side scripting language that helps display the data in a browser. We know that HTML is an acronym for "HyperText Markup Language" used to display data in a browser. HTML 5 is the advanced version of HTML. HTML5 will be the new standard for HTML, XHTML, and the HTML DOM. HTML 5 is the advanced version of HTML that is also used to develop a 3D or multimedia application.
 
Step 1: First open an HTML editor such as Visual Studio.
  • Open start->Notepad
  • The name of the editor is "Tom"
p.gif
 
Step 2: Add a Folder on Desktop.
  • Right-click on desktop
  • new->add folder
p5.gif
 
Step 3: Open Visual Studio.
  • Go to file -> New->Projects
  • Create an ASP.NET Web Application
  • Name of "Color picker"
p3.gif
 
p2.gif
 
Step 4 : Add an HTML file on your web application.
  • Right click of Solution Explorer
  • Add->add new item->HTML form
  • Name of HTML form is "color.html"
p4.gif
 
p6.gif
 
Step 5: Set a style for the color picker application.
 
Code
  1. <style>  
  2. body, input, textarea {  
  3.   font-family: "Algerian", arial, Algerian;  
  4.    }  
  5. label {  
  6.   display: block;  
  7.   float: LEFT;  
  8.   clear: LEFT;  
  9.   text-align: RIGHT;  
  10.   width: 210px;  
  11.   margin-RIGHT: 10px;  
  12.   }  
  13.   input[type=range] {  
  14.   margin-RIGHT: 5px;  
  15.   }  
  16. div { padding: 10px; }  
  17. fieldset { border: 1px solid #ccc; margin-bottom: 20px; width: 500px; float: LEFT;  background-color:#00FF99 ;  
  18.   color: white; }  
  19. #preview { display: block; float: LEFT; height: 300px; width: 300px; background: #00FFFF(180, 0%, 0%); margin: 10px; }  
  20. </style>  
Step 6: Set the fieldset of a color picker application.
 
code
  1. <fieldset>  
  2.     <legend>Set a Color Picker</legend>  
  3.     <div>  
  4.         <label for="SET 0">SET 0</label>  
  5.         <input type="range" name="SET 0" value="0" min="0" max="360" id="SET 0" />Deg  
  6.     </div>  
  7.     <div>  
  8.         <label for="SET 1">SET 1</label>  
  9.         <input type="range" name="SET 1" value="100" min="0" max="100" id="SET 1" />Per  
  10.     </div>  
  11.     <div>  
  12.         <label for="SET 2">SET 2</label>  
  13.         <input type="range" name="SET 2" value="50" min="0" max="100" id="SET 2" />Per  
  14.     </div>  
  15.     <div>  
  16.         <label for="SET 3">SET 3</label>  
  17.         <input type="range" name="SET 3" value="100" min="0" max="100" id="SET 3" />0-10  
  18.     </div>  
  19.     <div>  
  20.         <label for="color"Total:</label>  
  21.         <output id="HSLA">0</output>  
  22.     </div>  
  23.     <div>  
  24.         <label>Red:</label>  
  25.         <output id="BGRA">0</output>  
  26.     </div>  
  27. </fieldset>  
Step 7 : The complete code of a color picker application is:
 
Code
  1. <html>  
  2.     <head>  
  3.         <title>Manish application</title>  
  4.         <style>  
  5. body, input, textarea {  
  6.   font-family: "Algerian", arial, Algerian;  
  7. }  
  8. label {  
  9.   display: block;  
  10.   float: LEFT;  
  11.   clear: LEFT;  
  12.   text-align: RIGHT;  
  13.   width: 210px;  
  14.   margin-RIGHT: 10px;  
  15. }  
  16. input[type=range] {  
  17.   margin-RIGHT: 5px;  
  18. }  
  19. div { padding: 10px; }  
  20. fieldset { border: 1px solid #ccc; margin-bottom: 20px; width: 500px; float: LEFT;  background-color:#00FF99 ;  
  21.   color: white; }  
  22. #preview { display: block; float: LEFT; height: 300px; width: 300px; background: #00FFFF(180, 0%, 0%); margin: 10px; }  
  23. </style>  
  24.     </head>  
  25.     <body>  
  26.         <form>  
  27.             <fieldset>  
  28.                 <legend>Set a Color Picker</legend>  
  29.                 <div>  
  30.                     <label for="SET 0">SET 0</label>  
  31.                     <input type="range" name="SET 0" value="0" min="0" max="360" id="SET 0" />Deg  
  32.                 </div>  
  33.                 <div>  
  34.                     <label for="SET 1">SET 1</label>  
  35.                     <input type="range" name="SET 1" value="100" min="0" max="100" id="SET 1" />Per  
  36.                 </div>  
  37.                 <div>  
  38.                     <label for="SET 2">SET 2</label>  
  39.                     <input type="range" name="SET 2" value="50" min="0" max="100" id="SET 2" />Per  
  40.                 </div>  
  41.                 <div>  
  42.                     <label for="SET 3">SET 3</label>  
  43.                     <input type="range" name="SET 3" value="100" min="0" max="100" id="SET 3" />0-10  
  44.                 </div>  
  45.                 <div>  
  46.                     <label for="color"Total:</label>  
  47.                     <output id="HSLA">0</output>  
  48.                 </div>  
  49.                 <div>  
  50.                     <label>Red:</label>  
  51.                     <output id="BGRA">0</output>  
  52.                 </div>  
  53.             </fieldset>  
  54.         </form>  
  55.         <div id="preview"></div>  
  56.         <script>  
  57.     var HSLA = document.getElementById('HSLA'),  
  58.     preview = document.getElementById('preview'),  
  59.     BGRA = document.getElementById('BGRA'),  
  60.     form = document.getElementsByTagName('form')[0];  
  61.     form.onforminput = function () {  
  62.         var man = this.length, values = [], value = 0;  
  63.         while (man--, value = this[man].value) {  
  64.             if (this[man].type == 'range') {  
  65.                 switch (this[man].name) {  
  66.                     case 'SET 3': values.push(value / 100); break;  
  67.                     case 'SET 0': values.push(value); break;  
  68.                     default: values.push(value + '%');  
  69.                 }  
  70.             }  
  71.         }  
  72.         preview.style.backgroundColor = HSLA.value = 'HSLA(' + values.reverse().join(', ') + ')';  
  73.         BGRA.value = getComputedStyle(preview, null).backgroundColor;  
  74.     };  
  75.     form.onforminput();  
  76. </script>  
  77.     </body>  
  78. </html>  
Step 8 : Run the application in the browser.
 
Output
 


Similar Articles