颜色格式详解：HEX、RGB 与 HSL
快速解答
HEX (#RRGGBB) 和 RGB（每个通道 0—55）直接编码红色、绿色和蓝色强度。 HSL（色调 0—60°，饱和度/亮度 0—00%）以符合人类感知的方式编码颜色，从而更容易构建调色板和色调。使用我们的颜色转换器在这三种颜色之间进行转换。
介绍
网页颜色以三种主要格式指定：HEX（以 16 为基数的红、绿、蓝）、RGB（每通道十进制 0—55）和 HSL（色调、饱和度、亮度）。所有三个都描述相同的 sRGB 色彩空间，但暴露不同的轴：HEX 和 RGB 是面向硬件的（直接通道值），而 HSL 是面向人的（直观的色调、饱和度和亮度）。现代 CSS 还通过 HEX8、rgba() 和 hsla() 支持 alpha。
步步
-
了解 HEX 表示法
HEX 将每个通道写入两位数的以 16 为基数的数字：#RRGGBB。 00 为关闭，FF (255) 为全强度。 #FF0000 为纯红色，#00FF00 为纯绿色，#0000FF 为纯蓝色，#FFFFFF 为白色，#000000 为黑色。 4 位数字简写 #RGB 扩展为 #RRGGBB，#RRGGBBAA 添加 alpha（例如，#FF573380 为 50% alpha）。
-
了解 RGB 表示法
RGB 每个通道使用十进制 0—55：rgb(255, 87, 51) 与 #FF5733 相同。 rgba() 函数添加 0 — alpha：rgba(255, 87, 51, 0.5) 是 50% 不透明。 RGB 相当于 HEX ——它只是十进制而不是 16 进制。
-
了解 HSL 表示法
HSL 使用色调（色轮上的 0—60°：0=红色、120=绿色、240=蓝色）、饱和度（0% = 灰色、100% = 全彩）和亮度（0% = 黑色、50% = 正常、100% = 白色）。 hsl(11, 100%, 60%) 是鲜艳的橙色。 HSL 使得构建相同色调的色调（提高亮度）和阴影（降低亮度）变得微不足道。
-
格式之间转换
HEX→RGB：将每对解析为基数 16。 RGB→HEX：将每个通道转换为 2 位基数 16。 RGB→HSL：计算归一化通道的最大/最小值，亮度 = (max+min)/2，饱和度取决于亮度，色调是主通道的角度。使用我们的颜色转换器可以立即完成所有这一切。
-
为任务选择正确的格式
使用 HEX 来实现设计令牌和资产的紧凑性。当您需要对通道进行插值或设置动画时，请使用 RGB/rgba()。生成调色板、阴影或主题变体时使用 HSL/HSLA — 将亮度调整 10% 比推理 RGB 增量要容易得多。
示例
三种格式的纯红色
输入: #FF0000
输出: rgb(255, 0, 0) = hsl(0, 100%, 50%)
鲜艳的橙色
输入: #FF5733
输出: rgb(255, 87, 51) = hsl(11, 100%, 60%)
白色和黑色
输入: #FFFFFF 和 #000000
输出: rgb(255,255,255) = hsl(0, 0%, 100%); rgb(0,0,0) = hsl(0, 0%, 0%)
从一种 HSL 色调构建 5 步色调
输入: hsl(210, 70%, 50%) — 改变亮度 30/40/50/60/70%
输出: #1A4D7F、#2E6BA3、#4389C7、#6FA8DC、#9EC5E8 — 一致的蓝色调色板
常见问题
- 混合 3 位数和 6 位数 HEX：#F00 和 #FF0000 是相同的颜色，但某些解析器只接受一种形式。将代码标准化为 6 位数字以避免出现意外。
- 忘记 HSL 亮度 50% 不是“一半亮度”：在 100% 饱和度时，50% 亮度是纯色调；高于 50%，它会偏向白色，低于 50%，它会偏向黑色。 “50% 灰色”是 hsl(0, 0%, 50%)。
- Alpha 通道混乱：现代浏览器支持 #RRGGBBAA (HEX8)，但旧浏览器不支持； rgba()/hsla() 拥有更广泛的支持。始终测试目标环境。
- 色彩空间不匹配：HEX、RGB 和 HSL 均描述 sRGB。如果您在 P3 或 Lab/OKLCH（现代显示器使用）之间进行转换，简单的通道副本会产生错误的颜色 - 请使用正确的颜色库。
提示
- 设计调色板时使用 HSL：选择一种色调，然后改变亮度（例如 30/50/70%）和饱和度（例如 60/80/100%）以生成连贯的色调和色调。
- 为了便于访问，请检查背景的对比度 - WCAG AA 要求普通文本为 4.5:1，AAA 为 7:1。使用我们的颜色转换器来计算相对亮度和对比度。
- 更喜欢现代的 CSS color-mix() 或 oklch() 以获得感知均匀的插值 —RGB 插值在混合互补色时可以穿过浑浊的灰色。
- 生成渐变时，首先将端点转换为相同的格式 - 在单个渐变声明中混合 HEX 和 HSL 可能会产生意外的中点。