205 个色彩空间

色彩空间

新增：Figma 插件新增

从网页到印刷，从取色器到科研，从 1860 年到 2026 年。支持 CSS、着色器、WASM 和颜色转换查找表（LUT）。

使用方法

一个 JavaScript 包。同样的转换可用 WASM 处理整幅图像，可在 GLSL 和 WGSL 着色器中运行，也可导出为 LUT 和 ICC 配置文件。

  • 参考值测试每个色彩空间均经过测试
  • 双向转换任意空间互转
  • 小巧每个空间 0.4–1.5 kB
  • 公有领域CC0
import space from 'color-space'

space.rgb.oklch(255, 128, 0)      // → [0.732, 0.186, 53]
space.oklch.rgb(0.65, 0.25, 180)  // any of 205 × 204 pairs

space.oklch.name    // 'oklch'
space.oklch.range   // [[0,1], [0,0.4], [0,360]]

// one space only – tree-shaken, 0.4-1.5 kB
import oklch from 'color-space/oklch.js'
oklch.rgb(0.65, 0.25, 180)
什么是色彩空间？

颜色的坐标系：坐标轴、取值范围，以及把数值与可测量的光联系起来的规则。同一种橙色可以写成 rgb(255 128 0)、oklch(0.732 0.186 53) 和 XYZ [49, 36.7, 4.5]。调色板是挑选出的几种颜色；色彩空间则是一种能写下任何颜色的方式。

色彩模型与色彩空间有什么区别？

色彩模型规定用哪些分量描述颜色：RGB 使用三原色，HSL 使用色相、饱和度和明度，CMYK 使用四种油墨。色彩空间进一步确定原色、白点和编码曲线，使每组数值对应一个可测量的颜色。因此，rgb(255 0 0) 在 sRGB、Display P3 和 Adobe RGB 中表示不同的红色：模型相同，空间不同。

日常使用中，两者通常都称为色彩空间，CSS 的 color-mix(in hsl, …) 和本目录也沿用这一叫法。没有独立参照基准的模型，可以基于已有的色彩空间定义：这里的 HSL 和 HSV 均以 sRGB 为基础，与 CSS 一致。

我到底该用哪个空间？

取决于任务：

  • 存储和分享图像——sRGB，网页的默认空间；
  • 设计调色板和渐变——OKLCH，等距看起来就等距；
  • 对光做数学运算（混合、模糊、3D）——线性光 RGB；
  • 拍摄和调色视频——你的摄影机的 Log 空间，以 Rec. 709 或 Rec. 2100 交付；
  • 衡量两种颜色看起来差多少——CIELAB 或 DIN99o。

要按任务查看所有空间，请按 用途 给目录分组。

该用什么替代 HSL？

OKLCH。它保留了同样的三个控件——色相、彩度、明度——但它的明度可信：在 HSL 中，L=50 的黄色发出的光约是 L=50 的蓝色的 13 倍，L 相同并不意味着明亮度相同。在 OKLCH 中则相同。CSS 原生支持 oklch()。

如何把 hex 转换为 OKLCH？

在顶部的颜色输入框中输入或粘贴它，比如 #ff8000。页面上的每个空间都会立即显示这个颜色；在 OKLCH 中它是 0.732、0.186、53，CSS 写作 oklch(0.732 0.186 53)。每个档案的 css 标签页给出可复制的写法，在代码中则是 space.rgb.oklch(255, 128, 0)。

为什么我的渐变中间会发浑？

因为它们是在伽马编码的 sRGB 中计算的：在那里对两种颜色的数值取平均，得到的光比真实混合两束光更暗、更浊。在 OKLab 中插值就能避免；在 CSS 中写作 linear-gradient(in oklab, red, blue)。每个档案的 插值 一行都会把同一段混合在两个空间中并排画出，让你在选择前看清差别。

如何把 S-Log3 或其他摄影机 Log 转换为 Rec. 709？

