CSS 现代颜色函数
CSS Color Level 4：oklch()/oklab()感知均匀色彩空间（比RGB更符合人眼）、lch()亮度/色度/色相、color()函数P3广色域、color-mix()混合颜色、相对颜色语法 · 难度：入门 · +10XP
CSS 现代颜色函数 —— oklch 和 P3 广色域
以前写颜色用#ff0000或rgb(255,0,0)。现在有了更强大的颜色函数，更符合人眼感知，还能访问超广色域。
oklch() —— 感知均匀的色彩空间
.card {
background: oklch(70% 0.1 250); /* 亮度70% 色度0.1 色相250° */
}三个参数：亮度L(0%-100%)、色度C(鲜艳程度)、色相H(角度0-360)
为什么比RGB好？
| RGB/HSL | OKLCH |
|---|---|
| 亮度不均匀（相同lightness视觉亮度不同） | 感知均匀（相同L=相同视觉亮度） |
| 色相变化时亮度跳变（黄色感觉比蓝色亮） | 色相变化时亮度不变 |
| 只能覆盖sRGB色域 | 可覆盖P3广色域 |
动手练习
- 基础练习：用oklch()调出10个不同色相但视觉亮度完全一致的颜色，做一排色块验证。
- 进阶应用：用oklch重写网站调色板——主色、辅色、背景色，确保亮暗模式下视觉亮度一致。
- 项目实战：用color()函数定义一个P3广色域的红色，在新款MacBook Pro上对比sRGB红色的差异。