OKLCH 颜色选择器OKLCH 颜色选择器
OKLCH 颜色转换器与选择器
输入任何颜色格式或使用滑块调整 OKLCH 值
OKLCH 控制
使用感知均匀控制调整亮度、色度和色相
70.0%
0.150
180.0°
调色板生成器
基于 OKLCH 感知均匀性生成和谐的调色板
当前颜色
OKLCH 颜色空间的交互式预览，包含色域边界
OKLCH 输出sRGB 兼容L: 70.0%C: 0.150H: 180.0°
多格式颜色转换器
在 OKLCH 和传统格式之间转换颜色，包含色域映射
oklch(70.0% 0.150 180.0)
#00bca2
rgb(0, 188, 162)
hsl(172, 100%, 37%)
CSS Color Module Level 4

为什么 OKLCH 是 CSS 颜色的未来

OKLCH 是来自 CSS Color Module Level 4 的革命性颜色空间，提供感知均匀性和广色域支持。与传统的 RGB 或 HSL 不同，OKLCH 确保所有色调的视觉感知一致，使颜色操作可预测且适用于现代 Web 开发。

感知均匀性

OKLCH 值的相等变化对应相等的视觉差异。与 HSL 中 50% 亮度的蓝色和黄色看起来截然不同不同，OKLCH 亮度值在所有色调中都是感知准确的。

广色域支持

访问 Display P3、Rec2020 及更多色域 - 比 sRGB 多 50% 的颜色。完美适配现代高端显示器，包括苹果设备和能显示更鲜艳颜色的 OLED 屏幕。

直观的颜色控制

亮度（0-100%）、色度（色彩饱和度）和色相（0-360°）提供直观的颜色操作。调整亮度而不影响饱和度，或改变色相同时保持一致的亮度。

更好的可访问性

可预测的亮度值使 WCAG 合规性更容易。您可以可靠地确保适当的对比度比例，无需反复试验，因为 OKLCH 亮度对应视觉感知。

平滑的颜色渐变

创建自然的颜色过渡，没有浑浊的灰色区域。OKLCH 渐变保持感知均匀性，产生比 sRGB 更美丽和视觉吸引力的颜色混合。

面向未来的技术

为 CSS Color 4 规范构建，在 Chrome、Safari、Firefox 和 Edge 中具有原生浏览器支持。与 CSS 相对颜色和现代颜色操作函数配合使用。

数学精度

基于 Björn Ottosson 的 Oklab 颜色空间（2020），旨在修复 CIE LAB 问题。提供改进的色域映射，被 CSSWG 推荐用于颜色操作。

人类可读格式

与十六进制或 RGB 不同，OKLCH 值直观易懂。您只需查看数字就能快速识别颜色属性，使颜色工作更高效和可预测。

设备独立性

可以编码人眼可见的任何颜色，不受特定显示器功能限制。浏览器自动将超出色域的颜色映射到最接近的可显示颜色。

Color Format Comparison

OKLCH 与传统颜色格式对比

了解 OKLCH 与传统颜色格式（如 RGB、HSL 和 HEX）的比较。理解这些差异将帮助您为项目做出更好的颜色选择。

OKLCH vs RGB/HEX
RGB 和 HEX 是机器可读的，但不是人类直观的。OKLCH 提供有意义的参数：oklch(70% 0.15 240) 立即可理解为中等亮度、适度饱和的蓝色。
Traditional Format
rgb(109, 162, 218) 或 #6da2da
OKLCH Format
oklch(70% 0.15 240)
✓ 人类可读的颜色值
OKLCH vs HSL
HSL 亮度在不同色调中不一致。HSL 中 50% 亮度的蓝色和黄色在亮度上看起来非常不同。OKLCH 确保所有颜色的感知亮度一致。
Traditional Format
hsl(240, 100%, 50%) vs hsl(60, 100%, 50%)
OKLCH Format
oklch(45% 0.31 264) vs oklch(97% 0.21 110)
✓ 感知均匀的亮度
色域覆盖
传统格式限制在 sRGB（可见颜色的 35%）。OKLCH 可以表达人眼可见的任何颜色，包括现代显示器的鲜艳 P3 颜色。
Traditional Format
限制在 sRGB 色域
OKLCH Format
完整的人类视觉色域
✓ 多 50% 的可用颜色
颜色操作
HSL 颜色修改可能产生意外结果。OKLCH 修改是可预测的 - 无论色调如何，增加 10% 亮度总是产生相同的视觉变化。
Traditional Format
不可预测的亮度变化
OKLCH Format
一致的视觉修改
✓ 可靠的颜色调整
Development Tools