打开你的摄影机所用的 Log 空间，例如 S-Log3、LogC4 或 Apple Log。在它的 转换 LUT 区块中，选择 Rec. 709 和你的剪辑软件：DaVinci Resolve、Premiere Pro、Final Cut Pro、OBS、ffmpeg 等。浏览器会生成 .cube 文件。这是不做色调映射的技术性转换：高于漫射白的高光会被裁切，风格化的影调（look）由你自己添加。

“超出色域”是什么意思？

指一个空间能描述、而另一个空间（或你的屏幕）无法显示的颜色。鲜艳的 Display P3 绿色在 sRGB 中不存在：一经转换，数值就会超出有效范围。图谱让这一点始终可见：当前颜色旁的标签会写出能容纳它的最小标准色域，超出范围的区段则以半透明叠在棋盘格上。

为什么印刷品看起来比屏幕暗淡？

屏幕发光；纸张反射油墨没有吸收的光。纸上油墨能达到的鲜艳颜色更少——饱和的 RGB 蓝、绿、红都落在其外——所以印出来更暗淡。印前处理会经由为该印刷机和纸张制作的 ICC 配置文件转换，例如欧洲铜版纸用 FOGRA39，美国用 GRACoL。本目录的 CMYK 是 CSS 在无配置文件时用于 device-cmyk() 的简单公式——数值正确，但不能当作印刷打样。

照片应该导出为哪个色彩空间？

用于网页和分享，选 sRGB：文件不带配置文件时，浏览器和手机都默认按它处理。只要配置文件保持嵌入，Display P3 就能在 Apple 和许多 Android 屏幕上保留更多鲜艳场景的色彩。冲印店要求时，交付 Adobe RGB。ProPhoto RGB 留给 16 位编辑：它的色域非常宽，8 位文件会出现色带。

转换精确吗？往返转换会丢失数据吗？

转换使用闭式公式，而非查找表近似，往返转换的误差在浮点噪声以内。少数例外都在相应位置注明：OSA-UCS 没有闭式逆变换；Munsell 等图册系统在已发布的级差之间插值；rgb 输出会被裁切到 sRGB 色域内——需要色域外的数值时，请经由 XYZ 或 线性 RGB 转换。

这些转换也经过核验：每个空间都链接到它所实现的论文或规范；凡与 colorjs.io 重叠之处，数值都与之对照测试；摄影机 Log 则与学院官方的 ACES 变换对照。formula-verification.md 记录了每项核对的依据——包括已发表论文本身出错的几处。

如果数值与其他库不同，请先比较取值范围：本库保留每个空间的惯用范围——RGB 0–255、Lab 明度 0–100、色相 0–360——而许多库一律压缩到 0–1。每张卡片都标出了范围；在代码中是 space.oklch.range。

其中哪些能用 CSS 书写？

原生支持 rgb()、hsl()、hwb()、lab()、lch()、oklab()、oklch()，另有 color() 用于 Display P3、Adobe RGB、ProPhoto、线性 sRGB 和 XYZ（D65 与 D50）。CSS 的 rec2020 是纯 2.4 伽马，而不是本目录中 Rec. 2020 所用的 BT.2020 曲线——同样的数值会指向不同的颜色。每个档案的 css 标签页都会以可复制的形式写出当前颜色；CSS 不支持的空间则改以 ICC 配置文件或 LUT 提供。

色盲人士眼中的颜色是什么样的？

打开 视图，在 色觉 中选择红色盲、绿色盲或蓝色盲。目录会按那种眼睛所见的样子重新绘制，方便你检查调色板中的颜色是否仍然可以区分。据 NEI 统计，约每 12 名男性中就有 1 人有色觉缺陷。

Pantone、NCS、RAL 在哪里？

它们是授权产品：颜色由所有者出售的数据定义，而不是由公开公式定义——因此没有可实现的公开数学，再分发其色表也不合法。数学公开的近亲则收录在此：Munsell（其 1943 年重新标定已是公开记录）和 RAL Design（直接在 CIELAB 中定义）。凡是数学曾经公开的体系，都属于这里；推荐尚未收录的体系。

已复制