oklch-skill

OKLCH 颜色

OKLCH 是一种感知均匀的颜色空间，其中的数值确实符合直觉。CSS 中的大多数颜色问题——调色板失效、对比度不达标、色相漂移——都源于使用了与人眼感知方式不匹配的颜色空间。OKLCH 修正了模型，让工具发挥作用。如需互动探索，请访问 oklch.fyi。

快速参考

类别	适用场景	参考
转换	将 Hex/rgb/hsl 转换为 oklch	color-conversion.md
调色板	生成色阶、多色相配色、深色模式	palette-generation.md
对比度	APCA/WCAG 检查、修复对比度不达标问题	accessibility-contrast.md
色域与 Tailwind	P3 回退方案、@theme 色阶、色域钳制	gamut-and-tailwind.md

为什么选择 OKLCH

• 感知均匀。 相同的 L 增量 = 相同的亮度变化。oklch(0.5 ...) 看起来是中间亮度。HSL 的 lightness: 50% 会随色相剧烈变化。
• 色相稳定。 HSL 蓝色会在亮度变化时偏向紫色。OKLCH 色相在整个亮度范围内保持不变。
• 色度独立。 色度是衡量颜色鲜艳程度的绝对指标，不受亮度影响。HSL 饱和度则会受到影响。
• 色域有限。 并非所有 oklch 值都能映射为可显示的 sRGB 颜色。某些色相的高色度值会发生裁切——必须考虑色域。

OKLCH 语法

oklch(L C H)
oklch(L C H / alpha)

通道	范围	说明
L（亮度）	0–1	0 = 黑色，1 = 白色。感知均匀。
C（色度）	0–~0.4	鲜艳程度。0 = 灰色。最大值取决于 L 和 H。
H（色相）	0–360	以度为单位的色相角。
alpha	0–1	可选透明度。使用斜杠语法。

oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)

格式： L 和 C 使用 3 位小数，H 最多使用 3 位。省略末尾的零。将 -0 格式化为 0。浏览器支持：2023 年起成为基线，全球覆盖率超过 96%。

关键阈值

规则	数值
明暗分界	L > 0.6 = 浅色背景 → 使用深色文本
亮度差（浅色背景）	背景 L > 0.85 时，前景 L < 0.45
亮度差（深色背景）	背景 L < 0.25 时，前景 L > 0.75
色相漂移阈值	调色板色阶间的偏差 > 10° = 可见漂移
APCA 普通文本	|Lc| >= 60 才达标，>= 75 为更佳
WCAG 2 普通文本	4.5:1 达到 AA，7:1 达到 AAA
对比度修复	仅调整 L——色度影响极小

审查输出格式

始终使用带有 Before 和 After 列的 Markdown 表格展示颜色变更。包含每个已更改的颜色，不能只列出部分。切勿在表格之外用单独的“Before:”/“After:”行列出发现。

Before	After
color: #3b82f6	color: oklch(0.623 0.188 259.815)
不同色相使用相同绝对 C	各色相均使用相同的最大色度百分比
P3 颜色没有 sRGB 回退方案	使用 @media (color-gamut: p3) 包装规则

这样能让反馈一目了然，也便于查看差异。每行都是一项独立变更，开发者可以分别处理。

常见错误

问题	修复方法
在新代码中使用 Hex/rgb/hsl 颜色	转换为 oklch()
HSL 调色板色阶出现色相漂移	使用恒定的 oklch 色相重新构建
对比度不达标（使用 APCA 检查前景色与其背景色）	调整 oklch 的 L 通道，保持 C 和 H 不变
未检查高色度值的色域	将其钳制到 sRGB 中对应 L/H 的最大色度
不同色相使用相同的绝对 C	使用相同的 C%（最大值的百分比），保持鲜艳程度一致
P3 颜色没有 sRGB 回退方案	添加 @media (color-gamut: p3) 模式
深色模式使用手动挑选的颜色	通过反转 L 映射，从浅色调色板推导
Tailwind v4 @theme 中使用 Hex	转换为 oklch 值
使用逗号语法表示 Alpha	使用斜杠：oklch(L C H / alpha)

参考文件

• color-conversion.md — 支持的格式、转换示例、批量转换规则、哪些内容保持原样
• palette-generation.md — 色阶约定、生成算法、多色相调色板、暗色模式、为什么不使用 HSL
• accessibility-contrast.md — APCA 和 WCAG 2 阈值、通过 L 修正对比度、明度差异指南、色相偏移检测
• gamut-and-tailwind.md — sRGB 与 P3、色域裁剪、CSS 回退模式、Tailwind v4 @theme 和迁移