How To Make Page Color Picker With HTML5 (Blogger)

Codesafe.blogspot.com | Color picker is a very necessary requirement for web developers, because a web developer needs a color preparation page to design their website to be more attractive, here I will share a blogger tutorial to create a color picker page.

The color picker that I will share here is quite interesting and simple, hopefully the tutorial that I shared is useful for you blogger friends, following the tutorial on creating a color picker page with HTML 5.

How To Make Page Color Picker Responsive With HTML ( Blogger Tutorial )

1. First, Login to Blogger,
2. On the blogger dashboard, select Page > Create New Page > Select "HTML" writing mode,
3. Copy the code below and paste it on the page, then press the "PUBLISH" button,

   <input id="inputColor" type="color" value="#ff1a1a" />
   <button onclick="getColor()">Get Color</button>
   <br />
   <div id="colorHex">
   </div>
   <div id="colorRGB">
   <script>
   function getColor() {
       document.getElementById("colorHex").innerHTML = 'HEX : ' + document.getElementById("inputColor").value;
       document.getElementById("colorRGB").innerHTML = 'RGB : '+ hexToRgb(document.getElementById("inputColor").value);
   }
   function hexToRgb(hex) {
       var result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
       var r = parseInt(result[1], 16);
       var g = parseInt(result[2], 16);
       var b = parseInt(result[3], 16);
       return 'RGB('+r+','+g+','+b+')'; 
   }
   </script>
   </div>

4. In order for your color picker page to be more attractive, please add words first then color picker to make it look professional, and can make it easier for your blog visitors to use the color picker.

That's how to make a color picker page for bloggers, this color picker page is very simple responsive, hopefully useful for you and please visit again to get interesting tutorials and learn other programming languages ​​here.

Thank you.......