颜色格式转换
Colour Format Converter
在 HEX、RGB、HSL、HWB、LAB、LCH 和 OKLCH 之间换算同一个颜色，并给出最接近的已知色名。
读取任何 CSS 颜色——十六进制、`rgb()`、`hsl()`、`lab()`、`oklch()`、关键字——并同时以每种记法显示它，放在浅色和深色底上。它还会说明一个颜色何时超出 sRGB，以及最近的可达颜色是什么。
按 HEX 读的 · 最接近的关键字是 mediumslateblue（#7b68ee），ΔEok 0.050
在浅色上
用这个颜色写的字
旁边的正文，用来比大小。
在深色上
用这个颜色写的字
旁边的正文，用来比大小。
| HEX | #5b6cff每个设计工具复制给你的就是这个。 | |
|---|---|---|
| RGB | rgb(91 108 255)显示器收到的通道值，原样。 | |
| HSL | hsl(233.78 100% 67.84%)sRGB 换个排法而已。它说的“明度”不是感知上的明度。 | |
| HWB | hwb(233.78 35.69% 0%)同一个色相环，换成色相加白加黑来说。 | |
| LAB | lab(50.851% 29.157 -76.75)CIE L*a*b*，按 CSS 的规定以 D50 为参照。 | |
| LCH | lch(50.851% 82.102 290.8)L*a*b* 的极坐标形式。彩度大约能到 150。 | |
| OKLAB | oklab(60.153% 0.0114 -0.2164)直角坐标的 OKLab。这里的欧氏距离就是感知上的差距。 | |
| OKLCH | oklch(60.153% 0.2167 273.01)值得当默认的就是它——看下面那段。 |
为什么 OKLCH 值得当默认
- 插值之后颜色还是鲜的。 在 sRGB 里把两个颜色用直线连起来，路径会从中性轴附近经过，所以蓝到黄的渐变中间会发灰。在 OKLCH 里路径是绕着色相环走的，中间点的彩度保住了。这是肉眼能看到的最大差别，也是 CSS 后来加上
in oklch的原因。 - 明度真的就是明度。 HSL 里两个
50%的颜色，看上去的亮度能差到三倍——hsl(60 100% 50%)是黄色，hsl(240 100% 50%)是藏青。OKLCH 的 L 是按感知校准过的，所以在它上面搭出来的 50–950 色阶步子均匀，中间不会突然掉一截。 - 距离就是差别。 OKLab 里的欧氏距离是个能用的 ΔE，上面那个“最接近的颜色名”能给出像样的答案就靠它；换成 RGB 距离，深紫色会被叫成
darkslateblue。
这个颜色是 L 60.2%、C 0.2167、H 273.0°。固定 L 和 H、只动 C，得到的是同色系的浓淡梯度；固定 L 和 C、动 H，得到的是一组和谐的配色。这两件事在 HSL 里都做不成。
怎么用
粘贴颜色
任何记法。输入框下面那行会说明它被按哪种记法读取，并给出最近的 CSS 关键字和到它的感知距离。
两种底都看
没有它所在的表面，一个颜色只说明了一半。在白底上显得笃定的中蓝，在深色底上显得没有光，而没有哪种记法能显示这一点。
复制你需要的记法
每一行有自己的复制按钮，和一行说明那个色彩空间是干什么用的。和你输入匹配的那一行会高亮。
常见问题
为什么页面一直推荐 OKLCH？
三个可验证的理由。插值保持饱和，所以蓝到黄的渐变中间不会变灰。它的明度是感知性的，所以 50–950 的色阶各级均匀。而且它里面的距离就是感知差异，这才让“最近的命名颜色”给出合理的答案。
“超出 sRGB”对我的颜色意味着什么？
意味着精确的这个颜色需要低于 0 或高于 1 的通道值，显示器产生不了。色块显示它能显示的最近颜色——保持明度和色相、降低彩度找到的，只放弃屏幕本来就没有的那部分饱和度。P3 显示器能显示更多。
HSL 的明度和 OKLCH 的明度是一回事吗？
不是，这正是陷阱。`hsl(60 100% 50%)` 是亮黄，`hsl(240 100% 50%)` 是藏青——同样的“明度”，感知亮度差三倍。HSL 是 sRGB 的重新排列，不是感知空间。
LAB 和 OKLAB 一样吗？
想法相同的不同空间。CIE L*a*b* 出自 1976 年，有已知的不均匀性，尤其在蓝色区域，改变明度时会出现色相偏移。OKLab 专门针对更新的数据拟合以修正这一点，所以它才是值得用的那个。
可以从这些接进来
接下来
这些工具吃得下当前工具的产出，结果可以直接送过去。
印刷色转换
Print Colour Converter
用教科书公式把 RGB 转成 CMYK（不带 ICC 和纸张特性），并标出四色印刷会印得发闷的高饱和颜色。
颜色拾取器
Colour Picker
在 OKLCH 色板上选色，也可以用屏幕吸管或从上传的图片里取色，并按任意表示法复制出来。
色阶生成
Tint & Shade Scale
从一个颜色生成 50–950 的明度色阶，步进在感知上均匀，可直接当设计变量用。
Tailwind 最接近色查找
Nearest Tailwind Colour
为任意颜色找出最接近的 Tailwind 调色板取值，并给出感知色差。
对比度检测
Contrast Checker
按 WCAG 2 和 APCA 给前景色和背景色这一对打分，并推荐最接近的能通过的颜色。
配色方案生成
Palette Generator
从一个基准色出发，按互补、三分和邻近色规则生成协调的配色。