Color Converter Tool
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: Arial, sans-serif;
background-color: #f7f7f7;
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
background-color: white;
padding: 20px;
border-radius: 10px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
width: 80%;
max-width: 600px;
}
h1 {
font-size: 2rem;
margin-bottom: 20px;
color: #333;
}
.converter {
display: flex;
flex-direction: column;
gap: 20px;
}
.input-container {
display: flex;
flex-direction: column;
align-items: center;
}
label {
margin-bottom: 5px;
font-size: 1rem;
}
input {
padding: 8px;
width: 80%;
max-width: 350px;
font-size: 1rem;
border: 1px solid #ccc;
border-radius: 5px;
text-align: center;
}
button {
background-color: #4CAF50;
color: white;
padding: 10px;
border: none;
border-radius: 5px;
font-size: 1rem;
cursor: pointer;
transition: background-color 0.3s;
}
button:hover {
background-color: #45a049;
}
.color-display {
margin-top: 30px;
}
.color-box {
width: 100px;
height: 100px;
margin-top: 10px;
border-radius: 5px;
background-color: #fff;
transition: background-color 0.3s;
}
@media (max-width: 600px) {
.container {
width: 90%;
}
}
document.getElementById('convertBtn').addEventListener('click', function () {
const hexInput = document.getElementById('hex').value;
const rgbInput = document.getElementById('rgb').value;
const hslInput = document.getElementById('hsl').value;
// Convert HEX to RGB and HSL
if (hexInput && isValidHex(hexInput)) {
const rgb = hexToRgb(hexInput);
const hsl = rgbToHsl(rgb.r, rgb.g, rgb.b);
document.getElementById('rgb').value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
document.getElementById('hsl').value = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
document.getElementById('colorBox').style.backgroundColor = hexInput;
}
// Convert RGB to HEX and HSL
else if (rgbInput && isValidRgb(rgbInput)) {
const rgb = rgbInput.match(/\d+/g).map(Number);
const hex = rgbToHex(rgb[0], rgb[1], rgb[2]);
const hsl = rgbToHsl(rgb[0], rgb[1], rgb[2]);
document.getElementById('hex').value = hex;
document.getElementById('hsl').value = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
document.getElementById('colorBox').style.backgroundColor = `rgb(${rgb[0]}, ${rgb[1]}, ${rgb[2]})`;
}
// Convert HSL to HEX and RGB
else if (hslInput && isValidHsl(hslInput)) {
const hsl = hslInput.match(/\d+/g).map(Number);
const rgb = hslToRgb(hsl[0], hsl[1], hsl[2]);
const hex = rgbToHex(rgb.r, rgb.g, rgb.b);
document.getElementById('hex').value = hex;
document.getElementById('rgb').value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
document.getElementById('colorBox').style.backgroundColor = `hsl(${hsl[0]}, ${hsl[1]}%, ${hsl[2]}%)`;
}
});
// Validate HEX color
function isValidHex(hex) {
return /^#[0-9A-Fa-f]{6}$/.test(hex);
}
// Convert HEX to RGB
function hexToRgb(hex) {
let r = parseInt(hex.slice(1, 3), 16);
let g = parseInt(hex.slice(3, 5), 16);
let b = parseInt(hex.slice(5, 7), 16);
return { r, g, b };
}
// Convert RGB to HEX
function rgbToHex(r, g, b) {
return `#${(1 << 24 | r << 16 | g << 8 | b).toString(16).slice(1).toUpperCase()}`;
}
// Convert RGB to HSL
function rgbToHsl(r, g, b) {
r /= 255;
g /= 255;
b /= 255;
let max = Math.max(r, g, b);
let min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
let d = max - min;
s = l > 0.5 ? d / (2 - max - min) : d / (max + min);
switch (max) {
case r:
h = (g - b) / d + (g < b ? 6 : 0);
break;
case g:
h = (b - r) / d + 2;
break;
case b:
h = (r - g) / d + 4;
break;
}
h /= 6;
}
return {
h: Math.round(h * 360),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
// Validate RGB color
function isValidRgb(rgb) {
return /^rgb\((\d{1,3}), (\d{1,3}), (\d{1,3})\)$/.test(rgb);
}
// Validate HSL color
function isValidHsl(hsl) {
return /^hsl\((\d{1,3}), (\d{1,3})%, (\d{1,3})%\)$/.test(hsl);
}
