颜色格式互转：HEX / RGB / HSL / HSV 为什么来回转会变色

约 7 分钟读完 · 更新于 2026-10-21 · 文中每条都能在下面的配套工具里动手验证

往返一次差三个色阶：#4f8cff → hsl(219,100%,65%) → #4d8bff

这是最常见的一类「色差 bug」：Figma 里复制出 #4f8cff，写进代码要改成变量就转成 hsl(219,100%,65%)，之后某次「顺手优化」又把它转回 hex，得到的却是 #4d8bff。设计稿与线上肉眼看起来差不多，但设计系统的色板比对会把它们判成两个不同的颜色。真正的差别不在格式，在于 HEX 是「设备上那一格像素的绝对数值」，而 HSL 是「按色相饱和度明度重新算出来的近似描述」，来回换算必然要经过一次量化与舍入。

四种格式的取值边界：谁在什么场景下用哪一种

挑错格式是色差问题的上游来源。判据只有一条：这份数值是「最终写死的颜色」还是「要继续派生的基色」。

const hex2rgb = h => {
  h = h.replace("#", "");
  if (h.length === 3 || h.length === 4) h = [...h].map(c => c + c).join("");
  const n = parseInt(h, 16);
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255];
};

const rgb2hsl = ([r, g, b]) => {
  [r, g, b] = [r / 255, g / 255, b / 255];
  const mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn;
  let h = 0, s = 0; const l = (mx + mn) / 2;
  if (d) {
    s = d / (1 - Math.abs(2 * l - 1));
    if (mx === r) h = 60 * (((g - b) / d) % 6);
    else if (mx === g) h = 60 * ((b - r) / d + 2);
    else h = 60 * ((r - g) / d + 4);
    if (h < 0) h += 360;
  }
  return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
};

const rgb2hsv = ([r, g, b]) => {
  [r, g, b] = [r / 255, g / 255, b / 255];
  const mx = Math.max(r, g, b), mn = Math.min(r, g, b), d = mx - mn;
  let h = 0;
  if (d) {
    if (mx === r) h = 60 * (((g - b) / d) % 6);
    else if (mx === g) h = 60 * ((b - r) / d + 2);
    else h = 60 * ((r - g) / d + 4);
    if (h < 0) h += 360;
  }
  return [Math.round(h), Math.round(mx ? (d / mx) * 100 : 0), Math.round(mx * 100)];
};

rgb2hsl(hex2rgb("#4f8cff"));  // [219, 100, 65]  → 回到 hex 是 #4d8bff

精度为什么会丢：8 位量化 + 取整，只有纯黑纯白无损

sRGB 每个通道只有 256 级，HEX 是它的十六进制写法；HSL 则是把 RGB 换算到柱坐标系后的结果，换算过程要除法、要乘 360、还要按百分比取整，每一步都在引入误差。所以只有 #ffffff 和 #000000 这类极值能保证无损往返，中间色几乎都会漂。下面这组是从真实项目里取的样本，可以直接拿去说服坚持「用 HSL 就不掉色」的人。

同一个色值在两台屏幕上不一样：六个真实原因

代码写的是 sRGB，屏幕不一定按 sRGB 显示。下面这六种「代码完全正确但颜色不对」的情况，按实际排查频率排序。

什么时候该用 HSL，什么时候老老实实写 HEX

• 用 HEX：最终写死的颜色、需要和设计稿逐值对齐的色板、要在 Figma 与代码之间反复比对的品牌色。这类场景以 HEX 为唯一真源，零歧义。
• 用 HSL：需要从基色派生出深浅阶梯时。只改 L 就能得到一整套 hover 与 dark 状态，改 R/G/B 三个通道则几乎必然偏色相。
• 用 HSL：需要按参数生成一整套色板时。把品牌色 H 抽出来、S 固定、L 取 20/40/60/80，一行代码生成四档，比手抄四个 hex 更可控。
• 用 RGB / rgba()：需要参与数值计算时——Canvas、ImageData、遮罩层、把两个颜色按比例混合，这些场景里 HSL 反而要多绕一次转换。
• 别用 HSV：CSS 没有内置的 HSV 支持，浏览器里写 hsv() 会被忽略或需要自己实现。要用就在构建期换算成 HEX 写死。

实操五步：设计稿取值到 CSS 变量，中间别再换格式

1. 在设计稿里取 sRGB 数值并记下六位 HEX，这是唯一真源；不要从色轮上另抄一份 HSV 值，两边对不上时以 HEX 为准。
2. 用转换工具核对一遍 HSL 数值是否符合预期，重点看 S：接近纯色的值 S 会很高（#4f8cff 是 100%），看着刺眼是正常的。
3. 在样式表里为每个色定义一个变量，变量值一律写 HEX；需要深浅阶梯时用 color-mix() 或直接定义 --color-primary-600 这样的多档变量，不用运行时换算。
4. 需要透明度时用 rgb(var(--rgb-primary) / 50%) 这类写法——把通道拆成变量，alpha 单独写，避免存 8 位 hex 的 alpha 段被工具截断。
5. 改完跑一次对比度检测，确认派生出来的每一档在它实际要用的背景上都达标；派生色阶常见的问题是中间档刚好卡在 4.5 之下。

alpha 的三种写法：别把 0–1 和 0–100 混着填

CSS 的 hsla() 与 rgba() 里 alpha 取 0 到 1，SVG 的 fill-opacity 取 0 到 1，HSL 字符串用逗号写法（hsl(219,100%,65%,.5)）与空格写法（hsl(219 100% 65% / .5)）都合法，后者可读性更好且不受旧浏览器解析歧义影响。8 位 hex（#RRGGBBAA）看着方便，实际有两个坑：一是把 alpha 误当成百分比填（比如 #4f8cff32 以为是 32%），二是老工具链与部分设计软件导出时不认这种写法。写法统一比选哪种更重要——一个项目里只用一种。

常见问题