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。浏览器支持：Baseline 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——色度影响可忽略

审查输出格式

始终将颜色更改呈现为带有之前和之后列的Markdown表格。包括所有更改的颜色——而不仅仅是子集。切勿在表格之外以单独的“之前：”/“之后：”行列出发现。

之前	之后
color: #3b82f6	color: oklch(0.623 0.188 259.815)
不同色相使用相同的绝对C	使用每个色相最大色度的相同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和迁移