Back to Details

better-colors

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
。浏览器支持：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通道——色度的影响可忽略不计

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表格形式呈现色彩变更，包含Before和After列。需包含所有变更的色彩——而非仅子集。切勿将结果以独立的"Before:" / "After:"行形式列出表格之外。
BeforeAfter
color: #3b82f6
color: oklch(0.623 0.188 259.815)
不同色相使用相同绝对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值使用相同比例的最大色度以保证鲜艳度一致
P3色彩未提供sRGB降级方案添加
@media (color-gamut: p3)
模式
手动挑选深色模式色彩通过反转L值映射从浅色调色板推导
Tailwind v4 
@theme
中使用hex色彩		转换为oklch值
使用逗号语法设置透明度使用斜杠语法：
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 vs P3、色域限制、CSS降级方案、Tailwind v4 @theme与迁移