什么是 OKLCH？
OKLCH 是 OKLAB 色彩空间的圆柱形表示，由 Björn Ottosson 于 2020 年设计。它代表 OK 亮度、色度和色相 - 与传统的 RGB 或 HSL 系统相比，提供了更直观的颜色处理方式。
与面向设备的 RGB 或具有感知缺陷的 HSL 不同，OKLCH 建立在人类视觉原理之上。它确保相同的数值变化产生相同的感知变化，使其成为创建和谐配色方案和无障碍设计的理想选择。
OKLCH 颜色选择器和转换器
理解 OKLCH：网页颜色的未来
关于这个正在革新网页设计的感知均匀色彩空间的全面指南
为什么选择 OKLCH 而不是 RGB 和 HSL？
RGB 的局限性
- • 设备相关的值
- • 非直观的颜色混合
- • 难以创建变体
- • 无障碍计算效果差
HSL 的缺陷
- • 虚假的感知均匀性
- • 亮度随色相变化
- • 饱和度行为不可预测
- • 仅限于 sRGB 色域
OKLCH 的优势
- • 真正的感知均匀性
- • 跨色相的一致亮度
- • 可预测的颜色关系
- • 广色域支持（P3、Rec2020）
感知均匀性的力量
感知均匀性意味着相同数值的变化无论起始颜色如何都会产生相似的感知变化。这对于以下方面至关重要：
设计一致性
创建保持相同感知亮度的颜色变体，对于悬停状态、禁用状态和主题变化至关重要。
无障碍性
通过使用真实的感知亮度值准确预测对比度并确保符合 WCAG 标准。
超越 sRGB：广色域颜色
现代显示器支持远超传统 sRGB 的色域。OKLCH 无缝处理这些扩展的色彩空间：
sRGB
所有显示器支持的标准色域
P3
25% 更多颜色，常见于苹果设备
Rec2020
面向未来的 HDR 显示器色域
使用 OKLCH，您可以指定充分利用现代显示器的颜色，同时为标准屏幕提供自动回退。
OKLCH 实践
创建调色板
/* 基础颜色 */
--primary: oklch(0.6 0.2 250);
/* 较浅变体 - 只需增加 L */
--primary-light: oklch(0.8 0.2 250);
/* 较深变体 - 只需减少 L */
--primary-dark: oklch(0.4 0.2 250);
/* 互补色 - 色相加 180 */
--secondary: oklch(0.6 0.2 70);无障碍优先设计
/* 确保 WCAG AA 对比度 */
--text-on-light: oklch(0.3 0 0); /* L=0.3 用于深色文本 */
--text-on-dark: oklch(0.9 0 0); /* L=0.9 用于浅色文本 */
/* 一致的感知亮度 */
--success: oklch(0.7 0.15 140); /* 绿色 */
--warning: oklch(0.7 0.15 90); /* 黄色 */
--error: oklch(0.7 0.15 30); /* 红色 */浏览器支持与迁移
当前支持
OKLCH 在所有现代浏览器中都得到支持：
- • Chrome 111+（2023 年 3 月）
- • Firefox 113+（2023 年 5 月）
- • Safari 15.4+（2022 年 3 月）
- • Edge 111+（2023 年 3 月）
迁移策略
/* 为旧浏览器提供回退 */
.element {
/* 旧浏览器的回退 */
background-color: rgb(0, 128, 255);
/* 现代浏览器将使用这个 */
background-color: oklch(0.65 0.2 240);
}
/* 或使用 @supports */
@supports (color: oklch(0 0 0)) {
.element {
color: oklch(0.7 0.15 180);
}
}未来是感知均匀的
OKLCH 代表了我们如何思考网页颜色的范式转变。通过与人类感知而非设备能力对齐，它实现了：
- ✓ 更直观的颜色选择和操作
- ✓ 通过可预测的亮度实现更好的无障碍性
- ✓ 与显示技术同步发展的面向未来的设计
- ✓ 跨不同色相的一致颜色关系
立即使用上方的颜色选择器开始使用 OKLCH，体验感知均匀性在您的设计中带来的差异。
常见问题
OKLCH：常见问题解答
了解更多关于 OKLCH 以及如何有效使用此颜色选择器的信息。
1
什么是 OKLCH，为什么应该使用它？
OKLCH 是一种感知均匀的色彩空间，使创建和谐的调色板变得更容易。与 RGB 或 HSL 不同，在 OKLCH 中调整亮度可以在所有色相中保持一致的感知亮度，使其成为设计系统和无障碍性的理想选择。
2
什么是 P3 和 Rec2020 色彩空间？
P3 和 Rec2020 是可以显示比标准 sRGB 更鲜艳颜色的广色域。P3 通常在现代 Apple 设备和高端显示器上支持，而 Rec2020 为未来的显示器提供更广泛的颜色范围。
3
为什么某些颜色显示为"不可用"？
当您选择高饱和度的颜色时，它们可能超出显示器可以显示的颜色范围。选择器会显示一个回退颜色，在您显示器的能力范围内近似目标颜色。
4
如何在 CSS 中使用 OKLCH 颜色？
您可以在现代浏览器中直接使用 OKLCH 颜色，语法为：color: oklch(0.7 0.1 180)。为了支持旧浏览器，请始终提供 RGB 或 HEX 格式的回退颜色。
5
色度和饱和度有什么区别？
OKLCH 中的色度以感知均匀的方式表示颜色的丰富度或强度。与 HSL 饱和度不同，色度值在不同亮度级别保持一致，使颜色操作更可预测。
6
我可以保存或收藏特定颜色吗？
是的！每次颜色选择都会自动更新 URL 哈希。您可以收藏任何颜色或与他人分享 URL 以加载完全相同的颜色配置。
7
"回退"按钮有什么作用？
当您选择超出显示器能力的颜色时，选择器会显示目标颜色（如果您的显示器支持）和可显示的回退版本。"回退"按钮让您使用所选颜色的可显示近似值。
8
为什么有时会有两个颜色预览块？
当您选择 sRGB 色彩空间之外的颜色时，选择器会显示两个预览：左侧显示实际颜色（如果您的显示器支持），右侧显示将在标准显示器上使用的 sRGB 回退。
9
如何处理透明颜色？
使用 Alpha 滑块控制透明度。透明度通道显示在棋盘格背景图案上，透明度值会自动包含在支持它的颜色格式中（如 rgba 和带透明度的 oklch）。
10
我可以直接输入颜色值而不是使用滑块吗？
当然可以！您可以在格式输入字段中输入或粘贴任何格式（OKLCH、HEX、RGB 或 HSL）的颜色。选择器会自动转换并更新所有值。您甚至可以粘贴 CSS 颜色声明，如 'color: #ff0000;'。
11
如何知道我的显示器是否支持 P3 或 Rec2020？
选择器会自动检测您显示器的能力。如果您看到"此显示器不支持 P3"或类似消息，您的显示器不支持这些更广的色域。大多数现代 Apple 设备和高端显示器支持 P3。
12
创建无障碍调色板的最佳工作流程是什么？
首先设置所需的色相，然后调整亮度以满足 WCAG 对比度要求。OKLCH 的感知均匀性意味着具有相同亮度值的颜色将具有相似的感知亮度，使创建无障碍的颜色组合变得更容易。