oklch-skill

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

OKLCH Colors

OKLCH 色彩

OKLCH is a perceptually uniform color space where the numbers actually mean what you think they mean. Most color problems in CSS — broken palettes, failing contrast, hue drift — come from using color spaces that don't match how we see. OKLCH fixes the model so the tools work. To explore interactively, visit oklch.fyi.

OKLCH是感知均匀的色彩空间，其中的参数值含义完全符合你的预期。CSS中大多数色彩问题——调色板失效、对比度不达标、色相偏移——都源于使用了与人类视觉感知不匹配的色彩空间。OKLCH修正了色彩模型，让相关工具可以正常运作。你可以访问oklch.fyi进行交互式探索。

Quick Reference

快速参考

Category	When to use	Reference
Conversion	Hex/rgb/hsl to oklch	color-conversion.md
Palettes	Generate scales, multi-hue, dark mode	palette-generation.md
Contrast	APCA/WCAG checks, fixing failing contrast	accessibility-contrast.md
Gamut & Tailwind	P3 fallbacks, `@theme` scales, gamut clamping	gamut-and-tailwind.md

类别	使用场景	参考文档
格式转换	Hex/rgb/hsl转oklch	color-conversion.md
调色板	生成色阶、多色相、深色模式配色	palette-generation.md
对比度	APCA/WCAG校验、修复不达标对比度	accessibility-contrast.md
色域与Tailwind	P3降级方案、 `@theme` 色阶、色域裁切	gamut-and-tailwind.md

Why OKLCH

为什么选择OKLCH

Perceptual uniformity. Equal L steps = equal brightness.
```
oklch(0.5 ...)
```
is visually mid. HSL's
```
lightness: 50%
```
varies wildly by hue.
Stable hue. HSL blue shifts toward purple as lightness changes. OKLCH hue stays constant across the full lightness range.
Independent chroma. Chroma is an absolute measure of colorfulness that doesn't depend on lightness. HSL saturation does.
Finite gamut. Not every oklch value maps to a displayable sRGB color. High-chroma values at certain hues will clip — gamut awareness is required.

感知均匀性。相等的L步长对应相等的亮度。
```
oklch(0.5 ...)
```
在视觉上就是中间亮度。而HSL的
```
lightness: 50%
```
的实际亮度会随色相发生大幅变化。
色相稳定。HSL的蓝色会随着亮度变化向紫色偏移，而OKLCH的色相在全亮度范围内都保持恒定。
独立色度。Chroma是衡量色彩鲜艳度的绝对指标，不受亮度影响，而HSL的饱和度则和亮度相关。
有限色域。不是所有oklch值都对应可显示的sRGB色彩。特定色相下的高色度值会被裁切，因此需要具备色域感知能力。

OKLCH Syntax

OKLCH 语法

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

Channel	Range	Description
L (Lightness)	0–1	0 = black, 1 = white. Perceptually uniform.
C (Chroma)	0–~0.4	Colorfulness. 0 = gray. Max depends on L and H.
H (Hue)	0–360	Hue angle in degrees.
alpha	0–1	Optional transparency. Slash syntax.

css

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

Formatting: L and C use 3 decimal places, H uses up to 3. Drop trailing zeros. Format

-0

. Browser support: Baseline 2023, 96%+ global coverage.

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	可选透明度，使用斜杠语法

css

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%以上。

Key Thresholds

关键阈值

Rule	Value
Light/dark boundary	L > 0.6 = light background → use dark text
Lightness gap (light bg)	Foreground L < 0.45 when background L > 0.85
Lightness gap (dark bg)	Foreground L > 0.75 when background L < 0.25
Hue drift threshold	> 10° spread across palette steps = visible drift
APCA normal text	\|Lc\| >= 60 to pass, >= 75 for pass+
WCAG 2 normal text	4.5:1 AA, 7:1 AAA
Contrast fix	Adjust L only — chroma has negligible effect

规则	取值
深浅色边界	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即可，chroma对对比度影响可忽略

Review Output Format

审核输出格式

Always present color changes as a markdown table with Before and After columns. Include every color that was changed — not just a subset. Never list findings as separate "Before:" / "After:" lines outside of a table.

Before	After
`color: #3b82f6`	`color: oklch(0.623 0.188 259.815)`
Same absolute C across hues	Same C% of each hue's max chroma
No sRGB fallback for P3 color	`@media (color-gamut: p3)` wrapper

This keeps feedback scannable and diff-friendly. Each row is a self-contained change the developer can act on independently.

所有色彩变更必须使用包含修改前和修改后列的markdown表格呈现，需包含所有修改的色彩而非子集。禁止在表格外使用单独的“修改前:”/“修改后:”行列出变更内容。

修改前	修改后
`color: #3b82f6`	`color: oklch(0.623 0.188 259.815)`
不同色相使用相同的绝对C值	不同色相使用对应最大色度的相同C百分比
P3色彩无sRGB降级方案	包裹 `@media (color-gamut: p3)` 媒体查询

这种格式让反馈更易读，也便于对比差异，每一行都是开发人员可独立执行的独立变更项。

Common Mistakes

常见错误

Issue	Fix
Hex/rgb/hsl color in new code	Convert to `oklch()`
HSL palette ramp with hue drift	Rebuild with constant oklch hue
Failing contrast (check foreground vs its background using APCA)	Adjust oklch L channel, keep C and H
High chroma without gamut check	Clamp to max chroma for the L/H in sRGB
Same absolute C across different hues	Use same C% (percentage of max) for consistent vividness
P3 color without sRGB fallback	Add `@media (color-gamut: p3)` pattern
Dark mode with hand-picked colors	Derive from light palette by reversing L mapping
Hex in Tailwind v4 `@theme`	Convert to oklch values
Alpha with comma syntax	Use slash: `oklch(L C H / alpha)`

问题	修复方案
新代码中使用hex/rgb/hsl色彩	转换为 `oklch()` 格式
有色相偏移问题的HSL调色板色阶	使用恒定oklch色相重建
对比度不达标（使用APCA校验前景与背景对比度）	调整oklch的L通道，保留C和H不变
高色度值未做色域检查	裁切到当前L/H下sRGB支持的最大色度
不同色相使用相同的绝对C值	使用相同的C百分比（最大值的占比）保证一致的鲜艳度
P3色彩无sRGB降级方案	添加 `@media (color-gamut: p3)` 兼容模式
深色模式使用手动挑选的色彩	通过反转亮度映射关系从浅色调色板派生
Tailwind v4 `@theme` 中使用hex值	转换为oklch值
alpha使用逗号语法	使用斜杠语法： `oklch(L C H / alpha)`

Reference Files

参考文件

color-conversion.md — Supported formats, conversion examples, bulk conversion rules, what to leave alone
palette-generation.md — Scale convention, generation algorithm, multi-hue palettes, dark mode, why not HSL
accessibility-contrast.md — APCA and WCAG 2 thresholds, fixing contrast with L, lightness gap guide, hue drift detection
gamut-and-tailwind.md — sRGB vs P3, gamut clamping, CSS fallback patterns, Tailwind v4 @theme and migration

color-conversion.md — 支持的格式、转换示例、批量转换规则、无需转换的场景
palette-generation.md — 色阶规范、生成算法、多色相调色板、深色模式、不推荐HSL的原因
accessibility-contrast.md — APCA和WCAG 2阈值、通过L调整对比度、亮度差指南、色相偏移检测
gamut-and-tailwind.md — sRGB与P3对比、色域裁切、CSS降级模式、Tailwind v4 @theme与迁移指南