.calculator-container {
max-width: 500px;
margin: 40px auto;
padding: 20px;
border: 2px solid #ccc;
border-radius: 12px;
background-color: #f9f9f9;
font-family: Arial, sans-serif;
}
.calculator-container h2 {
text-align: center;
margin-bottom: 10px;
}
.calculator-container p {
text-align: center;
font-size: 14px;
margin-bottom: 20px;
}
.form-row {
display: flex;
align-items: center;
margin-bottom: 15px;
justify-content: space-between;
}
.form-row label {
flex: 1;
}
.form-row input {
flex: 2;
padding: 6px;
margin-left: 10px;
}
.form-buttons {
text-align: center;
margin-top: 15px;
}
.form-buttons button {
padding: 8px 18px;
margin: 5px;
font-size: 14px;
border-radius: 6px;
border: none;
background-color: #3498db;
color: white;
cursor: pointer;
}
.color-display {
height: 60px;
border-radius: 6px;
margin-top: 15px;
text-align: center;
line-height: 60px;
color: #fff;
font-weight: bold;
}

function decodeColor() {
const hex = document.getElementById(“hexInput”).value.trim();
let hexCode = hex.startsWith(“#”) ? hex.slice(1) : hex;

if (!/^([0-9A-Fa-f]{6})$/.test(hexCode)) {
alert(“Please enter a valid 6-digit hex code.”);
return;
}

const r = parseInt(hexCode.slice(0, 2), 16);
const g = parseInt(hexCode.slice(2, 4), 16);
const b = parseInt(hexCode.slice(4, 6), 16);

document.getElementById(“colorBox”).style.backgroundColor = `#${hexCode}`;
document.getElementById(“colorBox”).style.display = “block”;
document.getElementById(“colorBox”).textContent = `#${hexCode.toUpperCase()}`;
document.getElementById(“rgbValues”).innerHTML = `R: ${r}    G: ${g}    B: ${b}`;
}

function resetColor() {
document.getElementById(“hexInput”).value = “”;
document.getElementById(“colorBox”).style.display = “none”;
document.getElementById(“rgbValues”).innerHTML = “”;
}

(adsbygoogle = window.adsbygoogle || []).push({});