Color Converter Tool Free Code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Color Converter Tool</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background: linear-gradient(135deg, #ff9a9e, #fad0c4);
color: #333;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.converter-container {
background: #fff;
border-radius: 10px;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
width: 90%;
max-width: 500px;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 20px;
color: #555;
}
.input-group {
margin-bottom: 20px;
}
label {
display: block;
font-weight: bold;
margin-bottom: 5px;
}
input[type="text"] {
width: 100%;
padding: 10px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
}
button {
width: 100%;
padding: 10px;
background: #4CAF50;
color: #fff;
border: none;
border-radius: 5px;
cursor: pointer;
font-size: 16px;
margin-top: 10px;
}
button:hover {
background: #45a049;
}
.output {
text-align: center;
margin-top: 20px;
}
.color-box {
width: 100px;
height: 100px;
margin: 10px auto;
border-radius: 5px;
border: 1px solid #ddd;
}
@media (max-width: 500px) {
h1 {
font-size: 20px;
}
button {
font-size: 14px;
}
}
</style>
</head>
<body>
<div class="converter-container">
<h1>Color Converter</h1>
<div class="input-group">
<label for="hex">HEX:</label>
<input type="text" id="hex" placeholder="#RRGGBB">
</div>
<div class="input-group">
<label for="rgb">RGB:</label>
<input type="text" id="rgb" placeholder="rgb(255, 255, 255)">
</div>
<div class="input-group">
<label for="hsl">HSL:</label>
<input type="text" id="hsl" placeholder="hsl(360, 100%, 50%)">
</div>
<button onclick="convertColor()">Convert</button>
<div class="output">
<div class="color-box" id="color-box"></div>
</div>
</div>
<script>
function hexToRgb(hex) {
const shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
hex = hex.replace(shorthandRegex, (m, r, g, b) => r + r + g + g + b + b);
const match = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
return match ? {
r: parseInt(match[1], 16),
g: parseInt(match[2], 16),
b: parseInt(match[3], 16)
} : null;
}
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 `hsl(${Math.round(h * 360)}, ${Math.round(s * 100)}%, ${Math.round(l * 100)}%)`;
}
function hslToRgb(h, s, l) {
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 = c; g = x; }
else if (h < 120) { r = x; g = c; }
else if (h < 180) { g = c; b = x; }
else if (h < 240) { g = x; b = c; }
else if (h < 300) { r = x; b = c; }
else { r = c; b = x; }
r = Math.round((r + m) * 255);
g = Math.round((g + m) * 255);
b = Math.round((b + m) * 255);
return { r, g, b };
}
function convertColor() {
const hexInput = document.getElementById('hex').value.trim();
const rgbInput = document.getElementById('rgb').value.trim();
const hslInput = document.getElementById('hsl').value.trim();
const colorBox = document.getElementById('color-box');
if (hexInput) {
const rgb = hexToRgb(hexInput);
if (rgb) {
document.getElementById('rgb').value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
document.getElementById('hsl').value = rgbToHsl(rgb.r, rgb.g, rgb.b);
colorBox.style.backgroundColor = hexInput;
}
} else if (rgbInput) {
const match = rgbInput.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
if (match) {
const r = parseInt(match[1]);
const g = parseInt(match[2]);
const b = parseInt(match[3]);
document.getElementById('hex').value = rgbToHex(r, g, b);
document.getElementById('hsl').value = rgbToHsl(r, g, b);
colorBox.style.backgroundColor = `rgb(${r}, ${g}, ${b})`;
}
} else if (hslInput) {
const match = hslInput.match(/^hsl\((\d+),\s*(\d+)%?,\s*(\d+)%?\)$/);
if (match) {
const h = parseInt(match[1]);
const s = parseInt(match[2]) / 100;
const l = parseInt(match[3]) / 100;
const rgb = hslToRgb(h, s, l);
document.getElementById('hex').value = rgbToHex(rgb.r, rgb.g, rgb.b);
document.getElementById('rgb').value = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
colorBox.style.backgroundColor = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
}
}
}
</script>
</body>
</html>