Color Converter
/* styles.css */
body {
font-family: 'Arial', sans-serif;
margin: 0;
padding: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: linear-gradient(to bottom, #74ebd5, #9face6);
}
.container {
background-color: white;
border-radius: 10px;
padding: 20px;
box-shadow: 0px 4px 20px rgba(0, 0, 0, 0.2);
max-width: 400px;
width: 90%;
}
h1 {
text-align: center;
color: #333;
}
.color-preview {
width: 100%;
height: 100px;
border-radius: 10px;
margin-bottom: 20px;
background-color: #FFFFFF;
border: 1px solid #ddd;
}
.input-group {
display: flex;
flex-direction: column;
margin-bottom: 15px;
}
label {
font-size: 14px;
margin-bottom: 5px;
color: #555;
}
input[type="text"] {
padding: 10px;
font-size: 14px;
border: 1px solid #ddd;
border-radius: 5px;
outline: none;
transition: border 0.2s;
}
input[type="text"]:focus {
border: 1px solid #74ebd5;
}
// script.js
document.addEventListener("DOMContentLoaded", () => {
const hexInput = document.getElementById("hexInput");
const rgbInput = document.getElementById("rgbInput");
const hslInput = document.getElementById("hslInput");
const colorPreview = document.getElementById("colorPreview");
function hexToRgb(hex) {
let parsedHex = hex.replace("#", "");
if (parsedHex.length === 3) {
parsedHex = parsedHex
.split("")
.map((x) => x + x)
.join("");
}
const bigint = parseInt(parsedHex, 16);
const r = (bigint >> 16) & 255;
const g = (bigint >> 8) & 255;
const b = bigint & 255;
return `rgb(${r}, ${g}, ${b})`;
}
function rgbToHex(rgb) {
const result = rgb
.replace(/[^\d,]/g, "")
.split(",")
.map((x) => parseInt(x).toString(16).padStart(2, "0"))
.join("");
return `#${result}`;
}
function rgbToHsl(rgb) {
const [r, g, b] = rgb
.replace(/[^\d,]/g, "")
.split(",")
.map((x) => parseInt(x) / 255);
const max = Math.max(r, g, b);
const min = Math.min(r, g, b);
const delta = max - min;
let h = 0;
let s = 0;
let l = (max + min) / 2;
if (delta !== 0) {
s = delta / (1 - Math.abs(2 * l - 1));
if (max === r) {
h = ((g - b) / delta + (g < b ? 6 : 0)) % 6;
} else if (max === g) {
h = (b - r) / delta + 2;
} else {
h = (r - g) / delta + 4;
}
h = Math.round(h * 60);
}
s = Math.round(s * 100);
l = Math.round(l * 100);
return `hsl(${h}, ${s}%, ${l}%)`;
}
function hslToRgb(hsl) {
const [h, s, l] = hsl
.replace(/[^\d,.%]/g, "")
.split(",")
.map((x) => parseFloat(x));
const c = (1 - Math.abs(2 * l / 100 - 1)) * (s / 100);
const x = c * (1 - Math.abs((h / 60) % 2 - 1));
const m = l / 100 - 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 `rgb(${Math.round((r + m) * 255)}, ${Math.round((g + m) * 255)}, ${Math.round((b + m) * 255)})`;
}
function updateColors() {
if (hexInput.value) {
const rgb = hexToRgb(hexInput.value);
const hsl = rgbToHsl(rgb);
rgbInput.value = rgb;
hslInput.value = hsl;
colorPreview.style.backgroundColor = hexInput.value;
} else if (rgbInput.value) {
const hex = rgbToHex(rgbInput.value);
const hsl = rgbToHsl(rgbInput.value);
hexInput.value = hex;
hslInput.value = hsl;
colorPreview.style.backgroundColor = hex;
} else if (hslInput.value) {
const rgb = hslToRgb(hslInput.value);
const hex = rgbToHex(rgb);
rgbInput.value = rgb;
hexInput.value = hex;
colorPreview.style.backgroundColor = hex;
}
}
hexInput.addEventListener("input", updateColors);
rgbInput.addEventListener("input", updateColors);
hslInput.addEventListener("input", updateColors);
});
