Color Converter
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ff7eb3, #ff758c);
color: #fff;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
}
.color-converter {
background: #1e1e2f;
padding: 20px;
border-radius: 10px;
max-width: 400px;
width: 90%;
box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5);
text-align: center;
}
h1 {
margin-bottom: 20px;
}
.input-section {
margin-bottom: 15px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input {
width: 100%;
padding: 10px;
border-radius: 5px;
border: none;
margin-bottom: 10px;
outline: none;
font-size: 16px;
}
button {
background: #ff758c;
color: #fff;
border: none;
padding: 10px 15px;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
}
button:hover {
background: #ff5b73;
}
.output {
margin-top: 20px;
}
#output {
font-size: 16px;
margin-bottom: 10px;
}
#color-preview {
width: 100%;
height: 50px;
border-radius: 5px;
border: 2px solid #fff;
margin-top: 10px;
}
document.getElementById('convert-hex').addEventListener('click', () => {
const hex = document.getElementById('hex').value.trim();
if (isValidHex(hex)) {
const rgb = hexToRgb(hex);
const hsl = rgbToHsl(rgb);
updateOutput(hex, rgb, hsl);
} else {
alert('Invalid HEX value');
}
});
document.getElementById('convert-rgb').addEventListener('click', () => {
const rgbInput = document.getElementById('rgb').value.trim();
const rgb = parseRgb(rgbInput);
if (rgb) {
const hex = rgbToHex(rgb);
const hsl = rgbToHsl(rgb);
updateOutput(hex, rgb, hsl);
} else {
alert('Invalid RGB value');
}
});
document.getElementById('convert-hsl').addEventListener('click', () => {
const hslInput = document.getElementById('hsl').value.trim();
const hsl = parseHsl(hslInput);
if (hsl) {
const rgb = hslToRgb(hsl);
const hex = rgbToHex(rgb);
updateOutput(hex, rgb, hsl);
} else {
alert('Invalid HSL value');
}
});
function isValidHex(hex) {
return /^#?([a-fA-F0-9]{6}|[a-fA-F0-9]{3})$/.test(hex);
}
function hexToRgb(hex) {
hex = hex.replace(/^#/, '');
if (hex.length === 3) hex = hex.split('').map(char => char + char).join('');
const bigint = parseInt(hex, 16);
return {
r: (bigint >> 16) & 255,
g: (bigint >> 8) & 255,
b: bigint & 255,
};
}
function rgbToHex({ r, g, b }) {
return `#${((1 << 24) | (r << 16) | (g << 8) | b).toString(16).slice(1).toUpperCase()}`;
}
function rgbToHsl({ r, g, b }) {
r /= 255;
g /= 255;
b /= 255;
const max = Math.max(r, g, b),
min = Math.min(r, g, b);
let h, s, l = (max + min) / 2;
if (max === min) {
h = s = 0;
} else {
const 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) };
}
function hslToRgb({ h, s, l }) {
s /= 100;
l /= 100;
const c = (1 - Math.abs(2 * l - 1)) * s;
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l - c / 2;
let r = 0, g = 0, b = 0;
if (h < 60) [r, g, b] = [c, x, 0];
else if (h < 120) [r, g, b] = [x, c, 0];
else if (h < 180) [r, g, b] = [0, c, x];
else if (h < 240) [r, g, b] = [0, x, c];
else if (h < 300) [r, g, b] = [x, 0, c];
else [r, g, b] = [c, 0, x];
return { r: Math.round((r + m) * 255), g: Math.round((g + m) * 255), b: Math.round((b + m) * 255) };
}
function parseRgb(input) {
const match = input.match(/^(\d+),\s*(\d+),\s*(\d+)$/);
if (match) {
return { r: +match[1], g: +match[2], b: +match[3] };
}
return null;
}
function parseHsl(input) {
const match = input.match(/^(\d+),\s*(\d+)%?,\s*(\d+)%$/);
if (match) {
return { h: +match[1], s: +match[2], l: +match[3] };
}
return null;
}
function updateOutput(hex, rgb, hsl) {
document.getElementById('output').textContent = `HEX: ${hex}, RGB: ${rgb.r}, ${rgb.g}, ${rgb.b}, HSL: ${hsl.h}, ${hsl.s}%, ${hsl.l}%`;
document.getElementById('color-preview').style.backgroundColor = hex;
}
