🎨
← 返回教程列表

HEX 与 RGB 与 HSL：你应该使用哪种颜色格式？

· 标签: hex-vs-rgb-vs-hsl, color-formats, css, web-development, color-converter

HEX 与 RGB 与 HSL：你应该使用哪种颜色格式？

CSS 提供了多种定义颜色的方式，但三种最常见的格式是 HEX、RGB 和 HSL。每种格式都有不同的优势，知道何时使用每种格式可以显著提高你的样式表可维护性和创建动态颜色系统的能力。本指南逐一解析每种格式，让你能在任何情况下做出正确的选择。

HEX 颜色格式：行业标准

HEX（十六进制）颜色是 Web 设计中使用最广泛的格式。十六进制颜色写作 # 后跟六位十六进制数字，依次表示红、绿、蓝值。

#FF5733
  • #FF — 红（十进制 255）
  • #57 — 绿（十进制 87）
  • #33 — 蓝（十进制 51）

HEX 变体

HEX 支持多种满足不同需求的记号：

/* 标准六位十六进制 */
color: #FF5733;

/* 简写——相同的一对数字合并为三位 */
color: #F53; /* 扩展为 #FF5533 */

/* 带 alpha 通道的八位十六进制 */
color: #FF573380; /* 50% 不透明度 */

简写 HEX 在每一对使用相同字符时有效：#AABBCC 变成 #ABC。这纯粹是一种节省空间的约定，所有浏览器都支持。

八位 HEX（#RRGGBBAA）增加了 alpha 透明度。alpha 值范围从 00（完全透明）到 FF（完全不透明）。八位 hex 在所有现代浏览器中的支持都非常出色。

四位简写（#RGBA）也存在：#F538 扩展为 #FF553388。

何时使用 HEX

  • 从设计工具复制粘贴 — Figma、Sketch 和 Adobe XD 默认都输出 hex
  • 硬编码的品牌色 — Hex 对于永不改变的值是明确且紧凑的
  • 文档和原型 — Hex 是设计师和开发者中最易识别的格式
  • CSS 自定义属性 — 以 hex 存储品牌 token 是常见做法

何时避免使用 HEX

  • 程序化颜色操作 — 调整单个通道需要字符串解析
  • 创建颜色系统 — 生成更浅或更深的变体涉及复杂的数学
  • 传达颜色意图 — Hex 不提供关于颜色的任何语义信息

RGB 颜色格式：通道控制

RGB 代表红、绿、蓝。在 CSS 中，它写作一个函数，值为 0 到 255 或百分比（0% 到 100%）。

/* 旧版逗号分隔语法 */
color: rgb(255, 87, 51);
color: rgba(255, 87, 51, 0.5);

/* 现代空格分隔语法 */
color: rgb(255 87 51);
color: rgb(255 87 51 / 0.5);

/* 百分比值 */
color: rgb(100% 34% 20%);

现代 RGB 语法的改进

CSS Color Level 4 规范以两种重要方式现代化了 rgb() 函数：

  1. 空格分隔的值 — 不再需要逗号，使语法更简洁
  2. 斜杠分隔的 alpha — 不再需要 rgba() 别名；rgb() 现在接受可选的 alpha 通道

旧版和现代语法都得到完全支持，但新代码推荐使用现代语法。

何时使用 RGB

  • Canvas 和 WebGL — 图像数据 API 以 RGB 返回像素值
  • 数值颜色调整 — 当红、绿、蓝值存储为独立变量时
  • 从设计规范转换 — 一些设计系统将颜色指定为 RGB 三元组
  • 使用颜色选择器 — 许多颜色选择器 UI 使用 0-255 滑块

何时避免使用 RGB

  • 创建协调的调色板 — 独立调整全部三个通道使一致调整变得困难
  • 人类可读性 — rgb(123, 45, 67) 无法让人立即感知它所代表的颜色

HSL 颜色格式：对用户友好的颜色

