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>
<html>
<head>
<title>
COLOR PICKER
</title>
</head>
<body>
<div class="colorcode"> 
<h3> Choose a Color Below</h3>
<input type="color" id="colorinput"><br>
<button type="button" onclick="getcode()">
Generate code
</button>
<p id="valuehere"></p>

</div>
</body>
</html>
  • After that paste these css  code in style tag under head tag or create external file.

Css Code:

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

}

.colorcode{

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

}
#colorinput{
padding:15px;
border: 0;
}
button{
background-color: blue;
padding:5px;
margin-top: 10px;
color:white;
border:2px solid blue;
cursor: pointer;
border-radius: 4px;

}

</style>
  • 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;
}
</script>