MODERN CSS
OKLCH 色彩空间OKLCH Color Space
感知均匀的色彩空间：同样的 L 值在任意色相下「看起来一样亮」。生成色阶时不会出现某个色相莫名发暗或发灰。
效果预览
L 95%L 85%L 72%L 58%L 45%L 32%L 20%
适合用在哪
构建设计系统的色阶（50-900）、需要精确控制明度的主题、暗色模式的颜色推导。
容易踩的坑
- 所有色相用同一彩度值，黄色与青色在高 C 值时超出 sRGB 被裁剪，色阶变得不均匀。
- 以为 L 相同对比度就相同，未实测 WCAG 对比度，部分色阶文字仍不合格。
- 设计稿工具仍用 HEX，与代码中的 OKLCH 来回转换产生细微色差，交付时对不上。
设计提示词 · Prompt
OKLCH 色彩空间（OKLCH Color Space）：语法 oklch(L% C H)，L 是感知明度 0-100%，C 是彩度（约 0-0.37），H 是色相角度 0-360。优势：在 oklch 里把 L 从 95% 逐级降到 20% 就能得到一条视觉均匀的色阶，而在 hsl 里同样操作会让黄绿变得极亮、蓝紫变得极暗。实践：定义 --brand-l 自定色相 --brand-h，然后按 L 档位生成整套色板：oklch(95% .04 H) … oklch(30% .16 H)。P3 广色域显示器上还能用超出 sRGB 的彩度，得到更鲜艳的品牌色；不支持时浏览器会自动裁到 sRGB 范围内，属于优雅降级。
OKLCH Color Space: syntax oklch(L% C H), where L is perceptual lightness 0-100%, C is chroma (about 0-0.37), and H is the hue angle 0-360. Advantage: in oklch, stepping L down from 95% to 20% gives a visually even scale, whereas the same operation in hsl makes yellow-greens extremely bright and blue-purples extremely dark. In practice: define --brand-l with a custom hue --brand-h, then generate a full palette by L steps: oklch(95% .04 H) … oklch(30% .16 H). On P3 wide-gamut displays you can use chroma beyond sRGB for more vivid brand colors; where unsupported, the browser clips to the sRGB range automatically, degrading gracefully.
常见搭配
同一页面里经常和「OKLCH 色彩空间」一起出现的模式，可以收藏后用「组合收藏为整页提示词」一起交给 AI。
演示 HTML 结构
<div class="s d-col" style="width:100%;gap:6px"> <div class="mc-oklch__row"><i style="background:#f3eefe"></i><i style="background:#ddccfb"></i><i style="background:#bda2f7"></i><i style="background:#9a6ef2"></i><i style="background:#7c3aed"></i><i style="background:#5b23b4"></i><i style="background:#3b1475"></i></div> <div class="mc-oklch__lb"><span>L 95%</span><span>L 85%</span><span>L 72%</span><span>L 58%</span><span>L 45%</span><span>L 32%</span><span>L 20%</span></div> </div>