Color Picker in Html And CSS|Create hex Color picker in Html

 Color Picker Code in Html and Css

Color Picker with this tool we can easily pick a color of Our Own Choice so in this Post we will design a simple color picker web application with Html Css and JavaScript

 Steps for Designing Color Picker:

  •    first of all we have a text  editor like notepad notepad++, sublime etc.
  •    Create a New File with name colorpicker with extension .html
  •    Now Paste Following Html Code in editor: 
Html code:
<!DOCTYPE html>
<div class="colorcode"> 
<h3> Choose a Color Below</h3>
<input type="color" id="colorinput"><br>
<button type="button" onclick="getcode()">
Generate code
<p id="valuehere"></p>

  • After that paste these css  code in style tag under head tag or create external file.

Css Code:

<style type="text/css">
margin: 0;
width: 100%;
height: 100%;



padding-top: 100px;
padding-left: 30%;

border: 0;
background-color: blue;
margin-top: 10px;
border:2px solid blue;
cursor: pointer;
border-radius: 4px;


  • After pasting Hmtl and Css code Now copy the Script from  below and paste in  head or body tag as per your choice so...
JavaScript code:

<script type="text/javascript">
function getcode(){
var hexcode=document.getElementById("colorinput").value;
document.getElementById("valuehere").innerHTML="hex code for you color is "+hexcode;

Post a comment