<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
margin: 0;
padding: 0;
}
#container {
max-width: 800px;
margin: 0 auto;
padding: 20px;
background-color: #fff;
border-radius: 5px;
box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
}
h1 {
text-align: center;
}
input[type="number"] {
width: 50px;
margin-right: 10px;
padding: 5px;
border-radius: 5px;
border: none;
text-align: center;
}
input[type="button"] {
padding: 5px 10px;
background-color: #4caf50;
color: #fff;
border-radius: 5px;
border: none;
cursor: pointer;
}
#result {
margin-top: 20px;
font-size: 24px;
text-align: center;
}
#colorPicker {
width: 100%;
height: 200px;
margin: 20px 0;
border-radius: 5px;
}
</style>
<title>RGB to HEX Converter</title>
</head>
<body>
<div id="container">
<h1>RGB to HEX Converter</h1>
<div>
<input type="color" id="colorPicker" onchange="updateRGB()">
</div>
<div>
<label>Red:</label>
<input type="number" id="red" min="0" max="255" value="0" onchange="updateColor()">
<label>Green:</label>
<input type="number" id="green" min="0" max="255" value="0" onchange="updateColor()">
<label>Blue:</label>
<input type="number" id="blue" min="0" max="255" value="0" onchange="updateColor()">
</div>
<div id="result"></div>
</div>
<script>
var colorPicker = document.getElementById("colorPicker");
var redInput = document.getElementById("red");
var greenInput = document.getElementById("green");
var blueInput = document.getElementById("blue");
var resultDiv = document.getElementById("result");
function updateRGB() {
var color = colorPicker.value;
var rgb = hexToRGB(color);
redInput.value = rgb.r;
greenInput.value = rgb.g;
blueInput.value = rgb.b;
updateColor();
}
function updateColor() {
var red = redInput.value;
var green = greenInput.value;
var blue = blueInput.value;
var hex = "#" + componentToHex(red) + componentToHex(green) + componentToHex(blue);
colorPicker.value = hex;
resultDiv.innerHTML = hex;
}
function hexToRGB(hex) {
var r = parseInt(hex.substring(1, 3), 16);
var g = parseInt(hex.substring(3, 5), 16);
var b = parseInt(hex.substring(5, 7), 16);
return { r: r, g: g, b: b };
}
function componentToHex(c) {
var hex = parseInt(c).toString(16);
return hex.length == 1 ? "0" + hex : hex;
}
updateRGB();
</script>
</body>
</html>
No comments:
Post a Comment