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>