颜色转换实战:HEX RGB HSL HSV 互转怎么选,CSS 里到底怎么写

写前端这些年,颜色格式我大概换过上千次。同一个颜色,设计师给我 HEX,组件库要 RGB,做主题切换又得拆成 HSL。每种写法都有它最舒服的场景,搞混了就会在某个环节卡住。这篇把四种常见表示法的取舍说清楚,顺便讲 alpha 透明度和 CSS 里的正确写法。

一个颜色,四张面孔

先看一个具体例子。橙红色 #FF5733,拆开来是:

HEX:#FF5733
RGB:rgb(255, 87, 51)
HSL:hsl(11, 100%, 60%)
HSV:hsv(11, 80%, 100%)

四组数字描述的是同一个颜色,只是坐标系不同。HEX 和 RGB 本质一样,都是红绿蓝三通道,只是 HEX 用十六进制写、RGB 用十进制写。HSL 和 HSV 换了个角度,把颜色拆成色相、饱和度、明暗,这两组数字改起来比直接动 RGB 直观得多。

HEX 和 RGB:交付和兜底用它

HEX 是我交付时的默认格式。原因很简单,它认得最广:CSS、邮件模板、移动端原生、各种 CSS-in-JS 库,只要是 2023 年之前的工具链,基本都吃 HEX。遇到拿不准对方系统支不支持新格式的时候,给 HEX 准没错。

有个小坑要提一句。HEX 短码 #f00 在浏览器里会自动展开成 #ff0000,但某些颜色校验库（老的 Joi schema、部分表单校验器)不收 3 位写法,直接拒。下游严格的话,统一用 6 位完整形式输出最稳。

RGB 和 HEX 是一回事,通常在需要程序拼接、或者跟 canvas、图像处理打交道时我会用 RGB,因为数字直接能参与运算。

HSL 和 HSV:调色和主题用它

要改一个颜色而不是描述它,HSL 和 HSV 就值钱了。

举个我常做的事:给暗色模式算 hover 态。按钮底色 #06b6d4,看它的 HSL 是 H: 188° S: 95% L: 43%。我只要把 L 加到 48%,色相饱和度完全不动,出来的就是"同一个颜色但亮一点"。这事用 HEX 凭感觉调能调到天黑,用 HSL 加个数就完事。

HSL 和 HSV 长得很像,开头都是 H 和 S,但那个 S 含义不同。HSL 的 S 是相对同亮度灰的饱和度,HSV 的 S 是相对同色相最亮版本的饱和度。把一个工具的 S 直接搬到另一个里,颜色会肉眼可见地错。先看行标签再抄数字,别只盯着数。简单记:做主题、做明暗梯度选 HSL;跟拾色器方块那种取色交互打交道,HSV 映射得更顺。

alpha 透明度怎么接

透明度是第五个维度,跟前面四种正交。HEX 可以写成 8 位 #FF573380,最后两位 80 是十六进制的 50% 左右。RGB 用 rgba(255, 87, 51, 0.5),HSL 用 hsla(11, 100%, 60%, 0.5),最后那个 0 到 1 的数就是不透明度。

我个人偏好 rgba 写法,因为那个小数最直观,0.5 一眼就知道是半透明。8 位 HEX 虽然紧凑,但 80 到底是多少透明度得心算,团队协作时容易看岔。

CSS 里的现代写法

新版 CSS 把分隔符也改了。老写法是逗号:rgb(255, 87, 51)、hsl(11, 100%, 60%)。现代写法用空格,透明度用斜杠分隔:rgb(255 87 51 / 0.5)、hsl(11 100% 60% / 0.5)。两种浏览器都认,但空格语法更适合做 CSS 变量,比如把色相单独抽成 --primary-hue,运行时改一个变量就切换整套主题。

还有个容易忘的点:CSS 颜色函数名必须小写。RGB(...) 在原生 CSS 里浏览器会帮你归一化,但某些 CSS-in-JS 运行时(老版 styled-components、部分 Emotion 配置)只认小写 rgb(...)。复制工具给的小写形式就不用操心这个。

顺手做的两件事

转完格式我一般会顺手检查对比度。文字配色调到 #FF5733 这种亮橙,放白底上对比度往往过不了 WCAG AA(正文要 ≥ 4.5)。在 /zh/t/color-contrast-checker/ 里把前景背景一填就知道达不达标,省得交付后被无障碍审查打回。

上面这些互转,我平时都在 /zh/t/color-converter/ 里一次做完,五种格式同屏显示,改任一种其他四种实时跟着变,带 alpha 和对比度读数,色值全在浏览器本地算,不上传。配色迁移那种"粘 RGB、复制 HSL"的重复活,一个颜色两三秒,比手算快太多。

Made by Toolora · Updated 2026-06-13