If we want to design a converter that can convert the RGB (RED GREEN BLUE) color code to Hexadecimal Colour code, we can use HTML, CSS and JavaScript. Here is the simple example of code format with preview.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Converter</title>
<style>
body {
font-family: Arial, sans-serif;
text-align: center;
margin-top: 50px;
}
#colorPreview {
background:#fff;
width: 200px;
height: 200px;
margin: 20px auto;
border: 4px solid blue;
border-radius:16px;
}
#hexInput, #rgbInput{
border:3px solid blue;
border-radius:4px;
padding:5px;
font-size:16px;
font-weight:800;
}
label{
font-size:20px;
font-weight:800;
}
</style>
</head>
<body>
<div style="background:green; padding:5px;border-radius:10px;color:#fff;">
<h2>Hex to RGB and RGB to Hex Converter</h2>
<label for="hexInput">Hex:</label>
<input type="text" id="hexInput" oninput="convertHexToRgb()" placeholder="format-#abcxyz">
<br><br>
<label for="rgbInput">RGB:</label>
<input type="text" id="rgbInput" oninput="convertRgbToHex()" placeholder="format-NNN, NNN, NNN">
<div id="colorPreview">Color Preview</div>
</div>
<script>
function convertHexToRgb() {
var hex = document.getElementById("hexInput").value;
hex = hex.replace(/^#/, '');
if (hex.length === 3) {
hex = hex[0] + hex[0] + hex[1] + hex[1] + hex[2] + hex[2];
}
var bigint = parseInt(hex, 16);
var r = (bigint >> 16) & 255;
var g = (bigint >> 8) & 255;
var b = bigint & 255;
var rgb = r + ", " + g + ", " + b;
document.getElementById("rgbInput").value = rgb;
updateColorPreview(r, g, b);
}
function convertRgbToHex() {
var rgb = document.getElementById("rgbInput").value;
var rgbArray = rgb.split(", ");
var r = parseInt(rgbArray[0]);
var g = parseInt(rgbArray[1]);
var b = parseInt(rgbArray[2]);
var hex = "#" + ((1 << 24) + (r << 16) + (g << 8) + b).toString(16).slice(1);
document.getElementById("hexInput").value = hex;
updateColorPreview(r, g, b);
}
function updateColorPreview(r, g, b) {
var colorPreview = document.getElementById("colorPreview");
colorPreview.style.backgroundColor = "rgb(" + r + "," + g + "," + b + ")";
}
</script>
</body>
</html>
0 Comments
"Thank you for taking the time to engage with this post! We value thoughtful and constructive comments that contribute to the discussion. Please keep your comments respectful and on-topic. We encourage you to share your insights, ask questions, and participate in meaningful conversations. Note that comments are moderated, and any inappropriate or spammy content will be removed. We look forward to hearing your thoughts!"