颜色代码指南：HEX、RGB、HSL 详解

2026年3月31日 · 12分钟阅读

颜色格式简介

颜色构成了网页设计中视觉传达的基础，开发者可以使用多种格式来精确定义它们。三种主要的颜色模型——HEX、RGB 和 HSL——根据您的工作流程和需求，各自提供了独特的优势。

理解这些格式不仅仅是简单的颜色选择。它使您能够创建连贯的设计系统、实现动态主题、确保无障碍性合规，并与设计师和利益相关者有效沟通。每种格式表示相同的颜色，但从不同的角度来定义颜色。

HEX 代码提供紧凑、便携的颜色值，非常适合静态设计。RGB 反映了屏幕通过光发射物理显示颜色的方式。HSL 与人类感知相一致，使调整和变化变得直观。掌握所有三种格式使您能够灵活地为每种情况选择合适的工具。

理解 HEX 颜色代码

什么是 HEX 代码？

HEX 颜色代码使用十六进制表示法表示颜色，这是一种使用数字 0-9 和字母 A-F 的十六进制数字系统。每个 HEX 代码以井号（#）开头，后跟六个字符，定义颜色的红色、绿色和蓝色分量。

六字符格式分为三对：前两个字符表示红色强度，中间两个表示绿色，最后两个表示蓝色。每对的范围可以从 00（无强度）到 FF（最大强度），每个通道有 256 个可能的值，总共超过 1600 万种颜色组合。

HEX 颜色如何工作

让我们剖析一个实际例子来理解其机制。考虑颜色 #3A9D23：

• 3A（红色通道）= 十进制 58
• 9D（绿色通道）= 十进制 157
• 23（蓝色通道）= 十进制 35

这种组合产生了一种柔和的土绿色，因为绿色通道占主导地位，而红色和蓝色保持相对较低。十六进制系统最初可能看起来很神秘，但它在以紧凑形式表示大数字方面非常高效。

要在十六进制和十进制之间快速转换，请记住这些关键值：00 = 0，80 = 128，FF = 255。常见颜色如纯红色（#FF0000）、纯绿色（#00FF00）和纯蓝色（#0000FF）展示了单个通道的最大强度。

HEX 简写表示法

当 HEX 代码中的每对字符相同时，您可以使用仅三个字符的简写表示法。例如，#FFFFFF 变成 #FFF，#336699 变成 #369。浏览器会自动通过加倍每个字符来扩展这些简写代码。

这种简写对于常见颜色特别有用，并减少了样式表中的文件大小。但是，并非所有颜色都可以用简写表示——只有那些每个 RGB 对由相同数字组成的颜色才可以。

HEX 代码的实际应用

HEX 代码在 CSS 中非常适合在设计系统中定义静态颜色。以下是您通常如何实现它们：

.primary-button {
  background-color: #38bdf8;
  color: #ffffff;
  border: 2px solid #0284c7;
}

.success-message {
  background-color: #dcfce7;
  color: #166534;
  border-left: 4px solid #22c55e;
}

HEX 代码也是设计交接的标准格式。当设计师从 Figma 或 Adobe XD 等工具共享颜色规范时，他们通常提供 HEX 值，因为它们被普遍认可并且易于复制粘贴到代码中。

解读 RGB 颜色代码

RGB 颜色模型

RGB 代表红色、绿色、蓝色——屏幕用来显示您看到的每种颜色的三种原色光。与基于颜料的颜色混合（减色）不同，RGB 使用加色混合，其中将所有三个通道以全强度组合会产生白光。

RGB 模型直接对应于数字显示器的工作方式。每个像素包含三个子像素（红色、绿色和蓝色 LED 或滤光片），以不同的强度发光。通过控制这三个通道，显示器可以再现数百万种不同的颜色。

RGB 语法和值

在 CSS 中，RGB 颜色使用 rgb() 函数，带有三个逗号分隔的值，每个值的范围从 0 到 255。语法简单明了且易于阅读：

/* 明亮的橙色 */
color: rgb(255, 87, 51);

/* 柔和的紫色 */
background-color: rgb(147, 112, 219);

/* 深灰色 */
border-color: rgb(45, 45, 45);

每个值表示该颜色通道的强度。零表示通道关闭，而 255 表示它处于最大亮度。对于许多开发者来说，这种十进制表示法比十六进制更直观，特别是在进行增量调整时。

何时使用 RGB

RGB 在需要以编程方式操作颜色值的场景中表现出色。JavaScript 可以轻松处理 RGB 值以进行动态颜色生成、动画和交互效果：

// 生成随机颜色
function randomColor() {
  const r = Math.floor(Math.random() * 256);
  const g = Math.floor(Math.random() * 256);
  const b = Math.floor(Math.random() * 256);
  return `rgb(${r}, ${g}, ${b})`;
}

