C CalcKit
中文
HEX、RGB、HSL：网页设计颜色格式完全指南 | CalcKit Blog

HEX、RGB、HSL：网页设计颜色格式完全指南

by CalcKit
颜色网页设计CSS设计

如果你写过 CSS，你一定输入过颜色值。也许是像 #FF5733 这样的 HEX 代码，像 rgb(255, 87, 51) 这样的 RGB 值，或者像 hsl(9, 100%, 60%) 这样的 HSL 值。它们描述的是完全相同的颜色——但使用了截然不同的方式。

理解这些格式之间的区别不仅仅是学术知识。它影响你的工作效率、创建色彩系统的便捷程度，以及设计的可访问性。本指南涵盖网页设计中颜色格式你需要知道的一切。

三种主要颜色格式

HEX（十六进制）

HEX 是网页设计中最广泛使用的颜色格式。它将颜色表示为一个六字符的十六进制字符串，每对字符代表红、绿、蓝的强度。

格式： #RRGGBB

示例： #FF5733

  • FF = 红色（十进制 255）
  • 57 = 绿色（十进制 87）
  • 33 = 蓝色（十进制 51）

简写： 当每对中的两个字符相同时，可以缩写：

  • #FF5733 → 无法缩写
  • #3366FF → #36F
  • #AABBCC → #ABC

优点：

  • 紧凑，方便复制粘贴
  • 所有平台都支持
  • 大多数设计工具默认使用 HEX

缺点：

  • 不直观——光看 #8B4513 很难知道是什么颜色
  • 难以编程调整（变亮、变暗、改变色调）
  • 6 位格式没有内置透明度通道（虽然 8 位 HEX 存在）

RGB（红、绿、蓝）

RGB 将颜色表示为三个 0 到 255 的数值，分别代表每种原色的强度。

格式： rgb(red, green, blue)

示例： rgb(255, 87, 51) 等同于 #FF5733

RGBA（带透明度）： rgba(255, 87, 51, 0.5) — 第四个值是透明度，从 0（完全透明）到 1（完全不透明）

现代语法： CSS 现在支持 rgb(255 87 51 / 0.5)，用空格分隔值，透明度前加斜杠。

优点：

  • 比 HEX 更易读——可以看到各个通道的值
  • 原生支持透明度通道
  • 容易理解：0 = 关闭，255 = 最大强度

缺点：

  • 对颜色操作仍然不够直观
  • 改变一个值后难以预测结果
  • 比 HEX 更冗长

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

HSL 以符合人类感知的方式描述颜色：是什么颜色（色相）、有多鲜艳（饱和度）、有多亮（明度）。

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

  • 色相： 色环上 0–360 度（0 = 红色，120 = 绿色，240 = 蓝色）
  • 饱和度： 0%（灰色）到 100%（全彩）
  • 明度： 0%（黑色）到 100%（白色），50% = 纯色

示例： hsl(9, 100%, 60%) 等同于 #FF5733

HSLA（带透明度）： hsla(9, 100%, 60%, 0.5)

现代语法： hsl(9 100% 60% / 0.5)

优点：

  • 对人类最直观——可以推理颜色
  • 轻松创建变体：改变明度得到深浅色，改变饱和度调节鲜艳度
  • 非常适合构建色彩系统和调色板
  • 简单创建可访问的配色方案

缺点：

  • 设计工具输出中较少使用
  • 稍微更冗长
  • 在记住色环之前，色相值可能令人困惑

何时使用哪种格式

使用 HEX 的场景：

  • 从设计工具（Figma、Sketch 等）复制颜色
  • 编写一次性的颜色值
  • 使用已有 HEX 代码库
  • 需要最简洁的表示

使用 RGB 的场景：

  • 需要透明度
  • 使用 Canvas 或 WebGL API
  • 从图像读取像素数据
  • 需要编程操作单个颜色通道

使用 HSL 的场景：

  • 构建带色阶的设计系统
  • 从基础色创建悬停/激活/禁用状态
  • 实现暗色模式（调整明度）
  • 需要确保可访问的对比度
  • 编程生成颜色

实用 CSS 示例

用 HSL 构建色彩系统

:root {
  /* 品牌基础色相 */
  --hue-primary: 220;

  /* 从一个色相生成完整调色板 */
  --color-primary-50: hsl(var(--hue-primary), 100%, 97%);
  --color-primary-100: hsl(var(--hue-primary), 95%, 90%);
  --color-primary-200: hsl(var(--hue-primary), 90%, 80%);
  --color-primary-300: hsl(var(--hue-primary), 85%, 65%);
  --color-primary-400: hsl(var(--hue-primary), 80%, 55%);
  --color-primary-500: hsl(var(--hue-primary), 75%, 50%);
  --color-primary-600: hsl(var(--hue-primary), 80%, 40%);
  --color-primary-700: hsl(var(--hue-primary), 85%, 30%);
  --color-primary-800: hsl(var(--hue-primary), 90%, 20%);
  --color-primary-900: hsl(var(--hue-primary), 95%, 12%);
}

