输出 HEX、RGB、HSL、HSV、HWB、OKLCH 和 CMYK 原生取色器与不透明度滑块相对白色和黑色的 WCAG 2 对比度自动生成深浅色阶

颜色转换器 - HEX、RGB、HSL、OKLCH、CMYK 与对比度检查

为什么要转换颜色格式？

设计师和开发者会用到多种颜色格式：设计工具中的 HEX、CSS 中的 rgb() 和 hsl()、Tailwind CSS v4 等现代设计系统中的 OKLCH，以及印刷用的 CMYK。本工具可在它们之间即时转换。

所有转换都在浏览器中计算，没有任何网络请求。

无障碍配色，零追踪。

1
用任意 CSS 格式输入颜色：#3B82F6、rgb(59 130 246)、hsl(217 91% 60%)、oklch(...)、cmyk(...) 或 tomato 这样的颜色名，也可以用取色器选择。
2
需要透明度时调整不透明度滑块，所有格式会同步更新，包括 8 位 HEX 和 rgba。
3
复制需要的格式：HEX 用于设计交付，rgb() 或 hsl() 用于 CSS，OKLCH 用于现代设计令牌，CMYK 作为印刷的参考起点。
4
查看与白色和黑色文字的 WCAG 对比度，点击色板中的色阶可以浏览更浅或更深的变体。

设计师从 Figma 给出 #0EA5E9。转换为 hsl() 后，只需调整亮度就能做出 hover 和 active 状态。

正文文字在 WCAG AA 下需要至少 4.5:1 的对比度。在把品牌色用作白字按钮背景之前先检查一下。

把生成的色阶作为 Tailwind CSS 或设计系统中 50 到 900 调色板的起点。

把屏幕颜色转换为 CMYK 与印刷厂沟通。这只是近似值，实际印刷颜色取决于纸张和打印机配置文件。

RGB 和 HSL 有什么区别？+

两者描述的是同样的颜色。RGB 混合红、绿、蓝三色光；HSL 使用色相、饱和度和亮度，更便于人调整，比如把颜色调亮 10%。

为什么要用 OKLCH？+

OKLCH 在感知上是均匀的：与 HSL 不同，相同的亮度变化在人眼看来差异也相同。所有现代浏览器都支持，便于构建一致的色阶和深色主题。

需要多高的对比度？+

WCAG AA 要求普通文字 4.5:1，大号文字（约 24 px，或加粗 19 px）3:1。AAA 级别分别提高到 7:1 和 4.5:1。

CMYK 值准确吗？+

不完全准确。在没有色彩配置文件的情况下把屏幕 RGB 转为 CMYK，只能得到数学近似值。对品牌要求严格的印刷品，请向印刷厂索取打样或使用潘通色号。