OKLCH 调色板：三个滑块玩出完美配色

配色这件事，以前真的很玄学。

什么"冷暖搭配"、"对比色调"，听起来就让人头大。但自从用了 OKLCH，配色突然变得像搭积木一样简单。

为什么？因为 OKLCH 有个神奇的特点：数值相等，视觉就相等。

先玩玩这个调色板生成器

别着急看理论，先动手感受一下：

试着拖动滑块，你会发现无论怎么调，生成的颜色看起来都很和谐。这就是 OKLCH 的魔力。

三个滑块，搞定所有配色

OKLCH 只有三个参数，但足以应对所有配色场景：

L（亮度）- 控制"重量感"

想象一下，同样大小的积木，有些看起来"重"，有些看起来"轻"。L 值就是控制这个的。

实用招数：

• 做品牌色？固定 L=60%，只改色相
• 做文字层级？固定色相，L 从 20% 到 80%
• 做背景色？L=95% 以上，看起来就很轻松

C（色度）- 控制"鲜艳度"

这个最好理解，就是颜色有多"艳"。

我的经验：

• 0.05 以下：几乎是灰色，很高级
• 0.1-0.15：正常的品牌色饱和度
• 0.2 以上：很抢眼，用来做重点强调

H（色相）- 就是颜色本身

红橙黄绿蓝靛紫，按 0°-360° 排列。

记住几个关键数字：

• 0° 红色
• 120° 绿色
• 240° 蓝色

我常用的配色套路

套路 1：单色系深浅变化

/* 只改亮度，色相和色度固定 */
--blue-100: oklch(90% 0.1 240);  /* 很浅的蓝 */
--blue-500: oklch(60% 0.1 240);  /* 标准蓝 */
--blue-900: oklch(30% 0.1 240);  /* 很深的蓝 */

这样做出来的颜色，看起来就是"一家人"。

套路 2：彩虹色但不花哨

/* 固定亮度和色度，只改色相 */
--red: oklch(65% 0.15 0);
--green: oklch(65% 0.15 120);
--blue: oklch(65% 0.15 240);

神奇的地方在于：这三个颜色看起来一样"重"，一样"鲜艳"，放在一起特别和谐。

套路 3：渐变不要太丝滑

用 RGB 做渐变，中间容易出现"脏颜色"。但 OKLCH 的渐变，丝滑得不行：

background: linear-gradient(
  45deg,
  oklch(60% 0.2 0),    /* 红 */
  oklch(60% 0.2 60),   /* 橙 */
  oklch(60% 0.2 120)   /* 黄 */
);

开始行动

1. 先玩工具：用上面的生成器随便试试，找感觉
2. 选一个项目：把现有的配色用 OKLCH 重做一遍
3. 对比效果：你会发现新配色"看起来就是舒服"

用 OKLCH 配色，就像有了一把精准的尺子。以前靠感觉，现在靠数字，稳多了。

最重要的是：别想太多，先用起来。三个滑块而已，比学开车简单多了。