HEX vs RGB vs HSL：为你的项目选择正确的颜色格式

Web 开发中的颜色代码

你在网页上看到的每一种颜色都由代码表示。理解这些代码对 Web 开发者和设计师来说至关重要，不仅仅是为了编写 CSS，还用于与设计师沟通、调试布局问题以及构建无障碍界面。

日常工作中会遇到三种主要的颜色格式：HEX、RGB 和 HSL。每种格式都有其优缺点，了解何时使用哪一种会让你的工作明显更轻松。

HEX 颜色

HEX（十六进制）是 Web 上最常见的颜色格式。它从 HTML 早期就存在了，你会在 CSS 文件、Figma 和 Sketch 等设计工具以及品牌指南中随处可见。

格式：#RRGGBB

• 每对代表红、绿、蓝（0-255）
• 值范围从 00（0）到 FF（255）
• # 前缀告诉浏览器这是一个 HEX 颜色

示例

• #FF0000 = 纯红色
• #00FF00 = 纯绿色
• #0000FF = 纯蓝色
• #FFFFFF = 白色
• #000000 = 黑色

简写

当每对数字相同时，可以简写：#FF6633 → #F63

因为浏览器通过重复每个数字来展开：#F63 变成 #FF6633。但 #F37A21 不能简写，因为每对中的数字不同。

带透明度的 HEX

现代浏览器支持 8 位 HEX 代码，最后两位控制不透明度：

color: #3B82F680;  /* 50% 不透明度的蓝色 */

十六进制的 alpha 值 80 等于十进制的 128，约为最大值 255 的 50%。常用的 alpha 值：

• FF = 100%（完全不透明）
• BF = 75%
• 80 = 50%
• 40 = 25%
• 00 = 0%（完全透明）

RGB 颜色

RGB 代表红（Red）、绿（Green）、蓝（Blue）。它为每个通道使用十进制数字（0-255），很多人觉得比十六进制更直观。

格式：rgb(red, green, blue)

color: rgb(59, 130, 246);    /* 蓝色 */
color: rgba(59, 130, 246, 0.5);  /* 50% 透明的蓝色 */

现代 RGB 语法

CSS 有一种新语法，用带可选 alpha 的 rgb() 代替 rgba()：

/* 现代语法 -- 在所有现代浏览器中有效 */
color: rgb(59 130 246);           /* 无逗号 */
color: rgb(59 130 246 / 0.5);    /* 用斜杠表示 alpha */
color: rgb(59 130 246 / 50%);    /* alpha 用百分比 */

这种更简洁的语法在所有现代浏览器中完全受支持，如果你不需要兼容旧系统，值得采用。

RGB 的用途

当你需要以编程方式操作颜色时，RGB 非常出色。由于每个通道都是 0 到 255 的普通数字，在 JavaScript 或任何编程语言中调整颜色都很方便：

// 通过增加所有通道来使颜色变亮
function lighten(r, g, b, amount) {
  return [
    Math.min(255, r + amount),
    Math.min(255, g + amount),
    Math.min(255, b + amount)
  ];
}

RGB 也是大多数颜色选择器 API 和图像处理库的原生格式，可以避免转换开销。

HSL 颜色

HSL 代表色相（Hue）、饱和度（Saturation）、亮度（Lightness）。它对人类来说更直观，因为它与我们实际思考颜色的方式非常接近。

格式：hsl(hue, saturation%, lightness%)

• 色相：0-360（色轮上的位置）
  • 0/360 = 红色
  • 120 = 绿色
  • 240 = 蓝色
• 饱和度：0-100%（灰色到鲜艳）
  • 0% = 完全去饱和（灰色）
  • 100% = 完全饱和（鲜艳的颜色）
• 亮度：0-100%（黑色到白色）
  • 0% = 纯黑色
  • 50% = 纯色
  • 100% = 纯白色

color: hsl(217, 91%, 60%);   /* 蓝色 */
color: hsl(0, 100%, 50%);    /* 红色 */
color: hsl(120, 100%, 50%);  /* 绿色 */

为什么 HSL 能改变设计系统的游戏规则

当你需要创建颜色变体时，HSL 的真正威力就显现出来了。假设你的主品牌颜色是 hsl(217, 91%, 60%)，构建完整的色阶调色板非常简单：

:root {
  --blue-50:  hsl(217, 91%, 97%);   /* 近白色 */
  --blue-100: hsl(217, 91%, 93%);
  --blue-200: hsl(217, 91%, 84%);
  --blue-300: hsl(217, 91%, 72%);
  --blue-400: hsl(217, 91%, 60%);   /* 基础颜色 */
  --blue-500: hsl(217, 91%, 50%);
  --blue-600: hsl(217, 91%, 40%);
  --blue-700: hsl(217, 91%, 30%);
  --blue-800: hsl(217, 91%, 20%);
  --blue-900: hsl(217, 91%, 10%);   /* 近黑色 */
}

保持相同的色相和饱和度，只调整亮度。结果是一组看起来浑然一体的和谐色调。用 HEX 代码来做这件事，你就需要计算器或设计工具了。

使用 HSL 创建色彩和声

由于色相是色轮上的位置（0-360 度），创建色彩和声只是算术：

