好，这个我直接给你一个专业级、可在线使用的「颜色转换器」完整实现 🎨
一个 HTML 文件即可运行，支持多种颜色格式互转，代码清晰、好扩展，拿去就能当工具站用。
✅ 支持的颜色格式
- HEX ⇄ RGB
- RGB ⇄ HSL
- HEX ⇄ HSL
- 实时颜色预览
- 一键转换
📄 完整代码（HTML + CSS + JavaScript）
文件名示例：
color-converter.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>颜色转换器 | HEX / RGB / HSL</title>
<style>
body {
font-family: Arial, Helvetica, sans-serif;
background: #f4f6f8;
padding: 40px;
}
.container {
max-width: 720px;
margin: auto;
background: #fff;
padding: 30px;
border-radius: 12px;
box-shadow: 0 6px 20px rgba(0,0,0,.1);
}
h1 {
text-align: center;
}
label {
display: block;
margin-top: 15px;
font-weight: bold;
}
input {
width: 100%;
padding: 10px;
margin-top: 6px;
font-size: 16px;
}
button {
margin-top: 20px;
padding: 12px;
width: 100%;
font-size: 16px;
background: #007bff;
color: white;
border: none;
border-radius: 8px;
cursor: pointer;
}
button:hover {
background: #0056b3;
}
.preview {
margin-top: 25px;
height: 80px;
border-radius: 8px;
border: 1px solid #ddd;
}
.note {
margin-top: 15px;
color: #666;
font-size: 14px;
}
</style>
</head>
<body>
<div class="container">
<h1>🎨 颜色转换器</h1>
<label>HEX（如 #ff6600）</label>
<input id="hex" placeholder="#ff6600">
<label>RGB（如 255, 102, 0）</label>
<input id="rgb" placeholder="255, 102, 0">
<label>HSL（如 24, 100%, 50%）</label>
<input id="hsl" placeholder="24, 100%, 50%">
<button onclick="convertColor()">转换颜色</button>
<div class="preview" id="preview"></div>
<div class="note">
支持 HEX ⇄ RGB ⇄ HSL 自动识别转换
</div>
</div>
<script>
function convertColor() {
const hexInput = document.getElementById("hex").value.trim();
const rgbInput = document.getElementById("rgb").value.trim();
const hslInput = document.getElementById("hsl").value.trim();
let rgb;
if (hexInput) {
rgb = hexToRgb(hexInput);
} else if (rgbInput) {
rgb = parseRgb(rgbInput);
} else if (hslInput) {
rgb = hslToRgb(parseHsl(hslInput));
} else {
alert("请输入一种颜色格式");
return;
}
const hex = rgbToHex(rgb);
const hsl = rgbToHsl(rgb);
document.getElementById("hex").value = hex;
document.getElementById("rgb").value = `${rgb.r}, ${rgb.g}, ${rgb.b}`;
document.getElementById("hsl").value = `${hsl.h}, ${hsl.s}%, ${hsl.l}%`;
document.getElementById("preview").style.background = hex;
}
/* HEX -> RGB */
function hexToRgb(hex) {
hex = hex.replace("#", "");
if (hex.length === 3) {
hex = hex.split("").map(x => x + x).join("");
}
const bigint = parseInt(hex, 16);
return {
r: (bigint >> 16) & 255,
g: (bigint >> 8) & 255,
b: bigint & 255
};
}
/* RGB 字符串解析 */
function parseRgb(str) {
const [r, g, b] = str.split(",").map(x => parseInt(x.trim()));
return { r, g, b };
}
/* RGB -> HEX */
function rgbToHex({ r, g, b }) {
return "#" + [r, g, b].map(x =>
x.toString(16).padStart(2, "0")
).join("");
}
/* RGB -> HSL */
function rgbToHsl({ r, g, b }) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b);
const 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 *= 60;
}
return {
h: Math.round(h),
s: Math.round(s * 100),
l: Math.round(l * 100)
};
}
/* HSL 字符串解析 */
function parseHsl(str) {
let [h, s, l] = str.replace(/%/g, "").split(",").map(x => parseFloat(x));
return { h, s, l };
}
/* HSL -> RGB */
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)
};
}
</script>
</body>
</html>
🚀 使用方法
- 新建
color-converter.html - 粘贴代码
- 打开即可使用（本地 / 服务器都行）