css rgb color picker using javascript

css rgb color picker using javascript

Hi



 

<html>
	<head>
		<title>RGB Colors</title>
		<style>
			.box{
				height:40px;
				width:200px;
				display:flex;
				align-items:center;
				padding:10px;
			}
		</style>
	</head>
	<body>
	
		<div id='box' class="box">Hi</div>
		
		<div class="red block">
			<label>RED</label>
			<input type="range" min="0" max="255" value="255" onchange="changeRGB()" oninput="changeRGB()" id="redC">
		</div>
		<div class="green block">
			<label>Green</label>
			<input type="range" min="0" max="255" value="155" onchange="changeRGB()" oninput="changeRGB()" id="greenC">
		</div>
		<div class="blue block">
			<label>Blue</label>
			<input type="range" min="0" max="255" value="55" onchange="changeRGB()" oninput="changeRGB()" id="blueC">
		</div>
		
		<script>
			function changeRGB()
			{
				var redC=document.getElementById("redC").value;
				var greenC=document.getElementById("greenC").value;
				var blueC=document.getElementById("blueC").value;
				//console.log(redC+" "+greenC+" "+blueC);
				document.getElementById("box").style.backgroundColor="rgb("+redC+","+greenC+","+blueC+")";
				document.getElementById("box").innerHTML="rgb("+redC+","+greenC+","+blueC+")";
			}
			changeRGB();
		</script>
		
	</body>
</html>

Share this post