OKLCH 转换与开发工具

在开发工作流程中使用 OKLCH 颜色的基本工具和资源。从转换实用程序到设计系统集成。

颜色转换
在 OKLCH 和传统格式（HEX、RGB、HSL）之间转换。我们的转换器处理色域映射并为旧浏览器提供回退值。
Key Features
批量转换色域映射浏览器回退
调色板生成
使用 OKLCH 的感知均匀性生成和谐的调色板。创建一致的亮度比例和不同色调的色度变化。
Key Features
单色比例互补色三色和谐
CSS 集成
生成 CSS 自定义属性和实用类。导出 OKLCH 颜色用于设计系统、Tailwind CSS 和现代 CSS 框架。
Key Features
CSS 变量实用类设计令牌
可访问性测试
使用 OKLCH 的可预测亮度测试颜色对比度比例。通过自动对比度检查和建议确保 WCAG 合规性。
Key Features
WCAG AA/AAA 测试对比度建议色盲模拟
浏览器支持
检查 OKLCH 浏览器兼容性并生成渐进增强代码。包括功能检测和回退策略。
Key Features
功能检测渐进增强Polyfill 选项
设计系统集成
将 OKLCH 颜色导出到流行的设计工具和框架。在设计和开发工作流程中保持颜色一致性。
Key Features
Figma 插件Sketch 集成Adobe CC 支持

常见问题

关于 OKLCH 和现代 CSS 颜色管理您需要了解的一切

1

什么是 OKLCH，为什么我应该使用它？

OKLCH 是来自 CSS Color Module Level 4 的现代颜色空间，提供感知均匀性和广色域支持。与 RGB 或 HSL 不同，OKLCH 确保值的相等变化对应相等的视觉差异，使创建一致和可访问的配色方案更容易。

2

OKLCH 与 HSL 相比如何？

OKLCH 提供真正的感知均匀性，意味着颜色在不同色调中对人类视觉显得一致。HSL 经常产生不均匀的亮度 - 例如，50% 亮度的黄色和蓝色看起来非常不同。OKLCH 的亮度值是感知准确的。

3

我可以在生产网站中使用 OKLCH 吗？

可以！OKLCH 在所有现代浏览器中都受支持（Chrome 111+、Firefox 113+、Safari 15.4+、Edge 111+）。您可以使用渐进增强和旧浏览器的回退颜色，确保所有用户环境的兼容性。

4

OKLCH 参数是什么？

OKLCH 使用三个参数：L（亮度 0-100%）、C（色度，从 0-0.37 的色彩饱和度）和 H（色相角度 0-360°）。这些比 RGB 值更直观，提供可预测的颜色操作。

5

OKLCH 支持广色域显示器吗？

是的！OKLCH 可以表示 Display P3、Rec2020 及更多色域的颜色。这允许您利用现代高端显示器，显示比传统 sRGB 多 50% 的鲜艳颜色。

6

如何将现有颜色转换为 OKLCH？

我们的转换器自动将任何格式（HEX、RGB、HSL）的颜色转换为 OKLCH。只需输入您现有的颜色，即可获得即时的 OKLCH 等效值，包括适当的色域映射和浏览器回退。

7

OKLCH 对可访问性更好吗？

是的！OKLCH 的感知亮度使确保适当的对比度比例变得更容易。您可以可靠地预测哪些颜色具有良好的可访问性，无需反复试验，使 WCAG 合规性更直接。

8

我可以用 OKLCH 生成调色板吗？

当然可以！OKLCH 的感知均匀性使其非常适合生成和谐的调色板。您可以用数学精度创建不同色调的一致亮度和色度比例。

9

如何处理浏览器回退？

使用渐进增强：首先指定回退颜色，然后是 OKLCH 值。例如：`color: #4a90e2; color: oklch(65% 0.15 240);`。不支持 OKLCH 的浏览器将使用回退。

10

OKLCH 和 LCH 有什么区别？

两者都使用亮度、色度和色相，但 OKLCH 基于较新的 Oklab 颜色空间，而 LCH 使用 CIE LAB。OKLCH 修复了蓝色中的色相偏移问题，总体上提供更好的感知均匀性。