颜色代码转换器

HEX、RGB、HSL、HSV、CMYK 分别是什么

颜色代码就是用不同的坐标系来记录同一种颜色。屏幕靠混合红、绿、蓝三种光来显色,所以屏幕上用的格式都源自 RGB 的三个数值。选哪种格式,取决于你要做什么。

• RGB:用 0 到 255 的整数分别表示红、绿、蓝。每个通道 8 位,共有 256 的 3 次方 = 16,777,216 种颜色。CSS 里可以写成 rgb(201 169 97) 或 rgb(201, 169, 97)。
• HEX:把 RGB 的三个数各转成两位十六进制再连起来。#C9A961 就是 C9(201)、A9(169)、61(97),信息量与 RGB 完全相同。#FA0 这样的三位写法会把每位重复一次,等于 #FFAA00。
• HSL:用色相(色环上 0 到 360 度的角度)、饱和度(%)、明度(%)描述颜色。它最方便人手动调整:色相不变,只改明度,就得到同一颜色的深浅版本。
• HSV(也叫 HSB):用色相、饱和度和明度值(Value,最强通道的值)表示。Photoshop、Figma 的取色器通常是 HSB。HSL 里最纯的颜色在 L = 50%,HSV 里则是 S = 100%、V = 100%。两个模型中的 S 虽然同名,数值并不一样,不要混用。
• CMYK:用青、品红、黄、黑四种油墨的比例表示,用于印刷。油墨吸收光线,属于减色混合,原理与屏幕加色的 RGB 不同。

转换公式

把 R、G、B 除以 255 得到 0 到 1 之间的 r、g、b,max 和 min 为三者的最大、最小值,d = max − min。

• RGB → HSL:L = (max + min) / 2。d = 0 时是灰色,H = 0、S = 0;否则 S = d / (1 − |2L − 1|)。H 在最大值为 r 时是 60° × ((g − b) / d 对 6 取余),为 g 时是 60° × ((b − r) / d + 2),为 b 时是 60° × ((r − g) / d + 4),结果为负就加 360。
• RGB → HSV:V = max,S = d / max(max 为 0 时取 0),H 的算法与 HSL 相同。
• HSL → RGB:C = (1 − |2L − 1|) × S,X = C × (1 − |(H / 60 对 2 取余) − 1|),m = L − C / 2。根据 H 所在的 60° 区间,选 (C,X,0)、(X,C,0)、(0,C,X)、(0,X,C)、(X,0,C)、(C,0,X) 之一,加上 m,乘以 255 后四舍五入。
• RGB → CMYK(简单公式):K = 1 − max,C = (1 − r − K) / (1 − K),M = (1 − g − K) / (1 − K),Y = (1 − b − K) / (1 − K)。K = 1(纯黑)时取 C = M = Y = 0。

算例

例 1:暖金色 #C9A961。RGB 为 (201, 169, 97)。max = 201/255 = 0.788,min = 97/255 = 0.380,d = 0.408,所以 L = (0.788 + 0.380) / 2 ≈ 58%,S = 0.408 / (1 − |2 × 0.584 − 1|) ≈ 49%;最大值是 R,H = 60 × ((169 − 97) / 104) ≈ 42°。因此 HSL 约为 (42°, 49%, 58%),HSV 的 S ≈ 52%、V ≈ 79%,简单公式的 CMYK 为 (0%, 16%, 52%, 21%)。它与白色的对比度约 2.25:1,不适合做白底正文的文字色;与黑色约 9.33:1,足够。

例 2:橙红色 #FF5733。RGB (255, 87, 51) 中 max = 1,min = 0.2,d = 0.8,所以 L = 60%,S = 100%,H = 60 × ((87 − 51) / 204) ≈ 10.6°,显示为 11°。HSL 约 (11°, 100%, 60%),HSV (11°, 80%, 100%),CMYK (0%, 66%, 80%, 0%)。与白色的对比度约 3.15:1,超过大号文字的 3:1,但达不到正文通常要求的 4.5:1。

例 3:纯蓝 #0000FF。HSL 为 (240°, 100%, 50%),HSV 为 (240°, 100%, 100%),CMYK 为 (100%, 100%, 0%, 0%)。与白色的对比度约 8.59:1。同样是“100%”,在 HSL 和 HSV 里含义不同,这个例子正好说明这一点。

常用颜色参考表

