颜色代码转换

怎么用

1. 点输入框旁边的取色按钮，从屏幕任意位置吸一个颜色，或者直接把 HEX 值（比如 #1E90FF）粘进来，填 RGB 数值也行。
2. 页面会立刻算出对应的 HSL 和 CMYK 数值，并自动匹配一个最接近的网页安全色，代码都能一键复制。
3. 往下翻到色盲模拟区，切换红色盲/绿色盲视角，看看这个颜色在他们眼里长什么样，再决定要不要换。

什么时候用得上

写 CSS 的时候最常遇到：设计稿只给了个 HEX，产品经理说“太艳了，压一压”。这时候看 HSL 的饱和度、明度数值，比瞎调 RGB 快多了，改完顺手把新的 HEX 复制回去就行。

做图表也要用：红绿两个数据系列放一起，色盲同事看起来可能是一片糊。发出去之前用模拟视角过一遍，发现分不清就换成蓝配橙这种安全组合，谁看都清楚。

常见问题

网页安全色是什么，现在还有用吗？它是早年 8 位显色设备上都能稳定显示的 216 种颜色，如今大多数场景用不上了，但做老设备兼容或某些邮件模板时仍是保底选择，页面上标出的就是离你颜色最近的那一个。

为什么按 CMYK 值印出来和屏幕颜色不一样？屏幕是 RGB 发光混色，印刷是 CMYK 油墨减色，色域本身有差距，印出来通常偏暗。这里的换算结果适合参考和跟印厂沟通，正式印刷前记得让他们出打样稿。

色盲模拟的效果靠谱吗？模拟的是红色盲和绿色盲两种典型情况的大致观感，用来检查“两个颜色会不会被看成同一个”完全够用。如果要做严格的无障碍合规，建议再配合文字对比度一起看。

相关工具