RGB to HEX Converter
body {
font-family: 'Arial', sans-serif;
background: linear-gradient(45deg, #ff9a9e, #fad0c4);
margin: 0;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.container {
text-align: center;
background: #ffffff;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
}
h1 {
font-size: 1.8rem;
color: #333;
margin-bottom: 20px;
}
.converter {
display: flex;
flex-direction: column;
gap: 15px;
}
label {
font-size: 1rem;
color: #555;
}
input[type="text"] {
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 1rem;
outline: none;
transition: 0.3s;
}
input[type="text"]:focus {
border-color: #0078d4;
box-shadow: 0 0 4px #0078d4;
}
button {
padding: 10px 15px;
font-size: 1rem;
background-color: #0078d4;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: 0.3s;
}
button:hover {
background-color: #005bb5;
}
.color-picker-label {
margin-top: 10px;
font-size: 1rem;
font-weight: bold;
}
.color-picker {
border: none;
cursor: pointer;
}
@media (max-width: 600px) {
h1 {
font-size: 1.5rem;
}
button {
font-size: 0.9rem;
}
}
// Function to convert RGB to HEX
function rgbToHex(r, g, b) {
const toHex = (value) => {
const hex = Number(value).toString(16);
return hex.length === 1 ? "0" + hex : hex;
};
return `#${toHex(r)}${toHex(g)}${toHex(b)}`;
}
// Handle conversion
document.getElementById("convert-btn").addEventListener("click", () => {
const rgbInput = document.getElementById("rgb-input").value.trim();
const rgbValues = rgbInput.split(",").map((val) => parseInt(val.trim(), 10));
if (
rgbValues.length === 3 &&
rgbValues.every((val) => val >= 0 && val <= 255)
) {
const hex = rgbToHex(rgbValues[0], rgbValues[1], rgbValues[2]);
document.getElementById("hex-output").value = hex;
} else {
alert("Please enter valid RGB values (e.g., 255, 99, 71)");
}
});
// Handle color picker integration
const colorPickerInput = document.getElementById("color-picker");
Coloris({
el: ".color-picker",
});
colorPickerInput.addEventListener("input", (event) => {
const hexColor = event.target.value;
document.getElementById("hex-output").value = hexColor;
// Convert HEX to RGB
const bigint = parseInt(hexColor.slice(1), 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
document.getElementById("rgb-input").value = `${r}, ${g}, ${b}`;
});
