实际 UI 工作用的色彩转换器

在 design token 进入正式环境前，转换颜色格式、检查对比，并探索相关色板。

支持 HEX、RGB、HSL 和常见 CSS 颜色。
4.70vs Black
4.46vs White
对比
检查前景和背景是否容易阅读。
HEX
RGB
HSL
CMYK

颜色关系

互补色
#6366f1
#f1ef63
相近色
#63acf1
#6365f1
#a863f1
明暗变化
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

颜色格式指南

HEX

Web design 常用的精简格式，通常写成六位十六进制值。

RGB

以红、绿、蓝光值为基础，面向屏幕的颜色模型。

HSL

以 hue、saturation、lightness 表示，较容易用人类方式调整明暗和相关 UI 状态。

CMYK

面向印刷的颜色模型，以 cyan、magenta、yellow 和 black 为基础。亮色从屏幕转印刷时可能有差异。

Contrast

对比影响表单、控制台、价格表、错误状态，以及每个需要快速阅读的地方。

常见问题

RGB 和 CMYK 为什么会有些微落差？

屏幕色和印刷色使用不同色域。有些 RGB 颜色无法在 CMYK 中完全重现。

WCAG 对比分数代表什么？

它衡量前景和背景放在一起时的可读性。分数越高，通常代表文字越容易阅读。

品牌色可以拿来当正文字色吗？

不一定。适合 logo 或 accent 的品牌色，放在正文上可能不够可读。需要阅读时请使用更稳的中性色或调整后的色阶。

为什么不同工具看到的颜色不同？

屏幕、颜色描述文件、浏览器和印刷流程都可能让同一个数值呈现不同效果。转换结果可当实用参考，最后仍要在目标媒介测试。