颜色转换

同一个颜色，面对不同的人要写成不同的样子：CSS 要十六进制代码，设计工具要 RGB，想在不改变色相的前提下微调明度时要 HSL，交给印厂时要 CMYK。这个转换器接受其中任意一种写法，并把全部结果一次列出。它还回答随之而来的两个问题：白字还是黑字放上去更容易读——按 WCAG 对比度阈值打分；以及当你需要一个悬停态或一整套设计系统色阶时，更浅和更深的版本长什么样。

如何转换一个颜色

用任意写法输入颜色——「#3a2e30」「3a2」「rgb(58, 46, 48)」或「hsl(340, 12%, 20%)」——也可以用取色器凭眼睛挑一个。
查看各种转换结果，每一行都能用旁边的按钮复制。
看对比度面板，确认白字和黑字放在这个颜色上是否达到 AA 和 AAA 阈值。
从明暗层次一行里挑选相关颜色：更浅的用作悬停态，更深的用作边框或按下状态。

关于颜色转换的常见问题

在 CSS 里我该用哪种写法？

固定的品牌色用十六进制，它紧凑且人人都懂。当你在生成变体时用 HSL：改一个数字就能得到同一色相下更浅或更柔和的版本，而不必对三个通道连蒙带猜。

CMYK 的换算对印刷准确吗？

请把它当作近似值。真实的印刷颜色取决于纸张、油墨和印刷机的色彩配置，所以印厂会用色彩特性文件而不是公式来转换。用这个数字大致传达你想要的颜色，而不要把它当作最终的印刷规格。

对比度数字是什么意思？

它是这个颜色与白字或黑字之间的 WCAG 对比度。正文文字的 AA 阈值是 4.5:1，大号或粗体文字是 3:1，AAA 是 7:1。低于 3:1 时，对许多人来说文字会变得难以辨读，不应使用。

HSL 和 HSV 有什么区别？

两者都从色相和饱和度出发。HSL 的第三个值从黑经过纯色一直到白，所以适合生成明暗层次。HSV 的第三个值从黑到纯色，这正是多数取色器以方形渐变呈现的那一种。

它处理透明度吗？

rgba 或八位十六进制输入中的 alpha 值会被接受但被忽略——转换结果描述的是不透明的颜色。对比度尤其如此：不知道半透明颜色背后是什么，就无法计算。