🎨 颜色代码完全指南：HEX、RGB、HSL 详解与在线转换

2026-06-24 · 约 7 分钟

写前端的人每天都要跟颜色代码打交道。#3b82f6、rgb(59, 130, 246)、hsl(217, 91%, 60%)——它们本质上描述的是同一种蓝色，但各有各的使用场景和优势。

这篇文章帮你理清三种颜色格式的区别、各自的适用场景、互相转换的方法，以及一些实用的小技巧。

三种颜色格式速览

HEX（十六进制颜色）

HEX 颜色是最常见的前端颜色格式。它以 # 开头，接 6 位十六进制数，每两位代表 RGB 中的一个通道：

#RRGGBB
#3b82f6
  ↑↑ ↑↑ ↑↑
  R   G   B

每位十六进制数的范围是 00~FF（即 0~255）。所以 #3b82f6 等价于 rgb(59, 130, 246)——3b(hex) = 59(dec)，82 = 130，f6 = 246。

CSS 还支持简写形式：如果每两位重复，可以缩写成 3 位。例如 #3366ff 可写成 #36f。

HEX 带透明度

CSS 支持 8 位 HEX，最后两位代表透明度（alpha）。#3b82f680 就是 50% 透明度的蓝色。00=全透明，FF=完全不透明。

RGB（红绿蓝）

RGB 是最直观的颜色表示方式——用三个 0~255 的数字分别描述红、绿、蓝三个通道的强度：

rgb(255, 0, 0)    /* 纯红 */
rgb(0, 255, 0)    /* 纯绿 */
rgb(0, 0, 255)    /* 纯蓝 */
rgb(255, 255, 255) /* 白色 */
rgb(0, 0, 0)      /* 黑色 */

RGB 的最大优势是 rgba()，增加第四个参数控制透明度：

rgba(59, 130, 246, 0.5)  /* 50% 透明度的蓝色 */

HSL（色相、饱和度、明度）

HSL 是更"人性化"的颜色表示方式：

• H（色相 Hue）： 0°~360° 色环上的角度。0°=红、120°=绿、240°=蓝
• S（饱和度 Saturation）： 0%~100%。0%=灰色，100%=纯色
• L（明度 Lightness）： 0%~100%。0%=黑色，100%=白色，50%=正常

hsl(0, 100%, 50%)      /* 纯红 */
hsl(120, 100%, 50%)    /* 纯绿 */
hsl(217, 91%, 60%)     /* VersionMan 主题蓝 */

HSL 在以下场景非常好用：

• 主题切换： 白天/夜晚模式只需调低 L 值
• 调色板生成： 固定 H，变 S 和 L 就能生成一套渐变色
• 悬停效果： hover 时调 L 值比直接换颜色更协调

/* 只用 HSL 生成一整套主题色 */
:root {
  --primary-h: 217;
  --primary: hsl(var(--primary-h), 91%, 60%);
  --primary-dark: hsl(var(--primary-h), 91%, 45%);
  --primary-light: hsl(var(--primary-h), 91%, 80%);
  --primary-bg: hsl(var(--primary-h), 91%, 95%);
}

HEX、RGB、HSL 互相转换

HEX → RGB

function hexToRgb(hex) {
  const r = parseInt(hex.slice(1, 3), 16);
  const g = parseInt(hex.slice(3, 5), 16);
  const b = parseInt(hex.slice(5, 7), 16);
  return `rgb(${r}, ${g}, ${b})`;
}
hexToRgb('#3b82f6'); // "rgb(59, 130, 246)"

RGB → HEX

function rgbToHex(r, g, b) {
  return '#' + [r, g, b]
    .map(x => x.toString(16).padStart(2, '0'))
    .join('');
}
rgbToHex(59, 130, 246); // "#3b82f6"

RGB → HSL

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)) / 6; break;
      case g: h = ((b - r) / d + 2) / 6; break;
      case b: h = ((r - g) / d + 4) / 6; break;
    }
  }
  return `hsl(${(h * 360).toFixed(0)}, ${(s * 100).toFixed(1)}%, ${(l * 100).toFixed(1)}%)`;
}

实用技巧

• 用 HSL 做一键暗黑模式： 所有颜色写 HSL，夜间模式只调低 L 值，省心省力
• 记住常用的十六进制缩写： #000 = 黑色，#fff = 白色， #f00 = 红色，#0f0 = 绿色， #00f = 蓝色，#ff0 = 黄色
• 对比度检查： 用 HSL 算 L 值，前景和背景的 L 差 ≥ 0.5 通常就能通过 WCAG AA 标准
• 别记 HEX 值： 用 CSS 变量 + 命名，--primary 好过到处写 #3b82f6

常用颜色参考表

常见问题

Q: HEX 和 RGB 用哪个好？

纯静态颜色用 HEX，简洁。需要透明度用 rgba()。做主题系统强烈推荐 HSL，可读性和可操作性都最好。

Q: 8 位 HEX 安全吗？

所有现代浏览器都支持 8 位 HEX（带 alpha 通道）。但如果要兼容很老的项目，用 rgba() 更稳妥。

Q: 为什么我写的颜色跟设计稿不一样？

检查你的屏幕色域（sRGB vs P3 vs Adobe RGB），以及颜色格式——设计稿给的是 HEX 还是 HSL。同一个值在不同色域下显示效果不同。