0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
配置
可在所有格式之间转换颜色：HEX、RGB、HSL、HWB、HSV、LAB、LCH、OKLab、OKLCh、XYZ D50/D65、Display P3、A98、ProPhoto、Rec. 2020 和 CMYK。 包含一个交互式可视选择器。
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
结果
基础
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS 第 3 级
hsl(h s% l%)
CSS 第 4 级
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
其他
hsv(h s% v%)
印刷
cmyk(c% m% y% k%)

工作原理

同一种颜色可以有多种写法。HEX（#RRGGBB）和 RGB 描述红、绿、蓝的混合；HSL 和 HSV 用色相、饱和度和明度描述，更便于选择变体；而 CMYK 面向印刷。

此工具接受 HEX、RGB 或 HSL 颜色，并即时将其转换为所有格式，包括 HWB、LAB、LCH、OKLab、OKLCh 等现代 CSS 第 4 级色彩空间以及 color() 函数（Display P3、Rec. 2020、ProPhoto）。

可视化选择器和数值控件让你调整颜色并同时查看所有值的变化。一切都在你的浏览器中计算。

示例

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)纯红色：红色通道最大，绿色和蓝色为零。
#3b82f6rgb(59 130 246)每对十六进制数字（3b、82、f6）是某个通道的 0-255 值：59、130 和 246。
#ffffffrgb(255 255 255) · hsl(0 0% 100%)白色三个通道都为最大；在 HSL 中明度为 100%。

使用场景

  • 将设计规范中的 HEX 颜色转换为你的 CSS 或框架所需的 RGB 或 HSL 格式。
  • 获取屏幕颜色的 CMYK 等价值，以准备印刷材料。
  • 在调整宽色域调色板时探索现代色彩空间（OKLCh、Display P3）。

常见问题

什么是 alpha 通道，它在 HEX 中如何书写？

alpha 是不透明度，从 0（透明）到 100%。在 HEX 中它作为末尾的一对数字添加：#RRGGBBAA。例如，#ff000080 是 50% 不透明度的红色。

HSL 和 HSV 有什么区别？

两者都使用色相和饱和度，但第三个轴不同：HSL 使用明度（100% 为白色），HSV 使用明度/值（100% 为最浓的颜色）。HSL 通常更便于生成浅色和深色。

为什么会有 OKLab 和 OKLCh？

它们是感知均匀的色彩空间：值之间相等的距离对应相似的视觉差异。它们比 HSL 产生更自然的渐变和明度调整，CSS 从第 4 级起支持它们。

它显示的 CMYK 用于印刷准确吗？

这是一个近似的参考转换。实际印刷结果取决于色彩配置文件、油墨和纸张，因此专业工作最好使用印刷厂的 ICC 配置文件。

另请参阅