好，这个我直接给你一个专业级、可在线使用的「颜色转换器」完整实现 🎨
一个 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>

🚀 使用方法

  1. 新建 color-converter.html
  2. 粘贴代码
  3. 打开即可使用（本地 / 服务器都行）