【HTML颜色转换器：轻松转换颜色代码】

颜色是网页设计中非常重要的元素，它可以影响网页的整体视觉效果，甚至可以影响用户的体验感。因此，在网页设计中，选择合适的颜色非常重要。HTML颜色转换器可以帮助用户轻松地转换多种颜色格式，包括十六进制、RGB、HSL和CMYK。

HTML颜色转换器通常具有以下功能：

• 十六进制、RGB、HSL和CMYK颜色格式之间的转换
• 支持自定义颜色值输入
• 提供颜色预览
• 提供颜色代码复制功能

使用HTML颜色转换器非常简单，用户只需要选择要转换的颜色格式，然后输入颜色值，即可转换出其他格式的颜色代码。以下是一个演示代码：

<form>
  <label for="color">颜色：</label>
  <input type="text" id="color" name="color" value="#FF0000">
  <input type="submit" value="转换">
</form>

<p>十六进制：<span id="hex"></span></p>
<p>RGB：<span id="rgb"></span></p>
<p>HSL：<span id="hsl"></span></p>
<p>CMYK：<span id="cmyk"></span></p>

<script>
  const colorInput = document.getElementById("color");
  const hexSpan = document.getElementById("hex");
  const rgbSpan = document.getElementById("rgb");
  const hslSpan = document.getElementById("hsl");
  const cmykSpan = document.getElementById("cmyk");

  colorInput.addEventListener("change", () => {
    const color = colorInput.value;
    const hex = rgb2hex(color);
    const rgb = hex2rgb(hex);
    const hsl = rgb2hsl(rgb);
    const cmyk = rgb2cmyk(rgb);

    hexSpan.textContent = hex;
    rgbSpan.textContent = `rgb(${rgb.r}, ${rgb.g}, ${rgb.b})`;
    hslSpan.textContent = `hsl(${hsl.h}, ${hsl.s}%, ${hsl.l}%)`;
    cmykSpan.textContent = `cmyk(${cmyk.c}%, ${cmyk.m}%, ${cmyk.y}%, ${cmyk.k}%)`;
  });

  function rgb2hex(rgb) {
    const r = parseInt(rgb.substring(4, 7), 10);
    const g = parseInt(rgb.substring(8, 11), 10);
    const b = parseInt(rgb.substring(12, 15), 10);
    return `#${r.toString(16)}${g.toString(16)}${b.toString(16)}`;
  }

  function hex2rgb(hex) {
    const r = parseInt(hex.substring(1, 3), 16);
    const g = parseInt(hex.substring(3, 5), 16);
    const b = parseInt(hex.substring(5, 7), 16);
    return { r, g, b };
  }

  function rgb2hsl(rgb) {
    const r = rgb.r / 255;
    const g = rgb.g / 255;
    const b = rgb.b / 255;

    const max = Math.max(r, g, b);
    const min = Math.min(r, g, b);
    const diff = max - min;

    let h, s, l;

    if (diff == 0) {
      h = 0;
    } else if (max == r) {
      h = 60 * ((g - b) / diff) + 360;
    } else if (max == g) {
      h = 60 * ((b - r) / diff) + 120;
    } else {
      h = 60 * ((r - g) / diff) + 240;
    }

    if (max == 0) {
      s = 0;
    } else {
      s = (diff / max) * 100;
    }

    l = (max + min) / 2 * 100;

    return { h, s, l };
  }

  function hsl2rgb(hsl) {
    const h = hsl.h / 360;
    const s = hsl.s / 100;
    const l = hsl.l / 100;

    let r, g, b;

    if (s == 0) {
      r = g = b = l;
    } else {
      const q = l < 0.5 ? l * (1 + s) : l + s - l * s;
      const p = 2 * l - q;

      r = hue2rgb(p, q, h + 1 / 3);
      g = hue2rgb(p, q, h);
      b = hue2rgb(p, q, h - 1 / 3);
    }

    return { r, g, b };
  }

  function hue2rgb(p, q, t) {
    if (t < 0) {
      t += 1;
    } else if (t > 1) {
      t -= 1;
    }

    if (t < 1 / 6) {
      return p + (q - p) * 6 * t;
    } else if (t < 1 / 2) {
      return q;
    } else if (t < 2 / 3) {
      return p + (q - p) * (2 / 3 - t) * 6;
    } else {
      return p;
    }
  }

  function rgb2cmyk(rgb) {
    const r = rgb.r / 255;
    const g = rgb.g / 255;
    const b = rgb.b / 255;

    const k = 1 - Math.max(r, g, b);
    const c = (1 - r - k) / (1 - k);
    const m = (1 - g - k) / (1 - k);
    const y = (1 - b - k) / (1 - k);

    return { c, m, y, k };
  }

  function cmyk2rgb(cmyk) {
    const c = cmyk.c / 100;
    const m = cmyk.m / 100;
    const y = cmyk.y / 100;
    const k = cmyk.k / 100;

    const r = 1 - Math.min(1, c * (1 - k) + k);
    const g = 1 - Math.min(1, m * (1 - k) + k);
    const b = 1 - Math.min(1, y * (1 - k) + k);

    return { r, g, b };
  }
</script>

在页面中使用该代码，用户可以输入任何颜色值，然后点击“转换”按钮，即可转换出其他格式的颜色代码。

HTML颜色转换器是一种非常实用的工具，它可以帮助用户轻松地转换颜色代码，从而提高网页开发的效率。