HEX vs RGB vs HSL：颜色格式完全对比

← 返回博客

HEX vs RGB vs HSL：颜色格式完全对比

· 6 分钟阅读

三种颜色格式概览

在 CSS 和数字设计中，HEX、RGB 和 HSL 是三种最主流的颜色表示格式。它们都能精确描述同一种颜色，只是表示方式不同。选择哪种格式取决于使用场景、可读性需求和工作流偏好。

/* All three represent the same orange-red color */
color: #FF5733;
color: rgb(255, 87, 51);
color: hsl(11, 100%, 60%);

HEX 格式详解

HEX（十六进制）格式用 6 位十六进制字符表示颜色，格式为 #RRGGBB。它是网页设计中历史最悠久的颜色格式，几乎所有设计工具默认使用 HEX 值。

**优势：**简洁、无空格、易复制、与设计工具输出直接对应、广泛支持（包括旧版浏览器）。**劣势：**对人类不直观，很难通过读取代码判断颜色的色调、亮度或饱和度，也难以手动调整。

RGB 格式详解

RGB 格式直接表示红（R）、绿（G）、蓝（B）三个通道，每个值从 0 到 255。格式为 rgb(R, G, B)。RGBA 变体添加了 Alpha 透明度通道：rgba(R, G, B, A)，Alpha 值从 0（全透明）到 1（全不透明）。

**优势：**比 HEX 更易读，可以直观地增减某个颜色通道，RGBA 支持透明度，在编程中进行颜色插值运算时非常方便。**劣势：**不直观反映色调关系，修改亮度或饱和度需要同时调整三个值。

HSL 格式详解

HSL 代表色调（Hue）、饱和度（Saturation）和亮度（Lightness）。色调是 0–360 度的角度值，对应色轮上的颜色；饱和度是 0–100% 的百分比，表示颜色的鲜艳程度；亮度是 0–100% 的百分比，0% 为黑色，100% 为白色，50% 为纯色。

/* HSL examples */
hsl(0, 100%, 50%)    /* Pure red */
hsl(120, 100%, 50%)  /* Pure green */
hsl(240, 100%, 50%)  /* Pure blue */
hsl(0, 0%, 50%)      /* Middle gray */
hsl(11, 100%, 60%)   /* Orange-red */

**优势：**对人类最直观，可以直接理解并手动调整色调、饱和度和亮度；创建颜色变体（如一组相同色调但不同亮度的颜色）非常简单；在设计系统中定义颜色层级时特别有用。**劣势：**浏览器支持相对较新，与设计工具的对接不如 HEX 直接。

何时使用哪种格式

• **HEX：**在复制设计工具颜色值、与他人共享颜色时优先使用。简洁是其最大优势。
• **RGB / RGBA：**在需要透明度时使用，或在 JavaScript 中进行颜色数学运算时使用。
• **HSL / HSLA：**在构建设计系统、定义颜色主题、创建颜色变体时优先使用。CSS 变量配合 HSL 非常强大。

/* Design system with HSL */
:root {
  --brand-hue: 220;
  --brand-primary: hsl(var(--brand-hue), 80%, 50%);
  --brand-light:   hsl(var(--brand-hue), 80%, 70%);
  --brand-dark:    hsl(var(--brand-hue), 80%, 30%);
}

现代 CSS 的颜色新格式

CSS Color Level 4 和 Level 5 规范引入了更多颜色格式，包括 oklch()、oklab()、display-p3 等。这些格式提供了更广的色域和更均匀的感知色彩空间，但目前仍在被各浏览器逐步支持中。对于大多数项目，HSL 和 RGB 仍是最实用的选择。

格式对比总结

• **可读性：**HSL > RGB > HEX
• **简洁性：**HEX > RGB > HSL
• **透明度支持：**RGBA / HSLA（原生），HEX 需 8 位
• **设计工具兼容：**HEX 最普遍，RGB 次之
• **程序化操作：**HSL 最佳（色彩理论直接对应），RGB 次之

立即尝试在线工具，无需安装，免费使用。

打开工具 →