How to create color generator with html and javascript
How to create color generator with html and javascript
Color generator will generate hexadecimal code and rgb code .
User can create any type of color through it.
So lets begin.
Here is the code
<html>
<head>
<style type="text/css">
#colored
{
width:300px;
height :100px;
border:1px solid #ddd ;
}
</style>
</head>
<body>
<div id="colored"></div>
<p>Red</p>
<input oninput="getColor()" id="red" type="range" max="255" min="0" step="1" value="30">
<p>Green</p>
<input oninput="getColor()"id="green" type="range" max="255" min="0" step="1" value="30">
<p>Blue </p>
<input oninput="getColor()"id="blue" type="range" max="255" min="0" step="1" value="30">
<p>Color</p>
<input type="text" id="st">
<input type="text" id="st2">
<script type="text/javascript">
var red =document.getElementById("red");
var green=document.getElementById("green");
var blue =document.getElementById("blue");
var st =document.getElementById("st");
var st2 = document.getElementById("st2");
var colored = document.getElementById("colored");
function getColor(){
var r = parseInt(red.value) ;
var g = parseInt(green.value) ;
var b = parseInt(blue.value) ;
var rr = r.toString(16);
var gg = g.toString(16);
var bb = b.toString(16);
var color = "#"+rr+""+gg+""+bb;
st.value =color;
colored.style.background = color;
st2.value = "rgb("+r+","+g+","+b+")";
}
</script>
</body>
</html>
Comments
Post a Comment