Back to Details

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

快速参考

CategoryWhen to useReference
ConversionHex/rgb/hsl to oklchcolor-conversion.md
PalettesGenerate scales, multi-hue, dark modepalette-generation.md
ContrastAPCA/WCAG checks, fixing failing contrastaccessibility-contrast.md
Gamut & TailwindP3 fallbacks, 
@theme
scales, gamut clamping		gamut-and-tailwind.md
类别使用场景参考文档
格式转换Hex/rgb/hsl转oklchcolor-conversion.md
调色板生成色阶、多色相、深色模式配色palette-generation.md
对比度APCA/WCAG校验、修复不达标对比度accessibility-contrast.md
色域与TailwindP3降级方案、
@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)
ChannelRangeDescription
L (Lightness)0–10 = black, 1 = white. Perceptually uniform.
C (Chroma)0–~0.4Colorfulness. 0 = gray. Max depends on L and H.
H (Hue)0–360Hue angle in degrees.
alpha0–1Optional 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
as 
0
. Browser support: Baseline 2023, 96%+ global coverage.
oklch(L C H)
oklch(L C H / alpha)
通道取值范围说明
L (亮度)0–10=黑色，1=白色，感知均匀
C (色度)0–~0.4色彩鲜艳度，0=灰度，最大值受L和H影响
H (色相)0–360色相角度，单位为度
alpha0–1可选透明度，使用斜杠语法
css
oklch(0.637 0.237 25.331)
oklch(0.8 0.05 200 / 0.5)
格式规范：L和C保留3位小数，H最多保留3位，省略末尾的0，将
-0
格式化为
0
。浏览器支持情况：Baseline 2023，全球覆盖率96%以上。

Key Thresholds

关键阈值

RuleValue
Light/dark boundaryL > 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 text4.5:1 AA, 7:1 AAA
Contrast fixAdjust 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.
BeforeAfter
color: #3b82f6
color: oklch(0.623 0.188 259.815)
Same absolute C across huesSame 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

常见错误

IssueFix
Hex/rgb/hsl color in new codeConvert to 
oklch()
HSL palette ramp with hue driftRebuild 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 checkClamp to max chroma for the L/H in sRGB
Same absolute C across different huesUse same C% (percentage of max) for consistent vividness
P3 color without sRGB fallbackAdd 
@media (color-gamut: p3)
pattern
Dark mode with hand-picked colorsDerive from light palette by reversing L mapping
Hex in Tailwind v4 
@theme
Convert to oklch values
Alpha with comma syntaxUse 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与迁移指南