• 互补色：色相加 180（hsl(217, 91%, 60%) → hsl(37, 91%, 60%)）
• 三角色：加 120 和 240（hsl(217, ...)、hsl(337, ...)、hsl(97, ...)）
• 类似色：加减 30（hsl(187, ...)、hsl(217, ...)、hsl(247, ...)）

这也是许多设计系统和 CSS 框架在内部使用 HSL 的原因之一。

带透明度的 HSL

与 RGB 一样，HSL 也支持透明度：

color: hsl(217, 91%, 60%, 0.5);      /* 旧语法 */
color: hsl(217 91% 60% / 50%);       /* 现代语法 */

CSS 命名颜色

CSS 还包括 147 种命名颜色，如 red、steelblue、papayawhip 和 rebeccapurple。它们对于原型设计或快速演示很方便，但在生产代码中很少见到，原因是：

• 它们不灵活（无法轻松调整亮度或不透明度）
• 名称可能会产生误导（darkgray 实际上比 gray 更亮）
• 你的品牌颜色永远不会与命名颜色完全匹配

话虽如此，transparent 和 currentColor 是两个真正有用的命名值。currentColor 继承当前的文字颜色，对于应该与周围文本匹配的 SVG 图标和边框非常方便。

何时使用各种格式

格式	最适合
HEX	快速内联颜色、大部分 CSS、品牌指南
RGB/RGBA	程序化颜色操作、canvas 工作
HSL/HSLA	设计系统、创建色阶调色板、主题化

实用建议：对于新项目，默认使用 HSL。将主题颜色定义为 HSL 自定义属性，只需调整亮度值就能轻松切换明暗模式。从设计工具粘贴颜色时，HEX 没问题，只需为变量转换为 HSL 即可。

颜色转换公式

HEX 转 RGB

将 6 位十六进制字符串分成三对，将每对从十六进制转换为十进制：

#3B82F6 → 3B = 59, 82 = 130, F6 = 246 → rgb(59, 130, 246)

RGB 转 HSL

这个转换涉及更多数学。大致步骤：

1. 将 R、G、B 归一化到 0-1 范围（除以 255）
2. 找出最大值和最小值
3. 亮度 = (最大 + 最小) / 2
4. 如果最大等于最小，饱和度为 0（灰色）
5. 否则，根据亮度计算饱和度
6. 根据哪个通道是最大值计算色相

你不需要记住这些，用工具就好。但理解这种关系有助于你调试颜色问题。

常见的颜色错误及如何避免

1. 忽视对比度

WCAG 2.1 要求普通文本的最低对比度为 4.5:1，大文本为 3:1。那种浅灰色文字在白色背景上的设计在模型中可能看起来很优雅，但它不符合无障碍标准，在强烈阳光下或廉价显示器上真的很难阅读。

2. 在纯白色上使用纯黑色

#000000 在 #FFFFFF 上产生最大对比度（21:1），长时间阅读可能会导致眼睛疲劳。许多设计系统使用稍微柔和的组合，如 #1a1a1a 在 #FAFAFA 上，仍然通过 WCAG AAA，同时对眼睛更友好。

3. 不在上下文中测试颜色

一个作为小色块看起来很棒的颜色，应用到大面积背景区域时可能会令人窒息。始终在实际比例下测试你的颜色，在提交之前用背景色填满整个屏幕，并在上面放置真实文字。

4. 使用太多颜色

初学者常犯的错误是使用太多不同的颜色。大多数专业网站坚持使用 2-3 种主色加上中性调色板（灰色）。如果你发现自己要使用第六或第七种不同的色相，退一步，简化一下。

5. 仅靠颜色传递信息

永远不要仅靠颜色来传达信息。如果错误信息只用红色文字标记，色盲用户（约 8% 的男性）就会错过它们。始终将颜色与图标、图案或文字标签配合使用。

实际颜色工作流程

这是一个适用于大多数 Web 项目的实用工作流程：

1. 选择主色相（例如 hsl(217, 91%, 60%)）
2. 通过将亮度从 5% 变化到 97% 来生成色阶比例
3. 选择带有主色相提示的中性灰色（例如 hsl(217, 10%, 50%)）
4. 用同样的方式生成灰色色阶
5. 谨慎添加强调色——一个用于成功（绿色），一个用于错误（红色），一个用于警告（琥珀色）
6. 检查每个文本/背景组合的对比度
7. 将所有内容定义为 CSS 自定义属性，这样切换主题就很轻松

:root {
  --primary: hsl(217, 91%, 60%);
  --primary-light: hsl(217, 91%, 93%);
  --primary-dark: hsl(217, 91%, 35%);
  --text: hsl(217, 15%, 15%);
  --text-muted: hsl(217, 10%, 45%);
  --surface: hsl(217, 20%, 98%);
  --error: hsl(0, 72%, 51%);
  --success: hsl(142, 71%, 45%);
}

尝试调整下面的颜色，看看同一种颜色在 HEX、RGB 和 HSL 格式中是如何表示的：

立即转换颜色

使用我们的颜色选择器和转换器即时在 HEX、RGB、HSL 和 RGBA 之间转换。也可以使用我们的颜色对比度检查器检查对比度。