颜色转换器

为什么需要颜色转换器？

CSS 颜色格式在设计工具、前端框架和团队约定之间高度割裂。Figma 默认导出 HEX，Tailwind 配置吃 RGB，设计令牌正在迁移到 OKLCH。本工具一次粘贴即可输出全部 8 种格式，并附带 WCAG 对比度、OKLCH 色阶以及最近的 Tailwind v4 调色板匹配，全部在浏览器本地完成。

什么是 OKLCH？

OKLCH 是 CSS Color Module Level 4 标准中定义的感知均匀色彩空间。等步长在数值上相等时视觉上也相等，因此被推荐用于设计系统色阶和可访问性 UI 状态。HSL 并非感知均匀（同样 50% 亮度的黄色看起来比蓝色更亮），因此色阶生成首选 OKLCH。

WCAG 对比度检查如何工作？

WCAG 2.2 对比度根据两种颜色的相对亮度计算。AA 级要求正文 ≥ 4.5:1、大字号或 UI 组件 ≥ 3:1；AAA 级则将阈值提高到 7:1 / 4.5:1。本工具会同时显示当前色与白色、黑色及自定义对比色的比值。

我的颜色数据会被上传吗？

不会。所有解析、转换与色阶生成均在浏览器本地完成。地址栏的 URL hash 是在你的设备上生成的，从不会 POST 到任何服务器，也没有任何遥测或分析采集颜色值。

常见问题

为什么有些 OKLCH 颜色被标记为 clipped？

OKLCH 覆盖的颜色范围比显示器的 sRGB 色域更大。当某一色相和亮度对应的彩度过高时，我们会截断到 sRGB 边界，确保 HEX/RGB 输出保持准确。

为什么设计令牌应优先使用 OKLCH 而不是 HSL？

OKLCH 是感知均匀的：等步长在数值上相等时视觉上也相等。HSL 则不然——同样 50% 亮度的黄色看起来明显比蓝色更亮。对一致的色阶来说，OKLCH 更可靠。

WCAG 级别我该选哪个？

WCAG 2.2 AA 是大多数司法辖区的法定最低线：正文 4.5:1、大字号与 UI 组件 3:1。AAA（7:1 / 4.5:1）是无障碍优先产品的最佳实践。

这个工具会把我的颜色发送到哪里吗？

不会。所有解析与转换都在浏览器本地完成；可复制的 URL hash 也是在你的设备上生成的，永远不会 POST 到任何服务器。

能通过 URL 分享颜色吗？

可以——URL hash 会随颜色变化实时更新。直接复制地址栏，对方打开后即可看到相同颜色。