取色器和颜色代码转换

输入或选取颜色，查看它的十二种写法，生成配色方案和50-900色阶，并检查WCAG对比度。

如何复制颜色

1
选取颜色或粘贴色值
输入浏览器能识别的任何写法：十六进制代码、rgb()、hsl()、oklch()，甚至CSS颜色名。这里的主要控件是文本框，色块和取色吸管只是设置同一个值的快捷方式。
2
复制任意格式
十二种写法同时列出，每种旁边都有复制按钮。没有任何内容藏在下拉菜单里，所以HEX转RGB只要点一次，而不是三次。
3
把调色板导出为CSS或JSON
基础色、它的十级色阶和从图片中提取的颜色一起导出，可以是CSS自定义属性、Tailwind主题片段、SCSS变量或普通JSON。

为什么在OKLCH中计算

HSL有一个方便之处，也有一个严重缺陷。方便在于色相、饱和度和亮度是三个独立的数字，容易理解。缺陷在于它的亮度并不是你看到的亮度：hsl(60 100% 50%)是明亮的黄色，hsl(240 100% 50%)却是深蓝色，尽管两者都标着百分之五十。所以在HSL里旋转色相生成的配色方案，总有一个色块特别跳眼，另一个几乎看不见。OKLCH解决了这个问题。它的亮度符合人眼感知，只改变色相时，明暗真的保持不变。这个页面上的每个配色方案和每个色阶都在OKLCH中计算，然后再转换回sRGB输出。

对比度数字的含义

WCAG用两种颜色相对亮度的比值表示对比度，从相同颜色的1:1到白底黑字的21:1。正文文字需要4.5:1才能通过AA。大号文字（18.66像素及以上，或14像素粗体）以及图标、输入框边框等界面元素需要3:1。AAA要求正文达到7:1。这些不是风格偏好：它们决定了页面在阳光下或视力不佳时能不能看清。某对颜色不达标时，结论旁边的按钮会在OKLCH中逐步降低亮度，直到通过。这样你得到的是自己那个颜色最接近的合规版本，而不是另一种颜色。

从照片中提取调色板

添加一张图片，工具用中位切分法提取它的主色：像素点云反复沿变化最大的通道切分，每个切分出的区块取平均值，成为一个色块。然后用感知色差公式CIEDE2000去掉几乎重复的颜色，所以你得到的是六种不同的颜色，而不是同一片天空的六种深浅。图片先缩小到400像素，始终不会离开你的浏览器。

颜色和图片留在这个标签页里

每次转换都是在你自己的设备上用JavaScript做的算术，背后没有任何API调用。为提取调色板拖入的图片在本地解码、缩小和采样，不会上传，也不会存储。关闭标签页，什么都不会留下。

常见问题

为什么OKLCH比HSL好？

因为它的亮度和眼睛看到的一致。在HSL中，亮度值相同的两种颜色，看起来明暗可能相差很大，这会毁掉配色方案和色阶。OKLCH在设计上就是感知均匀的，所以相等的步长看起来也相等。

为什么CMYK值只能作参考？

真正的CMYK分色取决于印刷机、油墨和纸张，这些都由ICC配置文件描述。这里的值来自简单的算术换算，用来大致了解没问题，用于正式印刷就不对了。请向印刷厂索取按配置文件校正过的数值。

4.5:1这样的对比度怎么看？

它比较两种颜色的亮度。4.5:1是WCAG AA对正文的最低要求，3:1适用于大号文字和界面元素，7:1是AAA。数值越高越容易阅读；21:1是白底黑字。

取色吸管在Safari和Firefox里能用吗？

暂时不能。EyeDropper API是Chromium的功能。在其他浏览器中，按钮会提示这一点，并引导你改用图片：添加一张图片，从生成的调色板里取色。

怎么从照片中提取调色板？

打开设置，选择一张图片，再选择想要的颜色数量，从三种到十二种。主色会以色块显示，可以单独复制，也可以和其他内容一起导出。

我的图片会上传到别处吗？

不会。图片由浏览器解码，绘制到400像素的画布上并在那里采样。任何部分都不会传输，文件也从不写入存储。

50-900色阶有什么用？

这是设计系统和Tailwind需要的色调梯度：同一色相的十级，从接近白色到接近黑色。两端的彩度会逐渐降低，因为在很高或很低的亮度下，满饱和度会超出sRGB范围，转换回来会发灰发脏。