// 通过减少所有通道使颜色变暗
function darken(r, g, b, amount) {
  return `rgb(${r - amount}, ${g - amount}, ${b - amount})`;
}

RGB 在处理图像处理、画布操作或从像素中提取颜色数据的任何情况下也更可取。该格式与图像数据在内存中的存储和操作方式完美对齐。

RGB 与 HEX：选择正确的格式

RGB 和 HEX 表示完全相同的颜色——它们只是相同基础值的不同表示法。它们之间的选择通常取决于上下文和个人偏好：

探索 HSL 颜色代码

理解 HSL 模型

HSL 代表色相、饱和度和亮度——一种更接近人类自然感知和描述颜色方式的颜色模型。HSL 不是混合光通道，而是根据颜色在色轮上的位置、其鲜艳度和亮度来描述颜色。

这个模型对于创建颜色变化和保持视觉和谐特别强大。当您需要创建颜色的较浅或较深版本，或调整其强度时，HSL 使这些操作变得直观和可预测。

分解 HSL 组件

色相表示颜色类型，以 0 到 360 度测量，对应于色轮上的位置。红色位于 0°（和 360°），绿色位于 120°，蓝色位于 240°。所有其他颜色都落在这些主要位置之间的某个地方。

饱和度控制颜色强度，以 0% 到 100% 的百分比表示。在 0% 时，颜色变得完全灰色（去饱和）。在 100% 时，您获得该色相最纯净、最鲜艳的版本。中等范围的值产生柔和、精致的色调。

亮度决定颜色看起来有多亮或多暗，也是 0% 到 100% 的百分比。在 0% 时，任何颜色都变成纯黑色。在 100% 时，任何颜色都变成纯白色。"真实"颜色出现在 50% 亮度时。

CSS 中的 HSL 语法

CSS hsl() 函数接受三个值：色相（度数）、饱和度（百分比）和亮度（百分比）：

/* 鲜艳的蓝色 */
color: hsl(210, 100%, 50%);

/* 柔和的青色 */
background-color: hsl(180, 40%, 60%);

/* 深红色 */
border-color: hsl(0, 70%, 30%);

现代 CSS 还支持不带逗号的空格分隔语法：hsl(210 100% 50%)。两种格式的工作方式相同，尽管逗号分隔版本在较旧的环境中具有更广泛的浏览器支持。

为什么 HSL 在设计系统中表现出色

HSL 的真正力量在构建可扩展的颜色系统时显现出来。创建颜色变化变得非常简单，因为您可以调整单个组件，同时保持其他组件不变：

:root {
  /* 基础品牌颜色 */
  --brand-hue: 210;
  --brand-saturation: 100%;
  
  /* 使用一致的色相和饱和度的颜色比例 */
  --brand-50: hsl(var(--brand-hue), var(--brand-saturation), 95%);
  --brand-100: hsl(var(--brand-hue), var(--brand-saturation), 90%);
  --brand-200: hsl(var(--brand-hue), var(--brand-saturation), 80%);
  --brand-500: hsl(var(--brand-hue), var(--brand-saturation), 50%);
  --brand-900: hsl(var(--brand-hue), var(--brand-saturation), 20%);
}

这种方法确保所有颜色变化保持完美和谐，因为它们共享相同的色相和饱和度。您只是在调整亮度，这会自动创建一个连贯的视觉系统。

HSL 的实际应用

HSL 在几个现实世界场景中表现出色，这些场景使用 HEX 或 RGB 会很麻烦：

• 悬停状态：通过将亮度降低 10-15% 使按钮变暗
• 禁用状态：通过将饱和度设置为 20-30% 使元素去饱和
• 颜色和谐：通过在色相上加 180° 创建互补色
• 类似配色方案：通过调整色相 ±30° 生成相关颜色
• 色调和阴影：增加亮度以获得色调，减少以获得阴影

以下是使用 HSL 生成完整按钮状态系统的实际示例：

.button {
  background-color: hsl(210, 100%, 50%);
}

.button:hover {
  /* 通过降低亮度使其变暗 */
  background-color: hsl(210, 100%, 40%);
}

.button:active {
  /* 为按下状态进一步变暗 */
  background-color: hsl(210, 100%, 35%);
}

.button:disabled {
  /* 去饱和并变亮 */
  background-color: hsl(210, 30%, 70%);
}

颜色格式之间的转换

为什么转换很重要

不同的工具、框架和工作流程偏好不同的颜色格式。设计师可能提供 HEX 代码，但您需要 HSL 来创建变化。API 可能返回您需要以 HEX 显示的 RGB 值。理解转换可以实现无缝的工作流程集成。

转换还可以帮助您利用每种格式的优势。您可能从设计师那里收到 HEX 代码，将其转换为 HSL 以生成颜色比例，然后转换回 HEX 用于文档目的。

HEX 到 RGB 转换

转换