<!DOCTYPE html>
<html>
<head>
<title>HEX to RGB Color Converter</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<style>
body {
font-family: Arial, sans-serif;
background-color: #f2f2f2;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
#color-picker {
width: 100%;
height: 200px;
margin-bottom: 30px;
}
#rgb-result {
font-size: 24px;
text-align: center;
margin-bottom: 10px;
}
</style>
</head>
<body>
<h1>HEX to RGB Color Converter</h1>
<input type="color" id="color-picker" onchange="convertHexToRgb()">
<div id="rgb-result"></div>
<script>
function convertHexToRgb() {
// Get the selected color from the color picker
const hexColor = document.getElementById("color-picker").value;
// Convert the HEX color to RGB
const r = parseInt(hexColor.substring(1, 3), 16);
const g = parseInt(hexColor.substring(3, 5), 16);
const b = parseInt(hexColor.substring(5, 7), 16);
// Display the RGB result
const rgbResult = document.getElementById("rgb-result");
rgbResult.textContent = `RGB: ${r}, ${g}, ${b}`;
}
</script>
</body>
</html>
No comments:
Post a Comment