在线OKLCH色板

OKLCH色板在线工具，解决传统HSL/HEX调色时亮度不均、色相漂移的问题，提供基于感知均匀色彩模型的色板构建、格式转换与色域可视化。

核心功能：拾色、转换与生成

官网首页直接提供Pick、Convert、Generate三大模块，支持在OKLCH、HSL、RGB、LCH、LAB、XYZ、HEX七种格式间互转；内置Gamut Visualizer可对比sRGB与Display-P3色域边界，并用CIE 1931 xy色度图展示当前颜色是否超出显示设备范围。

• Bulk Convert：批量转换颜色列表，支持CSV粘贴或逐行输入
• Saved：本地保存常用色板，无需账号即可存储
• Gradients：对比sRGB、OKLab、OKLCH三种插值路径的渐变效果，避免泥泞中点

适合谁用：设计系统与前端工程

面向需要构建可预测色阶的设计师与前端开发者。官网明确演示了OKLCH在按钮Hover、深色模式、品牌色扩展中的优势：固定Lightness仅调Hue可生成感知亮度一致的按钮组；调整Lightness生成色阶时不会出现HSL常见的紫色漂移或灰阶浑浊。

• CSS变量导出：直接复制oklch()值，支持@supports降级写法
• 大型色度计算：输入Lightness与Hue，自动算出当前色域（sRGB/P3）的大型Chroma，防止裁剪失真
• 浏览器支持检测：Chrome 111+、Safari 15.4+、Firefox 113+原生解析，全球支持率超92%

收费与限制

完全免费，无付费墙。所有处理在浏览器本地完成，未发布的品牌色不会上传服务器。

• 无登录要求：Saved功能依赖浏览器本地存储，清缓存会丢失
• 无中文界面：官网仅英文，但第三方中文指南（如oklch.org）提供完整教程
• 色域限制：sRGB内Chroma上限约0.37（因色相而异），Display-P3可达更高，超出屏幕色域的颜色会被自动裁剪

常见问题

Q1：oklch.fyi 的 Gamut Visualizer 怎么用？

A1：在官网首页点击Gamut Visualizer，输入oklch(L C H)值，页面会显示该颜色在CIE 1931 xy色度图中的位置，并用色块对比sRGB与Display-P3的色域边界，超出边界的部分会显示为灰色并提示将被裁剪。

Q2：在oklch.fyi 中如何批量转换颜色？

A2：进入Bulk Convert页面，每行输入一个颜色值（支持HEX、RGB、HSL、OKLCH等格式），点击Convert即可一次性输出所有格式的结果，结果可复制为CSV或直接复制单个值。

Q3：oklch.fyi 生成的色板能直接用于 Tailwind 吗？

A3：工具本身不直接导出Tailwind配置，但生成的OKLCH值可手动填入Tailwind的theme.extend.colors中；第三方工具如DevKitLab的调色板生成器支持直接导出Tailwind配置和CSS变量。

更多同类工具与网站,可在在线工具分类继续挑选。

信息核实于 2026年7月,具体以官网为准。