下表是页面生成时用上面的公式算出来的,你可以把每一行的 HEX 填进输入框对照结果。

为什么 CMYK 只是“近似”

屏幕的 RGB 受设备能发出的光的范围(色域)限制,印刷的 CMYK 能呈现的范围则取决于油墨、纸张和印刷方式,两者差别很大。上面的公式只是在两种体系之间做了简单的数学换算,并不反映真实油墨的颜色。 同样的 CMYK 数值,在铜版纸和哑粉纸上看起来不同;套用印刷厂的 ICC 色彩配置文件(如 FOGRA、SWOP 系列)之后数值也会改变。接近荧光的鲜艳绿、橙、蓝在 CMYK 里无法还原,印出来会发暗。 这里显示的 CMYK 只能当大致参考。做印刷品时,请在设计软件中按印刷厂要求的配置文件转换,颜色重要的话再用色卡或打样确认。

对比度是怎么算的

网页内容无障碍指南(WCAG)用“对比度”来评价文字色与背景色的明暗差。先把每个通道线性化:sRGB 值 v(0 到 1)不大于 0.04045 时取 v / 12.92,否则取 ((v + 0.055) / 1.055) 的 2.4 次方。 相对亮度 L = 0.2126 R + 0.7152 G + 0.0722 B,对比度 = (较亮一方的 L + 0.05) / (较暗一方的 L + 0.05)。 按 WCAG 2.x,AA 级要求正文至少 4.5:1,大号文字(约 24px 以上,或粗体 18.7px 以上)至少 3:1;AAA 级分别是 7:1 和 4.5:1。 本工具只显示所选颜色分别搭配白色和黑色时的对比度。要比较任意两种颜色,请使用色彩对比度检测器。

用 HEX 表示透明度

CSS 支持 #RRGGBBAA 形式的八位 HEX,最后两位是不透明度。不透明度 p% 对应 round(p / 100 × 255) 的十六进制值。例如 50% 是 127.5,四舍五入为 128,即十六进制 80,所以 #C9A96180 就是上面那种金色约 50% 不透明的版本。同样的颜色也可以写成 rgb(201 169 97 / 50%),可读性更好。

本转换器只支持三位和六位 HEX。如果手头是八位值,请只输入前六位。

调色板是怎么生成的

色调板保持所选颜色的色相和饱和度,只把明度改为 90、75、60、45、30、15%。互补色是色相加 180°,邻近色是色相加减 30°(−30° 即 +330°)。 这是基于 HSL 的机械计算,并不会把人眼感受到的明暗均匀分开,例如同样的 L,黄色系看起来比蓝色系亮得多。请把调色板当作起点,用到界面中时再检查对比度并微调。想要更丰富的搭配,可以用配色方案生成器;想查有名字的 CSS 颜色,可以看网页颜色名称大全。

常见错误与注意事项

• 经过 HSL 往返,数值会有一点偏差。H、S、L 都取整数,所以 HEX → HSL → HEX 可能产生 ±1~2 的差异。要保存精确值,请以 HEX 或 RGB 为准。
• 屏幕颜色不等于印刷颜色。显示器亮度、色温和色彩配置文件都会让同一个 HEX 看起来不同。
• HSL 的 S 与 HSV 的 S 不是同一个值。把设计软件里的 HSB 数值直接填进 CSS 的 hsl(),得到的是另一种颜色。
• 灰色的色相没有意义。R = G = B 时色相显示为 0,实际上是未定义的,饱和度为 0,改色相也不会有变化。
• HEX 不区分大小写。#c9a961 与 #C9A961 是同一种颜色。

怎样使用转换结果

1. 输入设计软件里选好的颜色的 HEX,复制 CSS 用的 rgb() 或 hsl() 写法。
2. 把品牌色转成 HSL,只调整明度,得到悬停、禁用和背景的色调。
3. 检查候选文字色相对白色或黑色是否超过 4.5:1,不够就调整明度。
4. 需要印刷时,把 CMYK 近似值当起点,再用印刷厂的配置文件重新转换。

如果想了解十六进制本身,可以看进制转换器;长度、重量等单位请用单位换算器;要生成渐变代码,CSS渐变生成器会有帮助。

常见问题

相关工具

• 色彩对比度检测器 - 检查任意两色的文字可读性
• 配色方案生成器 - 搭配颜色组合
• 网页颜色名称大全 - 按名称查找颜色
• CSS渐变生成器 - 把颜色变成渐变代码