HSL 代表色相、饱和度和明度。这种格式对人类更直观，因为它把颜色本身（色相）与它的强度（饱和度）和亮度（明度）分离开来。

/* 旧版语法 */
color: hsl(12, 100%, 60%);
color: hsla(12, 100%, 60%, 0.5);

/* 现代语法 */
color: hsl(12 100% 60%);
color: hsl(12 100% 60% / 0.5);

理解 HSL 通道

色相（0-360） — 色轮上的颜色角度。这是"这是什么颜色"的组成部分：

| 色相值 | 颜色 | |-----------|---------| | 0 或 360 | 红 | | 30 | 橙 | | 60 | 黄 | | 120 | 绿 | | 180 | 青 | | 240 | 蓝 | | 300 | 品红 |

饱和度（0-100%） — 颜色的强度或鲜艳程度。0% 产生灰色调；100% 是该色相最纯粹的形式。

明度（0-100%） — 颜色的明暗程度。0% 总是黑色，50% 是该色相的"正常"形式，100% 总是白色。

为什么 HSL 更适合颜色系统

HSL 让在 HEX 或 RGB 中困难的任务变得非常简单：

/* 主要品牌色 */
--brand: hsl(220, 80%, 50%);

/* 悬停状态——稍微更亮 */
--brand-hover: hsl(220, 80%, 60%);

/* 激活状态——稍微更暗 */
--brand-active: hsl(220, 80%, 40%);

/* 禁用状态——去饱和 */
--brand-disabled: hsl(220, 30%, 70%);

/* 背景色调——非常浅 */
--brand-bg: hsl(220, 40%, 95%);

使用 HSL，每个变体都是单变量的变化。 这在 HEX 中是不可能的，在 RGB 中也很笨拙。

何时使用 HSL

  • 创建调色板 — HSL 是设计 token 生成的事实标准
  • 主题和深色模式 — 交换明度值来创建深色模式变体
  • 悬停和焦点状态 — 按固定百分比调整明度
  • 无障碍调整 — 在不改变颜色的情况下提高明度对比度
  • 交互式颜色选择器 — HSL 滑块比 RGB 滑块更直观

快速对比表

| 特性 | HEX | RGB | HSL | |---------|-----|-----|-----| | 像素级可读性 | 差 | 中等 | 好 | | 通道语义 | 不透明 | 数值 | 感知 | | 程序化调整 | 困难 | 中等 | 容易 | | Alpha 透明度 | 8 位 hex | rgb(R G B / A) | hsl(H S% L% / A) | | 浏览器支持 | 出色 | 出色 | 出色 | | 现代语法 | 无 | 有 | 有 | | 设计工具默认 | 有 | 常见 | 罕见 | | 颜色系统适用性 | 差 | 尚可 | 出色 |

浏览器支持：三者都是安全的

HEX、RGB 和 HSL 享有相同的浏览器支持。三者都在自 Internet Explorer 9 以来发布的每个浏览器中工作。现代空格分隔语法（rgb(255 0 0 / 0.5)）受 2020 年以来发布的所有浏览器支持。没有任何兼容性理由让你选择其中一个而不选另一个。

实用决策框架

根据你在做什么来选择格式：

  1. 在从设计原型中复制？ 使用 HEX——它是设计工具输出的格式。
  2. 在构建设计 token 系统？ 使用 HSL——它让调色板生成变得简单。
  3. 在使用 canvas 或图像数据？ 使用 RGB——像素 API 原生使用 RGB。
  4. 在编写一次性样式规则？ 使用 HEX——它是最紧凑的。
  5. 在创建动态颜色过渡？ 使用 HSL——插值色相能产生彩虹效果；插值 RGB 会产生浑浊的中间色。

在任意格式之间转换

使用我们的免费在线颜色转换器在 HEX、RGB、HSL 和其他 CSS 颜色格式之间即时转换。不再需要手动计算或翻找浏览器 DevTools。