颜色转换

实现 RGB(A) 到 HSL、CMYK、HSV 等格式的转换

文档

  该应用是一个颜色转换器,可以方便地将 RGB(A)/HEX(A)/HSL(A) 转换为其他颜色空间格式。

  输入任意受支持的颜色写法(如 #3366ff、color(display-p3 0 1 0)、oklch(0.7 0.3 200)),即可得到它在各个色彩空间下的表示,点击结果即可复制。带透明度的颜色会输出带 a 的格式(如 rgba、hsva、cmyka),末尾多出的那个数值就是透明度 alpha(0~1)。

  以下为各种颜色空间/表示的介绍,名称即输出的格式名,统一使用小写:

  • rgb(a): sRGB 色彩空间,通道为 0~255 的整数,a 为透明度 0~1。浏览器默认的色彩空间,所有 CSS 颜色最终都会归到它。
  • hex(a): rgb(a) 的十六进制写法,即 #RRGGBB/#RRGGBBAA,也支持 #RGB/#RGBA 简写,最常用于代码与设计稿。
  • hsl(a): 色相 H(0~360°)、饱和度 S、亮度 L。改变 H 时色相旋转、S/L 控制鲜艳程度与明暗,是最直观的调色方式之一,属于 sRGB 的极坐标表示。
  • hsv(a): 色相 H、饱和度 S、明度 V(也叫 HSB)。与 hsl 的区别是 S 以当前最亮的通道为基准,绘图软件取色板用的通常是它。
  • cmyk(a): 青 C、品红 M、黄 Y、黑 K,减色模型,用于印刷。它依赖具体的油墨与纸张,属于设备相关色彩,由屏幕色换算而来只是近似值(CSS 中对应 device-cmyk())。
  • hwb: 色相 H、白度 W、黑度 B,可以理解为「在某个纯色里掺入多少白与黑」。W+B 超过 100% 时按比例归一,比 hsl 更贴近调浅/调深的直觉。
  • lab: CIE Lab,L 为亮度,a、b 分别为绿-红、蓝-黄两个对立轴。与设备无关且感知均匀,数值差异大体对应人眼感觉到的差异;CSS 的 lab() 以 D50 为白点。
  • lch: lab 的极坐标形式,L 亮度、C 彩度、H 色相。相比直接调整 a/b,更容易做到只改彩度而不改色相。
  • oklab: Oklab,对 CIE Lab 的改进(Björn Ottosson 提出),修正了 Lab 在蓝色区域的偏移,感知均匀性更好,适合明暗调整与渐变插值。
  • oklch: oklab 的极坐标形式,是目前做「保持色相/彩度」调整、生成和谐色阶最常用的色彩空间。
  • srgb: 写作 color(srgb ...),与 rgb() 是同一个色彩空间,但通道用 0~1 的小数表示,是 CSS 中显式指定色彩空间的通用写法。
  • srgb-linear: 线性光 sRGB,即去掉 sRGB 的 gamma 传递函数后的数值。做物理正确的混色与插值(渐变、模糊等)时用它会更准确。
  • display-p3: Display P3,苹果设备的广色域(P3 原色 + sRGB 传递函数),色域比 sRGB 大约 25%,能表现出更鲜艳的绿和红。
  • display-p3-linear: 线性光 Display P3,即 display-p3 去掉传递函数后的数值,同样用于线性混色。
  • a98-rgb: Adobe RGB (1998),摄影与印刷流程中常见,青绿方向上的色域略大于 sRGB。
  • prophoto-rgb: ProPhoto RGB(ROMM RGB),色域极大,几乎涵盖全部可见色;其原色位于白点之外,数值容易超出 0~1,注意溢出。
  • rec2020: Rec. 2020(BT.2020),4K/8K 超高清电视标准,色域比 Display P3 更大,HDR 内容常用。
  • xyz: CIE XYZ(D65 白点,等价于 CSS 的 xyz-d65),描述人眼实际接收到的颜色,与设备无关,是所有颜色换算的中枢;数值本身并不直观,一般作为转换的中间量。
  • xyz-d50: CIE XYZ(D50 白点),印刷与 ICC 流程中的常用白点,与 D65 之间相差一个色适应变换。