颜色转换器：HEX、RGB、HSL、HSV、HWB、CMYK、LAB 与 OKLCH

Q: 为什么 LAB 值和 Photoshop 不一样？

本工具遵循 CSS Color 4，使用 **D50** 白点并采用 Bradford 适应。有些应用显示的 LAB 是相对于 D65 的，因此数值略有不同。

在 HEX、RGB、HSL、HSV、HWB、CMYK、CIELAB 和 OKLCH 之间转换任意颜色，并显示其 CSS 名称以及在白色和黑色上的 WCAG 对比度。免费，在浏览器中运行。

颜色（任意格式）

取色

支持 HEX（#rgb、#rrggbb、#rrggbbaa）、rgb()/rgba()、hsl()/hsla()、hsv()、hwb()、cmyk()、lab()、oklch() 以及 148 个 CSS 颜色名称。

CSS 名称: dodgerblue

HEX#1e90ff

RGBrgb(30, 144, 255)

HSLhsl(209.6, 100%, 55.9%)

HSV / HSBhsv(209.6, 88.2%, 100%)

HWBhwb(209.6 11.8% 0%)

CMYKcmyk(88.2%, 43.5%, 0%, 0%)

CIELABlab(58.36% 0.89 -64.78)

OKLCHoklch(65.2% 0.1901 253.21)

白色背景对比度

3.23:1

AA 普通文本 (4.5:1) ✗AA 大号文本 (3:1) ✓AAA 普通文本 (7:1) ✗

黑色背景对比度

6.48:1

AA 普通文本 (4.5:1) ✓AA 大号文本 (3:1) ✓AAA 普通文本 (7:1) ✗

CIELAB 按 CSS Color 4 使用 D50 白点。数值仅在显示时取整，换算使用完整精度。CMYK、HSV 和对比度会忽略透明度。

什么是颜色转换器？

以任意常见写法粘贴一个颜色，即可一次得到八种颜色模型的结果：HEX、RGB(A)、HSL(A)、HSV、HWB、CMYK、CIELAB 和 OKLCH。工具还会显示与之匹配的 CSS 颜色名称（如果存在完全一致的名称），以及该颜色在白色和黑色上的 WCAG 对比度。

如何使用颜色转换器

在颜色（任意格式）中键入或粘贴颜色，例如 #1e90ff、rgb(30 144 255)、hsl(210 100% 56%)、oklch(65% 0.19 253) 或 tomato，也可以用取色器选择。
在结果列表中查看转换后的值；每一行都有自己的复制按钮。
查看 CSS 名称以确认是否有完全匹配的命名颜色，并通过白色背景对比度和黑色背景对比度卡片查看 WCAG AA 和 AAA 的结果。
如果 LAB 或 OKLCH 的值超出 sRGB 范围，会有警告提示它已被裁剪到最接近的可显示颜色。

示例

输入

#ff0000

输出

rgb(255, 0, 0) · hsl(0, 100%, 50%) · hsv(0, 100%, 100%) · hwb(0 0% 0%) · cmyk(0%, 100%, 100%, 0%) · lab(54.29% 80.8 69.89) · oklch(62.8% 0.2577 29.23) · CSS name: red

在白色上的对比度为 3.99:1，因此纯红色对普通文字不满足 WCAG AA。

何时使用颜色转换器

在设计工具与 CSS 之间移动颜色、需要 OKLCH 这样的感知模型来构建调色板，或快速检查文字对比度时使用。不要把 CMYK 输出用于专业印刷打样：真正的印刷需要 ICC 色彩配置文件，而这个简单公式并不考虑它。

颜色转换器的工作原理

每个输入都会被解析为经过伽马编码的 sRGB 通道加透明度。HSL、HSV 和 HWB 是 sRGB 的标准圆柱坐标变换；CMYK 采用简单的与设备无关的公式 K = 1 − max(R,G,B)。对于 LAB，sRGB 值先线性化，转换为 CIE XYZ（D65），再用 Bradford 矩阵做色适应到 D50，最后得到 CIELAB，与 CSS Color 4 完全一致。OKLCH 在线性 sRGB 上使用 Björn Ottosson 的 OKLab 矩阵。数值仅在显示时取整（RGB 为整数，HSL/HSV/HWB/CMYK 保留一位小数，LAB 保留两位）。对比度遵循 WCAG 2.x 的相对亮度：(L1 + 0.05) / (L2 + 0.05)。