HEX、RGB、HSL、CMYK 与文字对比度检查方法

色值代码就是同一种颜色的不同写法。HEX、RGB 和 HSL 描述的是屏幕上的同一束光，因此除了取整误差，它们之间可以精确互换。CMYK 描述的是纸面上的油墨，所以从屏幕色值换算过来的结果只是估算。WCAG 对比度是另一个数值，用来比较两种颜色的明暗差异，并判断文字是否清晰可读。把颜色粘贴到 颜色转换器 中，即可一次看到所有格式。

颜色转换器需要将颜色转换为其他格式免费使用

如果你需要的颜色藏在照片、标志或截图里，先用 图片取色器 从像素中读取，再把 HEX 粘贴到这里。如何从图片中精确取色 一文介绍了具体步骤。

HEX 与 RGB 是同一组数字

HEX 色值由三组十六进制数字组成。#34D6A0 包含红、绿、蓝三个数值。每组是从 00 到 FF 的数字，换成十进制即 0 到 255。所以 34 是 52，D6 是 214，A0 是 160，对应的 RGB 写法为 rgb(52, 214, 160)。

改变的只是数字的写法，颜色本身没有变。简写形式 #abc 等同于 #aabbcc，即每位数字重复一次。八位色值在末尾多了一组透明度，从 00 表示完全透明到 FF 表示完全不透明，所以 #34D6A080 大约是半透明。RGBA 用 0 到 1 之间的小数来表示同样的透明度。

CSS 还支持颜色名称。rebeccapurple 对应 #663399。转换器通过浏览器本身识别颜色名称，因此浏览器认识的名称都可以使用。

HSL 用人们描述颜色的方式来表达

HSL 分别代表色相、饱和度和明度。色相是色环上的一个角度：红色为 0 度，绿色为 120 度，蓝色为 240 度。饱和度表示颜色离灰色有多远，明度则表示颜色离黑色或白色有多远。

同样的 #34D6A0 换算成 hsl(160, 66%, 52%)。它的色相介于绿色和蓝色之间，饱和度较高，明度略高于中间值。HSL 是最容易手动调整的格式：保持色相不变，只调整明度，就能得到更浅或更深的同一色调。

HSV 与 HSL 很接近，但用明度（即最强通道的亮度）代替了 HSL 中的明度。一些取色工具使用 HSV，所以你在其他工具里可能会遇到它。转换器把 HSV 和 HSL 并排显示，方便你对比。

CMYK 用于油墨，因此只是估算

屏幕靠加色混光：红、绿、蓝叠加得到白色。印刷则靠减色用墨：在白纸上叠加青、品红、黄和黑。两套体系无法完全对应，所以 CMYK 值始终是一种转换结果。

转换器使用简单的公式。黑色成分 K 等于 1 减去 0 到 1 范围内红、绿、蓝数值中的最大值。青、品红和黄则根据 K 之外剩余的部分计算得出。该公式没有考虑印刷所用的油墨、纸张和色彩配置文件。因此，印刷结果会有所不同，而且非常明亮的颜色可能超出 CMYK 油墨的印刷范围。CMYK 值可以作为与印刷厂沟通的起点，正式大批量印刷前，建议先索取样张确认。

对比度看的是明暗，而不是色相

WCAG 对比度通过相对亮度来比较两种颜色。相对亮度由经过伽马校正后的红、绿、蓝数值计算得出，其中绿色占比最大，因为人眼对绿色最敏感。计算时，每个通道先从 0 到 255 的范围换算过来，然后亮度等于 0.2126 乘以红色，加 0.7152 乘以绿色，再加 0.0722 乘以蓝色。

对比度为较亮颜色的亮度加 0.05，再除以较暗颜色的亮度加 0.05。黑色与白色的对比度为 21 比 1，是最大值。两种颜色的色相可能差异很大，但如果明度相近，对比度依然很低，而这正是该检查要发现的问题。同样的低对比度也是二维码无法扫描的原因之一。

各项标准

WCAG 2.x 设定了两个等级，所需的对比度取决于文字的大小。

• AA 级：普通文字需达到 4.5 比 1，大号文字需达到 3 比 1。
• AAA 级：普通文字需达到 7 比 1，大号文字需达到 4.5 比 1。

大号文字指 24 像素及以上，或 18.66 像素加粗的文字。更小的文字均视为普通文字。白底上的灰色文字是常见的不达标情况。例如白底上的中灰色 #777777 对比度约为 4.48 比 1，普通文字的 AA 标准差了一点点，但用作大标题则能通过 AA 标准。

转换器显示的对比度保留两位小数，但每项是否通过，都是按精确数值判断的。因此，显示为 4.50 的数值如果实际略低于 4.5，仍然不通过。这项检查只衡量一件事。它不涵盖字重、行距，也不反映色盲用户如何看待设计，所以还应在真实页面和实际字号下进行测试。

色调与色阶

转换器下方的色条围绕该颜色显示九个层级：向白色混合的四个浅色调、颜色本身，以及向黑色混合的四个深色调。点击任一色块即可复制其 HEX 色值。当你需要一组相关颜色时，这很有用，比如从同一个品牌色中取浅色背景、悬停状态和深色文字颜色。选定每一组搭配后，都应先用对比度部分检查一遍，再投入使用。

在 fixmint 中操作

1. 在颜色框中粘贴颜色，可以是 HEX、RGB、HSL，或 rebeccapurple 之类的 CSS 颜色名称。
2. 查看 HEX、RGB、HSL、HSV 和 CMYK 各行。点击所需那一行旁边的复制。CMYK 标注为近似值。
3. 在背景中输入背景色，或点击其色块，然后在白底、黑底和你的背景下方查看对比度。
4. 检查每个对比度数值下方的四个标记：AA 和 AAA，分别针对普通文字和大号文字。
5. 在色调与色阶下，点击色块即可复制。

常见问题

CMYK 值是精确的吗？

不是。它只是一种单纯的算术换算，没有考虑印刷厂、纸张和色彩配置文件。请把它当作起点，并向印刷厂索取样张。

对比度达标，设计就一定无障碍吗？

这只说明文字颜色达到了一项可量化的标准。无障碍还取决于字号、间距、动态效果以及页面的构建方式，因此对比度只能作为参考，不能代替完整的审查。

样式表中应该存哪种格式？

选你读写最方便的那种。HEX 简洁常用。HSL 更便于手动调整，因为改变明度时无需改动色相。