OKLCH 调色板:三个滑块玩出完美配色
别再靠感觉配色了!用 OKLCH 的三个参数,轻松搞定视觉一致的调色板。附带超好用的调色板生成器。
配色这件事,以前真的很玄学。
什么"冷暖搭配"、"对比色调",听起来就让人头大。但自从用了 OKLCH,配色突然变得像搭积木一样简单。
为什么?因为 OKLCH 有个神奇的特点:数值相等,视觉就相等。
先玩玩这个调色板生成器
别着急看理论,先动手感受一下:
OKLCH 调色板生成器
Base Color Settings
🌞 Lightness Variation (Fixed hue and chroma)
Keep the same hue and saturation, adjust lightness to create depth variation
🎨 Hue Variation (Fixed lightness and chroma)
Keep the same lightness and saturation, change hue to create color variation
💎 Chroma Variation (Fixed lightness and hue)
Keep the same lightness and hue, adjust chroma to create saturation variation
Using the same lightness values ensures consistent visual weight; using the same chroma values maintains unified saturation; regular hue intervals create harmonious color combinations.
试着拖动滑块,你会发现无论怎么调,生成的颜色看起来都很和谐。这就是 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) /* 黄 */
);开始行动
- 先玩工具:用上面的生成器随便试试,找感觉
- 选一个项目:把现有的配色用 OKLCH 重做一遍
- 对比效果:你会发现新配色"看起来就是舒服"
用 OKLCH 配色,就像有了一把精准的尺子。以前靠感觉,现在靠数字,稳多了。
最重要的是:别想太多,先用起来。三个滑块而已,比学开车简单多了。