颜色转换器

颜色转换器把任意输入在 HEX、RGB、HSL、HSV、HWB、CMYK、LAB、LCH、OKLAB、OKLCH 之间相互转换，并附带 Tailwind 风格调色板生成、配色方案、WCAG 2 与带正负号的 APCA 对比度，以及 Brettel-Viénot-Mollon 色觉模拟。从 #0EA5E9 到 oklch(75% 0.18 50) 再到 lab(70% 90 -80) 都能识别——超出 sRGB 的请求会被检测出来，显示时按通道截断，再通过"映射到 sRGB"一键把彩度降到能真正落在屏幕上。

输入"超出 sRGB"是什么意思

lab()、lch()、oklab()、oklch() 这些宽色域格式可以描述普通 sRGB 显示器无法呈现的颜色。预览色块展示的是硬件实际能显示的样子（每个通道被截断到 0–255），出现这种情况时左下角会冒出黄色提示标。

OKLCH 面板里彩度滑块上限是 0.37 而不是规范允许的 0.4——因为对 sRGB 能呈现的色相来说，人眼可感知的彩度上限大致就是这个值，再往上拖必然产生截断。

WCAG 2 与 APCA 怎么取舍

无障碍标签页同时给出两套数值，二者结论不一致的情况比想象中常见：

• WCAG 2 比率目前还是审计/合规口径的"硬指标"。它对黄字配白底和灰字配白底打的分一样，从感知角度并不准确，但绝大多数无障碍工具与法规仍以它为准。
• APCA Lc 是带方向性的下一代标准。正负号有意义——正值代表浅色文字配深色背景，负值反之。正文场景大致：Lc 60 ≈ WCAG AA，Lc 75 ≈ AAA。

边界比率（3.5–5）下黄/橙/青色调常出现两套指标打架。设计决策听 APCA 的极性更稳，过审仍要确保 WCAG 通过。

Tailwind 风格调色板与官方 Tailwind 的差异

11 阶梯度使用固定的感知明度锚点（50 → 0.97，500 → 0.62，950 → 0.20），并采用在 500–600 处达到峰值（scale 1.05）、向两端递减的彩度曲线——这与 Tailwind 手工调色的规律一致。但官方 Tailwind 每个色系还会按色相微调彩度，所以即使粘贴 Tailwind 真正的 sky-500（也就是 #0EA5E9）也无法逐位复刻官方梯度，结果只能"接近"。原型设计或品牌色派生足够用。

色盲模拟到底准不准

色盲网格使用 Brettel-Viénot-Mollon 二色觉矩阵，直接在显示用 sRGB 空间里应用，与 Coblis、Firefox DevTools 的实现一致。它不是更新的 Machado-Oliveira-Fernandes 2009 LMS 域模型——高饱和度颜色与临床校准过的参考实现会有可见偏差。可用于设计决策，不能作为医学结论引用。

每张图旁的人群比例是全球平均：红绿色盲合计约影响 8% 欧裔男性，亚洲人群比例显著更低。

最近用过的颜色与可分享链接

输入框下方那一排 6×6 的小色块记录最近 8 种使用过的不重复颜色（拖动滑块时已防抖，不会被中间状态塞满）。点任意一块即可恢复。当前颜色还会同步写入 URL 哈希，形如 #color=oklch(...)——你从地址栏复制的链接都能精确还原同一种颜色，包括超出色域的颜色。

几个容易踩的点

• alpha < 1 时的 8 位 HEX——透明度低于 100% 时显示的 HEX 会变成 8 位 #RRGGBBAA。Android XML 导出已正确转换为 #AARRGGBB（前缀写 alpha），但把 8 位 HEX 粘到一些老的 sRGB 工具里会被解析错误。
• 彩度归零后色相会丢——彩度拖到 0 时色相在数学上是未定义的。本工具会记住上一次非零的色相，再拖回来时会自动恢复，而不是跳到红色。
• 没看到取色按钮——目前只有 Chromium 系（Chrome、Edge、Brave、Arc、Opera）暴露 window.EyeDropper。Firefox 和 Safari 上按钮直接隐藏，避免点了之后报"不支持"。