OKLCH 转换器与调色板生成器

在 OKLCH、十六进制、RGB 与 HSL 之间转换，并构建观感均匀的色阶——色相变化时，明度与彩度保持不变。超出 sRGB 的颜色通过降低彩度来映射，而不是逐通道裁剪：区别就在于你的紫色还是不是紫色。

十六进制、rgb()、hsl() 或 oklch()。 

    


    

    

      
为什么 OKLCH 里的明度真的有意义

      
在 HSL 里，明度固定而改变色相，颜色看上去的明暗也会变：50% 的黄比 50% 的蓝亮得多——所以无论你多么小心地取值，HSL 色阶看上去总是不均匀。OKLab 是根据感知数据拟合出来的，它的明度轴与人眼的实际感受一致。固定 L 与 C、只旋转 H，每一块颜色的视觉分量都相同——这正是要在这里而不是在 HSL 里做调色板的全部理由。

      
色域映射才是关键

      
很多 OKLCH 值在 sRGB 里根本没有对应色，而最想当然的做法是把每个通道都夹回取值范围内。那会让色相明显偏移：一个鲜艳的紫色逐通道裁剪之后会往蓝色偏。保持明度与色相、只降低彩度，颜色看上去还是原来那个颜色，被拿掉的只是屏幕本就显示不出的那部分饱和度。本页使用 CSS Color 4 的算法——对彩度做二分，当裁剪结果与降彩度结果之差小到恰好察觉不出时，就接受裁剪结果。

      
已与参考实现比对

      
这些换算与一份独立实现在四千种颜色的网格上做过比对：明度与彩度的差异在百万分之一以内，色相在万分之一度以内，每个十六进制值都能精确往返。色域映射用同样的方法对四百八十种超出色域的颜色做了检查，最差的一例也落在 255 分之一以内。会读 OKLCH 的人一眼就能看出矩阵有没有写错，所以把验证方式写出来是值得的。

      
如何使用输出结果

      
这些自定义属性用 OKLCH 写出，旁边的注释里放着对应的十六进制值——因为代码评审时你想同时看到的正是这两个：构建产物里真正发布的那个值，和可以随手粘到别处去的那个值。目前仍在使用的浏览器都支持 OKLCH 语法；如果你还要兼容不支持它的浏览器，那条注释就是你的回退方案。


      
常见问题解答

      

        
彩度为什么封顶在 0.4？
因为 sRGB 里根本没有颜色接近它。sRGB 中最饱和的颜色是蓝色，约为 0.313，而滑块特意越过这个值，好让你看到什么落在色域之外、以及它会被映射回哪里。

        
这里说的恰可察觉差异是多少？
OKLab 中 0.02 的色差，也就是 CSS Color 4 采用的阈值。低于它，裁剪与降彩度看不出区别，于是算法取裁剪后的颜色，把多出来的彩度留住。

        
支持 P3 或 Rec2020 吗？
暂时不支持。这里的一切都以 sRGB 为目标，色域提示指的也是它。更宽的色域需要各自的基色和另一套矩阵。

        
这些内容会被发送出去吗？
不会。所有换算都在这个页面里完成。

      

      
由 GO AI 团队打造。 CSS clamp() 计算器 · WCAG 对比度检查器 · 全部免费工具