这种方法让你只需更新一个 --hue-primary 值就能改变整个品牌色。

交互式悬停状态

.button {
  background-color: hsl(200, 80%, 50%);
  transition: background-color 0.2s;
}

.button:hover {
  /* 悬停时稍暗——只需改变明度 */
  background-color: hsl(200, 80%, 40%);
}

.button:disabled {
  /* 禁用状态：降低饱和度、提高明度 */
  background-color: hsl(200, 20%, 70%);
}

透明度

/* 现代 CSS 语法 */
.overlay {
  background-color: rgb(0 0 0 / 0.5);  /* 50% 透明黑色 */
}

.card {
  background-color: hsl(200 80% 50% / 0.1);  /* 非常淡的蓝色调 */
  border: 1px solid hsl(200 80% 50% / 0.3);  /* 匹配的边框 */
}

透明度通道

三种格式都通过透明度通道支持半透明：

格式语法透明度范围
HEX（8 位）#RRGGBBAA00–FF（0–255）
RGBArgba(r, g, b, a)0–1
HSLAhsla(h, s%, l%, a)0–1

HEX 透明度示例：

  • #FF573380 — 50% 不透明度（十六进制 80 = 十进制 128 ≈ 0.5）
  • #FF573300 — 完全透明
  • #FF5733FF — 完全不透明

常见透明度对应的 HEX 后缀：

不透明度HEX 后缀
100%FF
75%BF
50%80
25%40
10%1A
0%00

格式之间的转换

HEX 转 RGB

将 HEX 代码拆分为三对，每对从十六进制转换为十进制：

#FF5733 → FF = 255, 57 = 87, 33 = 51 → rgb(255, 87, 51)

RGB 转 HEX

将每个十进制值转换为十六进制并拼接：

rgb(255, 87, 51) → 255 = FF, 87 = 57, 51 = 33 → #FF5733

RGB 转 HSL

这需要几个步骤：

  1. 将每个 RGB 值除以 255，得到 0 到 1 的值
  2. 找出最大值和最小值
  3. 计算明度：(最大值 + 最小值) ÷ 2
  4. 根据明度计算饱和度
  5. 根据哪个通道占主导计算色相

以 rgb(255, 87, 51) 为例：

  • 归一化：1.0, 0.34, 0.2
  • 最大值 = 1.0，最小值 = 0.2
  • 明度 = (1.0 + 0.2) ÷ 2 = 0.6 = 60%
  • 饱和度 = 100%
  • 色相 = 9°
  • 结果：hsl(9, 100%, 60%)

可访问性：对比度

颜色格式的选择影响可访问性。WCAG 2.1 要求：

  • 普通文本： 与背景的对比度至少 4.5:1
  • 大文本（18pt+ 或 14pt+ 加粗）： 对比度至少 3:1
  • UI 组件： 对比度至少 3:1

HSL 让检查和调整对比度变得简单。如果你的文本颜色不达标，只需调整明度值即可。一个常用模式：

/* 确保在任何背景上的文本都可访问 */
.text-on-light {
  color: hsl(var(--hue), var(--sat), 15%);  /* 深色文本 */
}

.text-on-dark {
  color: hsl(var(--hue), var(--sat), 95%);  /* 浅色文本 */
}

对比度快速提示

  • 纯黑 (#000000) 在纯白 (#FFFFFF) 上 = 21:1（最大对比度）
  • 深灰 (#333333) 在白色上 = 12.6:1（仍然优秀，眼睛更舒适）
  • 浅灰 (#999999) 在白色上 = 2.8:1（不符合 WCAG 普通文本标准）
  • 始终测试你的颜色组合——不要仅凭视觉判断

颜色选择器使用技巧

  1. 在设计工具中使用 HSL — 它给你最大的控制力
  2. 使用一致的色相 — 为整个调色板选择 2–3 个色相
  3. 变化饱和度和明度 — 这创造深度而不混乱
  4. 在亮色和暗色模式下都测试 — 在一种模式下好看的颜色在另一种模式下可能不行
  5. 使用 5% 明度递增 — 用于系统性色阶（50、55、60、65…）
  6. 避免纯饱和色 — 它们在屏幕上很刺眼。将饱和度降到 70–85% 更精致

即时转换颜色

不要浪费时间手动做十六进制运算。使用我们的免费颜色转换器即时在 HEX、RGB、HSL 和其他颜色格式之间转换。只需粘贴任何颜色值，就能同时获得所有等效表示。

理解颜色格式是一项小投入，每次写 CSS 都会有回报。选择适合任务的格式，构建系统化的调色板，并始终把可访问性放在心上。

---