HEX、RGB、HSL 颜色格式详解：怎么转换，什么时候用哪个

每个前端开发者都要在三种写法之间来回倒腾同一个颜色：设计师给你 #FF5733，CSS 框架里写着 rgb(255, 87, 51)，设计教程又坚持 HSL 才是唯一正道。它们是同一事物的三种记法，但并不是每种任务都适合随便挑一个——而且手动转换出错率高到每个人最后都会求助于工具。这篇文章讲清每种格式到底编码了什么、转换怎么做，以及实际场景中的选择原则。

RGB：三束光

屏幕上一个像素就是三盏小灯——红、绿、蓝——RGB 记法陈述每盏灯开多亮，范围 0 到 255。rgb(255, 87, 51) 意思是红光全开、绿光开三分之一、蓝光开五分之一。三个全 0 是黑色，全 255 是白色，中间相等的值是各种灰色。

为什么是 0–255？每个通道占一个字节：8 比特，2⁸ = 256 个级别。三通道 × 8 比特就是经典显示规格里的”24 位色”，约 1677 万种颜色。255 这个上限也解释了最常见的 RGB 误解：数值是绝对强度，不是百分比。rgb(128, 128, 128) 是中灰色，不是”一半红一半绿一半蓝”。

现代 CSS 也接受 rgb(255 87 51)（空格分隔、无逗号）以及表示透明度的第四通道：rgb(255 87 51 / 0.5) 或旧式 rgba(255, 87, 51, 0.5)。

HEX：穿了马甲的 RGB

#FF5733 不是另一套颜色模型——它是同样三个通道的十六进制写法：FF = 255，57 = 87，33 = 51。红、绿、蓝各两位十六进制，前面加 #。十六进制是 16 进制，一个字节恰好永远是两位（00–FF），写起来紧凑且定长——这正是它成为设计工具和 CSS 默认格式的原因。

流畅读 HEX 只需要一个技巧：关注每一对的大小而不是精确值。#F… 表示”这个通道很多”，#3… 表示”一点点”。所以 #FF5733 一眼就能读出”大量红、一些绿、几乎没有蓝” = 偏橙色。#F00 这类简写会把每位翻倍（#FF0000，纯红），八位形式则在末尾追加透明度：#FF573380 是 50% 不透明（80 十六进制 = 128 十进制 ≈ 255 的一半）。

手动 RGB → HEX：每个通道除以 16，商和余数就是两位数字（10–15 写作 A–F）。87 ÷ 16 = 5 余 7，得 57。反过来：第一位 × 16 + 第二位。如果你不想把下午耗在这上面，颜色选择器会在你调整任意一种格式时实时显示 HEX、RGB、HSL 三个值。

HSL：为人类设计的格式

RGB 按硬件产生颜色的方式描述颜色；HSL 按人思考颜色的方式描述：

• 色相（Hue，0–360°）：色轮上的位置。0° 是红，120° 是绿，240° 是蓝，其余都是圆上的插值。
• 饱和度（Saturation，0–100%）：颜色有多鲜艳。0% 不管色相是什么都是纯灰；100% 是全强度。
• 亮度（Lightness，0–100%）：离黑或白多近。0% 永远是黑，100% 永远是白，50% 是”纯正”的颜色。

杀手锏是每个旋钮只做一件符合直觉的事。想要品牌色的深色版？亮度从 50% 降到 35%——完事，不用算。想要灰一点？降饱和度。想要互补色？色相加 180°。这些操作换成 RGB 都是在三个纠缠的数字里瞎猜：正确地调暗 rgb(255, 87, 51) 需要三个通道等比缩放，第一次尝试多半会把色相带偏。

这就是为什么 HSL 适合系统化设计：悬停态（亮度 −10%）、禁用态（饱和度 −40%）、从一个品牌色相生成整套调色板。调色板生成器利用的正是这一点——围绕一个基础色相变化饱和度和亮度，自动产出和谐的颜色家族，这在 HEX 里几乎不可能靠肉眼调出来。

HSL ↔ RGB 转换：问题的形状

HSL → RGB 比 HEX 转换复杂，因为色相角度先确定色轮上的扇区（哪两个通道参与），饱和度和亮度再缩放结果。大致算法：由饱和度和亮度算出浓度（chroma），确定色相落在哪个 60° 扇区，把浓度分配给对应通道，最后整体加上亮度偏移。可行，但属于那种没人该每次现推的公式——这正是颜色工具存在的意义。

值得记住的是几个锚点：hsl(0, 100%, 50%) = #FF0000（红），hsl(120, 100%, 50%) = #00FF00（绿），hsl(240, 100%, 50%) = #0000FF（蓝），以及任何饱和度为 0% 的颜色都是灰色，深浅只由亮度决定。

什么场景用什么格式

• HEX：常量的默认选择——品牌色、设计令牌、任何从设计工具里复制出来的值。紧凑、全兼容、可搜索。
• RGB/RGBA：已经在处理通道的场景——canvas 像素、图像处理，或者需要给现有 RGB 值快速加透明度。
• HSL：一切需要计算或成体系的东西——主题变体、悬停/激活态、程序化调色板、暗色模式适配（整体降亮度，暗色主题初稿就有了）。

一个实用的 CSS 模式是把三者结合：品牌色用 HEX 自定义属性定义，再用 color-mix() 或分离存储通道的方式派生变体。无论最终 CSS 用哪种格式，令牌都要按语义命名（--color-danger 而不是 --color-red），这样底层色值改动时不用全库搜换。如果有人口头给你一个颜色名——“用珊瑚色吧”——颜色名称查询能在名称和精确的 HEX/RGB 值之间双向转换，省得猜对方说的到底是不是 #FF7F50。

速查表

• HEX = RGB 的十六进制写法：#FF5733 ≡ rgb(255, 87, 51)。同一模型，不同记法。
• RGB 通道是 0–255 绝对强度；三值相等即灰色。
• HSL：色相 = 哪种颜色（0–360°），饱和度 = 多鲜艳，亮度 = 暗 ↔ 亮（50% 最纯）。
• 调暗/调亮和降饱和用 HSL；存常量用 HEX；需要透明度用 RGBA/HSLA。
• #RGB 简写每位翻倍；#RRGGBBAA 末尾两位是透明度。