颜色格式详解：HEX、RGB、HSL 转换指南

屏幕上的每个像素都由数字定义。但同一种颜色可以用多种格式表示——HEX、RGB、HSL、HSB 等。了解这些格式以及何时使用每种格式，能让你成为更高效的开发者和设计师。

颜色模型

RGB（红、绿、蓝）

RGB 是一种加色颜色模型，基于屏幕的工作原理。每个像素是不同强度的红、绿、蓝光的组合。

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

每个通道的范围从 0（无）到 255（最大强度）：

rgb(0, 0, 0) = 黑色（无光）
rgb(255, 255, 255) = 白色（全光）
rgb(255, 0, 0) = 纯红色

使用场景：编程颜色操作、Canvas 操作、图像处理。RGB 直接映射到硬件，计算直观。

HEX（十六进制）

HEX 只是用十六进制表示的 RGB。每对字符代表一个通道（00-FF）：

color: #3B82F6;   /* 与 rgb(59, 130, 246) 相同的蓝色 */
color: #3B82F680; /* 带 50% 透明度（8 位十六进制） */

转换是直接的：3B = 59，82 = 130，F6 = 246。

缩写形式：当每对数字相同时可以缩写：#AABBCC → #ABC

使用场景：CSS 样式表（最常见格式）、设计交付、品牌指南。HEX 紧凑且被普遍理解。

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

HSL 按照人类的感知方式表示颜色。不是混合光通道，而是通过颜色的属性来描述：

色相：色轮上的颜色角度（0-360°）。0° = 红色，120° = 绿色，240° = 蓝色
饱和度：颜色的鲜艳程度（0% = 灰色，100% = 全色）
亮度：颜色的明亮程度（0% = 黑色，50% = 纯色，100% = 白色）

color: hsl(217, 91%, 60%);       /* 同样的蓝色 */
color: hsla(217, 91%, 60%, 0.5); /* 带透明度 */

使用场景：创建调色板、编程调整颜色（如通过调整亮度创建悬停状态）、无障碍颜色设计。HSL 是人类推理颜色时最直觉的格式。

HSB/HSV（色相、饱和度、明度/值）

HSB 与 HSL 类似，但对明度的定义不同。在最大明度时，你得到纯色；在最小值时，得到黑色。这个模型被 Figma、Sketch 和 Photoshop 等设计工具使用。

与 HSL 的关键区别：在 HSL 中，亮度 50% 给出纯色。在 HSB 中，明度 100% 给出纯色。这使得 HSB 在某些任务中更直觉，但在 CSS 中不太实用（CSS 不原生支持 HSB）。

格式之间的转换

格式之间的转换涉及简单的数学运算。以下是主要关系：

HEX 转 RGB

将十六进制字符串分成对，并将每对转换为十进制：

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

RGB 转 HSL

算法将 RGB 值归一化到 0-1，找到最大和最小通道，然后根据哪个通道占主导计算色相，从范围计算饱和度，从平均值计算亮度。

与其手动实现这些转换，不如使用我们的颜色转换器在任何格式之间即时转换。

实际应用

使用 HSL 构建调色板

HSL 擅长生成一致的调色板。保持色相不变，改变饱和度和亮度：

:root {
  --blue-100: hsl(217, 91%, 95%);  /* 最浅 */
  --blue-200: hsl(217, 91%, 85%);
  --blue-300: hsl(217, 91%, 75%);
  --blue-400: hsl(217, 91%, 65%);
  --blue-500: hsl(217, 91%, 60%);  /* 基础色 */
  --blue-600: hsl(217, 91%, 50%);
  --blue-700: hsl(217, 91%, 40%);
  --blue-800: hsl(217, 91%, 30%);
  --blue-900: hsl(217, 91%, 20%);  /* 最深 */
}

这种方法保证了感知上一致的渐变。手动创建完整调色板？我们的调色板生成器可以自动化这个过程。

悬停和聚焦状态

使用 HSL，创建交互状态非常简单：

.button {
  background: hsl(217, 91%, 60%);
}
.button:hover {
  background: hsl(217, 91%, 55%); /* 深 5% */
}
.button:active {
  background: hsl(217, 91%, 50%); /* 深 10% */
}

无障碍性和对比度

WCAG 2.1 要求正常文本的最低对比度为 4.5:1，大文本为 3:1。HSL 中的亮度分量为你提供了一种直觉的方式来确保足够的对比度：

浅色背景（亮度 > 90%）适合搭配深色文本（亮度 < 30%）
深色背景（亮度 < 20%）适合搭配浅色文本（亮度 > 80%）

现代 CSS 颜色函数

CSS 现在支持强大的颜色操作函数：

/* 相对颜色语法（CSS Color Level 4） */
.element {
  --base: hsl(217 91% 60%);
  background: hsl(from var(--base) h s calc(l - 10%));
}

/* oklch - 感知均匀色彩空间 */
color: oklch(0.7 0.15 250);

oklch 格式正在被越来越多地采用，因为它是感知均匀的——相等的数值变化产生相等的感知变化，不像 HSL 中 10% 的亮度变化在不同色相值时看起来不同。

常见问题

在 CSS 中应该使用哪种颜色格式？

对于大多数项目，简单颜色使用 HEX，需要创建变体或编程操作颜色时使用 HSL。HEX 是最紧凑且被广泛认可的格式。HSL 在构建颜色系统时更具可读性。现代 CSS 支持所有格式互换使用。

HSL 和 HSB 有什么区别？

HSL 和 HSB 都使用色相和饱和度，但它们对明度的定义不同。在 HSL 中，亮度 0% 是黑色，50% 是纯色，100% 是白色。在 HSB 中，明度 0% 是黑色，100% 是纯色（仅通过明度无法到达白色）。CSS 原生支持 HSL；HSB 主要用于 Figma 和 Photoshop 等设计工具。