Elysia Tools
导航
Design
· 最后更新：2026-06-18
使用 CSS Color 4 算法在 HEX、RGB、HSL、OKLCH、Display-P3 之间双向转换，提供感知亮度/彩度/色相读数、sRGB 与 Display-P3 色域检查及超域裁剪建议
详情
粘贴任意颜色（HEX、rgb()、hsl() 或 oklch()），或直接设置 OKLCH 的 L/C/H。工具按 CSS Color 4 规范矩阵在所有现代色彩空间间转换，并给出：
为何选 OKLCH：其 L 通道匹配人眼感知亮度，C/h 为彩度与色相，因此调整亮度或饱和度不会改变色相（这点优于 HSL）。这使 OKLCH 成为构建感知均匀色板与无障碍色彩梯度的最佳空间。
输出为可直接复制的 CSS，包含 color(display-p3 ...) 与 oklch()。
执行
填写表单、运行工具，并在同一页面查看结果。
案例
相关内容
工具使用指南
OKLCH 色彩转换器是一款基于 CSS Color 4 规范的专业色彩工具，支持在 HEX、RGB、HSL、OKLCH 和 Display-P3 等现代色彩空间之间进行双向转换。它不仅能提供精确的感知亮度、彩度和色相读数，还能自动检测颜色是否超出 sRGB 或 Display-P3 色域，并在超域时提供基于彩度裁剪的最近色内 OKLCH 优化建议，帮助设计师和前端开发者构建感知均匀且兼容现代浏览器的色彩系统。
背景
正在为一款 iOS 应用设计界面，希望将现有的品牌蓝色（#3b82f6）转换为 OKLCH 格式，并检查其在 Display-P3 和 sRGB 下的兼容性。
问题
需要获取精确的 OKLCH 数值，并确认该颜色是否在标准 sRGB 色域内。
如何使用
在“颜色输入”框中输入 #3b82f6，将“输入格式”设为“自动”，参考色域设为“自动”。
{"colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto"}结果
成功获取该蓝色对应的 oklch(0.62 0.19 256) 及 Display-P3 格式，并确认其完全在 sRGB 色域内，可安全用于所有屏幕。
背景
在 CSS 中使用了一个非常鲜艳的 P3 绿色 oklch(0.85 0.25 140)，但在普通 sRGB 显示器上颜色会失真。
问题
需要在不改变色相和感知亮度的前提下，找到最接近的 sRGB 安全色。
如何使用
输入 oklch(0.85 0.25 140)，将“参考色域”选择为“sRGB（裁剪适配）”。
{"colorInput": "oklch(0.85 0.25 140)", "inputFormat": "oklch", "clipMode": "srgb"}结果
工具检测到该颜色超出 sRGB，并自动计算出降低彩度后的安全值（如 oklch(0.85 0.18 140)），提供可直接复制的降级 CSS 代码。
OKLCH 是一种感知均匀的色彩空间，L 代表感知亮度，C 代表彩度，H 代表色相，调整亮度或彩度时色相不会发生偏移。
因为 OKLCH 和 Display-P3 支持比标准 sRGB 更宽的色域，某些高饱和度颜色在普通 sRGB 屏幕上无法正常显示。
工具会采用彩度裁剪算法，在保持感知亮度和色相不变的前提下，降低彩度以适配目标色域。
可以，现代主流浏览器均已原生支持 CSS oklch() 函数，对于不支持的浏览器可以使用 sRGB 降级方案。
HSL 的亮度不符合人眼实际感知，而 OKLCH 的 L 通道完全匹配人眼感知亮度，更易于设计无障碍对比度。