168 个色彩空间

色彩空间

从到，从到，从年到年。
支持 CSS、着色器、WASM 和颜色转换查找表（LUT）。

开始使用

用于颜色转换的 JavaScript 包。单个空间的导入大小不到 1.5 kB，导入全部空间后可在任意两个空间之间转换。同样的转换可用 WASM 处理整幅图像，在 GLSL 或 WGSL 着色器中运行，或导出为 LUT 和 ICC 配置文件。智能体也可通过 MCP 服务器调用。

参考值测试每个色彩空间均经过测试
双向转换任意空间互转
小巧每个空间 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 168 × 167 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)

// values in the notations CSS already speaks – straight from the library
color: oklch(0.732 0.186 53);            // space.rgb.oklch(255, 128, 0)
color: color(display-p3 0.936 0.529 0.199);  // space.rgb.p3(255, 128, 0)
color: color(xyz-d65 0.49 0.367 0.045);      // space.rgb.xyz(…) / 100 – exact interchange

// spaces CSS lacks ship as ICC profiles or LUTs – see those tabs;
// every dossier's css tab writes the current color in copyable forms

// per-space metadata – sourced, ships as data.json
import data from 'color-space/data.json' with { type: 'json' }

const m = data.spaces.oklch
m.channels   // [{symbol, min, max, name}, …]
m.refs       // defining spec / paper links
m.year, m.by // 2020, 'Björn Ottosson'

// scalar or whole-buffer, zero-copy – a true WASM kernel
import space, { alloc } from 'color-space/wasm'

space.oklch.rgb(0.72, 0.16, 41)   // → [246, 125, 79]

const buf = alloc(n)              // n×3 Float64Array
space.rgb.oklch(buf)              // in place – 27 spaces

// every pair as a GLSL shader chunk
import { glsl } from 'color-space/gl'
import oklch from 'color-space/gl/oklch'

const src = glsl(oklch, 'rgb')
// → self-contained: vec3 oklch_rgb(vec3 c)
//   paste into any fragment shader, no uniforms

// an MCP server – convert · gamut · css · space · spaces · cube –
// so an agent calls verified conversions instead of guessing them
npx -y color-space mcp

// Claude Code
claude mcp add color-space -- npx -y color-space mcp
// VS Code
code --add-mcp '{"name":"color-space","command":"npx","args":["-y","color-space","mcp"]}'
// Claude Desktop · Cursor · .mcp.json
{ "mcpServers": { "color-space": { "command": "npx", "args": ["-y", "color-space", "mcp"] } } }

什么是色彩空间？

颜色的坐标系：坐标轴、取值范围，以及把数值与可测量的光联系起来的规则。同一种橙色可以写成 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()。

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

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

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

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

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

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

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

转换使用闭式公式，而非查找表近似，往返转换的误差在浮点噪声以内。少数例外都在相应位置注明：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 提供。

Pantone、NCS、RAL 在哪里？

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