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>
0 Comments