# OKLCH 色彩转换器

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

> 标准页面: https://elysiatools.com/zh/tools/oklch-color-converter

- **分类:** Design

- **关键词:** oklch, 色彩空间, p3, gamut, 转换

## 概述

粘贴任意颜色（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()`。

## 输入项

- **颜色输入** (text): #3b82f6 · rgb(59 130 246) · hsl(217 91% 60%) · oklch(0.62 0.19 256)
- **输入格式** (select)
- **亮度 L (%)** (number): 0–100 (OKLCH 0–1)
- **彩度 C** (number): e.g. 0.19 (typically 0–0.4)
- **色相 H (°)** (number): 0–360
- **参考色域** (select)

## 适用场景

- 需要在 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 ...) 代码。

## 常见问题

### 什么是 OKLCH 色彩空间？

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

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

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

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

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

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

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

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

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

## 相关工具

- [色彩空间转换器](https://elysiatools.com/zh/tools/color-space-converter): 在 HEX、RGB、HSL、CIELAB 与 Display-P3 之间转换颜色，提供 CSS 输出与色域检查。
- [CMYK 颜色转换器](https://elysiatools.com/zh/tools/cmyk-converter): 在 HEX、RGB、HSL 和 CMYK 之间统一转换颜色。
- [图片配色提取器](https://elysiatools.com/zh/tools/image-color-palette-extractor): 上传图片后提取主色调，导出代码可用的色板片段，并检查对比度
- [分离互补色工具](https://elysiatools.com/zh/tools/color-split-complement): 生成分离互补色配色方案，使用基础色和其互补色两侧的相邻颜色创造和谐的对比效果
- [CSS 缓动与动画可视化器](https://elysiatools.com/zh/tools/css-easing-visualizer): 可视化 CSS cubic-bezier 缓动曲线，在位置/透明度/缩放上实时预览，选择预设并导出可复制的 CSS
- [Tailwind 色板同步器](https://elysiatools.com/zh/tools/tailwind-color-palette-sync): 输入一组 HEX,选择命名规则(色阶 50–950 / 单名 / 对象嵌套),自动生成 tailwind.config.ts 的 theme.extend.colors 片段,每个色阶同时给出 WCAG AA/AAA 对比等级,可选暗色模式。
- [Adobe RGB转CMYK转换器](https://elysiatools.com/zh/tools/adobe-rgb-to-cmyk-converter): 将Adobe RGB颜色值转换为CMYK格式用于印刷，支持alpha通道处理
- [Adobe RGB转HEX转换器](https://elysiatools.com/zh/tools/adobe-rgb-to-hex-converter): 将Adobe RGB颜色值转换为HEX格式用于网页设计

## 示例

- [颜色代码示例](https://elysiatools.com/zh/samples/color-code): 用于验证测试的各种格式颜色代码集合（Hex、RGB、HSL、命名颜色）
- [Web Python 图像处理示例](https://elysiatools.com/zh/samples/web-image-processing-python): Web Python 图像处理示例，使用 PIL/Pillow 包括读取、保存、缩放和格式转换
- [Android Java 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-java): Android Java 图像处理示例，包括图像读取保存、缩放和格式转换
- [Android Kotlin 图像处理示例](https://elysiatools.com/zh/samples/android-image-processing-kotlin): Android Kotlin 图像处理示例，包括图像读取保存、缩放和格式转换

## 相关内容

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