OKLCH 颜色编辑器

怎么用

1. 拖动亮度 L滑杆（0 为黑，1 为白）、彩度 C滑杆（从灰到艳丽）与色相 H滑杆。
2. 需要半透明时拖动不透明度滑杆，它会以斜杠值写进 oklch() 字符串。
3. 实时查看预览色块，并读取 CSS、Hex 与 RGB 输出；示例文字颜色会自动切换以保证对比。
4. 点击生成 CSS，复制 oklch() 声明及其 sRGB 回退值。

常见用途

• 可访问调色板 —— 锁定亮度只转色相，让每个颜色的对比度保持接近。
• 渐变调平 —— 选同 L 的颜色做渐变，过渡比 HSL 均匀得多。
• 设计变量 —— 为组件库输出一条带 hex 与 rgb 回退的 oklch() 声明。
• 宽色域核查 —— 看清某个艳丽颜色在何处越出 sRGB 色域并被收敛。

常见问题

问：OKLCH 与 HSL 有什么区别？ 答：OKLCH 感知均匀：同样的 L 变化在任何色相下看起来都同样明亮；HSL 中相同明度的黄色总比蓝色显亮。

问：色域警告是什么意思？ 答：你选的彩度在 sRGB 里无法复现，预览已自动收敛到最接近的可复现颜色。oklch() 字符串仍按你选的值声明，P3 显示屏可以显示完整颜色。

问：oklch() 可以直接上线吗？ 答：当前浏览器都支持 CSS Color 4 的这个函数；工具同时输出 hex 与 rgb 回退，供旧引擎或只认 sRGB 的环境使用。

问：L、C、H 分别代表什么？ 答：L 是 0 到 1 的亮度，C 是从 0 起向上的彩度，H 是以度为单位的色相角度。向 sRGB 的转换通过该色彩空间定义的 OKLab 矩阵完成。