OKLCH 色彩转换器

使用 CSS Color 4 算法在 HEX、RGB、HSL、OKLCH、Display-P3 之间双向转换，提供感知亮度/彩度/色相读数、sRGB 与 Display-P3 色域检查及超域裁剪建议

粘贴任意颜色（HEX、rgb()、hsl() 或 oklch()），或直接设置 OKLCH 的 L/C/H。工具按 CSS Color 4 规范矩阵在所有现代色彩空间间转换，并给出：

  • HEX、sRGB 8 位、线性 sRGB、HSL、XYZ D65、OKLab 与 OKLCH 数值
  • Display-P3 表示
  • 该颜色是否在 sRGB 色域内、在 Display-P3 但超出 sRGB、还是两者之外
  • 当超出 sRGB 色域时，给出按降低彩度裁剪的最近色内 OKLCH 建议

为何选 OKLCH：其 L 通道匹配人眼感知亮度，C/h 为彩度与色相，因此调整亮度或饱和度不会改变色相（这点优于 HSL）。这使 OKLCH 成为构建感知均匀色板与无障碍色彩梯度的最佳空间。

输出为可直接复制的 CSS，包含 color(display-p3 ...) 与 oklch()。

示例结果

1 个示例

把品牌蓝转换为 OKLCH 并检查色域

查看鲜艳蓝色的 HEX/RGB/HSL/OKLCH/Display-P3 与色域诊断。

Color converter with OKLCH, P3, and gamut diagnostics.
查看输入参数
{ "colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto" }

关键信息

分类
设计与颜色
输入类型
text, select, number
输出类型
html
样本覆盖
1
支持 API
Yes

概览

OKLCH 色彩转换器是一款基于 CSS Color 4 规范的专业色彩工具，支持在 HEX、RGB、HSL、OKLCH 和 Display-P3 等现代色彩空间之间进行双向转换。它不仅能提供精确的感知亮度、彩度和色相读数，还能自动检测颜色是否超出 sRGB 或 Display-P3 色域，并在超域时提供基于彩度裁剪的最近色内 OKLCH 优化建议，帮助设计师和前端开发者构建感知均匀且兼容现代浏览器的色彩系统。

适用场景

  • •需要在 CSS 中使用现代 OKLCH 或 Display-P3 颜色格式，并确保其在旧版浏览器或 sRGB 屏幕上能正确降级时。
  • •设计感知均匀的 UI 色板或无障碍对比度梯度，避免 HSL 格式在调整亮度时产生的色相偏移。
  • •检查高饱和度的广色域颜色是否超出标准 sRGB 范围，并获取无损色相的裁剪建议。

工作原理

  • •输入颜色：在输入框中粘贴 HEX、rgb()、hsl() 或 oklch() 颜色代码，或者直接手动调节 L（亮度）、C（彩度）、H（色相）数值。
  • •空间转换：系统基于 CSS Color 4 规范矩阵，实时计算并输出对应的线性 sRGB、XYZ D65、OKLab、Display-P3 等多种色彩空间数值。
  • •色域诊断：自动检测当前颜色是否在 sRGB 色域内、在 Display-P3 但超出 sRGB，还是两者之外。
  • •裁剪优化：若颜色超出目标色域，工具会通过降低彩度（Chroma）的算法，计算出最接近且不偏色的色域内 OKLCH 推荐值。

使用场景

广色域适配：将现有的 sRGB 品牌色转换为 Display-P3 格式，为支持广色域的现代设备提供更鲜艳的视觉呈现。
无障碍色板设计：利用 OKLCH 的感知亮度通道，快速生成符合 WCAG 对比度标准的系统级渐变色板。
跨格式代码转换：在前端开发中快速将设计师给出的 HEX 或 HSL 颜色转换为标准的 CSS oklch() 或 color(display-p3 ...) 代码。

用户案例

1. 品牌蓝的广色域转换与色域检查

UI 设计师
背景原因
正在为一款 iOS 应用设计界面，希望将现有的品牌蓝色（#3b82f6）转换为 OKLCH 格式，并检查其在 Display-P3 和 sRGB 下的兼容性。
解决问题
需要获取精确的 OKLCH 数值，并确认该颜色是否在标准 sRGB 色域内。
如何使用
在“颜色输入”框中输入 #3b82f6，将“输入格式”设为“自动”，参考色域设为“自动”。
示例配置
{"colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto"}
效果
成功获取该蓝色对应的 oklch(0.62 0.19 256) 及 Display-P3 格式，并确认其完全在 sRGB 色域内，可安全用于所有屏幕。

2. 超域高亮绿的 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 代码。

用 Samples 测试

design
颜色代码示例
用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
title token color
sample

相关专题

面向网页与印刷的色彩空间转换工具
围绕网页到印刷的色彩空间转换整理的一组工具。
CSS 效果、配色板与设计 Token 生成工具
围绕CSS 视觉效果、配色构建与设计 Token 生成整理的一组工具。
网页无障碍审查与可读配色工具
在一个专题中检查 WCAG 问题、读屏顺序、低对比度区域、色觉缺陷风险和可读配色选择，适合网页与 UI 无障碍工作流。
颜色设计与颜色空间转换工具
在一个专题里比较颜色转换器、调色板生成器、和谐色工具、无障碍检查器和颜色调整工具，适合设计师和开发者。

常见问题

什么是 OKLCH 色彩空间？

OKLCH 是一种感知均匀的色彩空间，L 代表感知亮度，C 代表彩度，H 代表色相，调整亮度或彩度时色相不会发生偏移。

为什么转换后的颜色会显示“超出 sRGB 色域”？

因为 OKLCH 和 Display-P3 支持比标准 sRGB 更宽的色域，某些高饱和度颜色在普通 sRGB 屏幕上无法正常显示。

工具是如何处理超域颜色的？

工具会采用彩度裁剪算法，在保持感知亮度和色相不变的前提下，降低彩度以适配目标色域。

我可以直接在 CSS 中使用 OKLCH 吗？

可以，现代主流浏览器均已原生支持 CSS oklch() 函数，对于不支持的浏览器可以使用 sRGB 降级方案。

为什么 OKLCH 比 HSL 更适合做 UI 配色？

HSL 的亮度不符合人眼实际感知，而 OKLCH 的 L 通道完全匹配人眼感知亮度，更易于设计无障碍对比度。

API 文档

请求端点

POST /zh/api/tools/oklch-color-converter

请求参数

参数名 类型 必填 描述
colorInput text 否 -
inputFormat select 否 -
L number 否 -
C number 否 -
H number 否 -
clipMode select 否 -

响应格式

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

AI MCP 文档

将此工具添加到您的 MCP 服务器配置中： 

{
  "mcpServers": {
    "elysiatools-oklch-color-converter": {
      "name": "oklch-color-converter",
      "description": "使用 CSS Color 4 算法在 HEX、RGB、HSL、OKLCH、Display-P3 之间双向转换，提供感知亮度/彩度/色相读数、sRGB 与 Display-P3 色域检查及超域裁剪建议",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=oklch-color-converter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

你可以串联多个工具，比如：`https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`，最多20个。

如果遇见问题，请联系我们：[email protected]