在上篇文章，我们学会了现代 CSS 颜色的基础用法。
本篇我们进入更高级的领域：如何像设计师一样操纵颜色。
CSS 现在能做的事情，甚至比设计软件还要强大！
1. 操纵颜色
1.1. 基础回顾
先复习一下上篇文章的内容：
:root {
--primary: #ff0000;
}
.primary-bg-50-opacity {
/* h s l 不是字母，是变量！ */
background: hsl(from var(--primary) h s l / 0.5);
}
注意： h s l 这三个字母其实是变量，分别存储了色相（hue）、饱和度（saturation）、亮度（lightness）的值。
我们可以替换这些变量，比如给绿色（#00ff00）加点蓝：
/* 基础绿色没有蓝色成分 */
.green-with-a-touch-of-blue {
/* 在蓝色通道加 25 */
color: rgb(from #00ff00 r g calc(b + 25));
}
这就像调色板，在基础的绿色中，添加点“蓝色颜料”。
1.2. 实用技巧
掌握了基础用法，我们就可以讲些实际开发中会用到的场景了。
- 创建互补色（色轮对面的颜色）：
:root {
--color-primary: #2563eb; /* 蓝色 */
/* 色相加 180 度，跳到对面 */
--color-secondary: hsl(from var(--color-primary) calc(h + 180) s l);
}
- 创建三色组合：
:root {
--color-primary: #2563eb;
/* 色轮上均匀分布 120 度 */
--color-secondary: hsl(from var(--color-primary) calc(h + 120) s l);
--color-tertiary: hsl(from var(--color-primary) calc(h - 120) s l);
}
就像时钟：12 点是主色，4 点和 8 点是配色，完美对称！
使用效果如下：
<!-- 这是一张图片，ocr 内容为：CHANGE THE PRIMARY COLOR: -->
- 相对调整
:root {
--color-primary-base: #2563eb;
/* 比基础色亮 25% */
--color-primary-lighter: hsl(from var(--color-primary-base) h s calc(l + 25));
/* 比基础色暗 25% */
--color-primary-darker: hsl(from var(--color-primary-base) h s calc(l - 25));
}
使用这种方法，不管基础色是多亮，都会相对地变亮或变暗。
这就像调空调，“比现在低 5 度”比“设定到 20 度”更灵活。
使用效果如下：
<!-- 这是一张图片，ocr 内容为：CHANGE THE PRIMARY COLOR: -->
2. 暗黑模式的层次感
现在我们能相对调整颜色了，可是究竟有什么用呢？
让我给你举个具体的使用场景。
在浅色主题中，我们可以根据阴影来区分层次：
<!-- 这是一张图片，ocr 内容为：LEVEL 1 LEVEL 2 LEVEL 3 -->
但在深色背景下，阴影的效果并不明显。
因此在深色主题中，我们希望每个层次的颜色略微变浅。
借助上篇讲过的 light-dark()和相对颜色调整，我们便可以实现：
:root {
--surface-base-light: hsl(240 67% 97%);
--surface-base-dark: hsl(252 21% 9%);
}
/* 第一层：基础层 */
.surface-1 {
background: light-dark(var(--surface-base-light), var(--surface-base-dark));
}
/* 第二层：稍微亮一点 */
.surface-2 {
background: light-dark(var(--surface-base-light), hsl(from var(--surface-base-dark) h s calc(l + 4)));
}
/* 第三层：再亮一点 */
.surface-3 {
background: light-dark(var(--surface-base-light), hsl(from var(--surface-base-dark) h s calc(l + 8)));
}
想象一下深海：越接近水面，光线越充足。暗色模式的层次就是这个原理。
使用效果如下：
<!-- 这是一张图片，ocr 内容为：LEVEL 1 LEVEL 1 LEVEL 2 LEVEL 2 LEVEL LEVEL 3 -->
3. 完整配色方案
设计师创建配色方案时，不只是简单地调整亮度，还会同时微调色相和饱和度，比如
- 变亮时：饱和度增加，色相向冷色调偏移
- 变暗时：饱和度降低
这便可以通过 CSS 来实现：
:root {
--primary-base: hsl(221 83% 50%);
/* 400: 亮度60%，色相-3度，饱和度+5% */
--primary-400: hsl(from var(--primary-base) calc(h - 3) calc(s + 5) 60%);
/* 300: 亮度70%，色相-6度，饱和度+10% */
--primary-300: hsl(from var(--primary-base) calc(h - 6) calc(s + 10) 70%);
/* 以此类推... */
}
为什么要这么麻烦呢？
因为只调亮度会让浅色看起来“失去活力”。
就像拍照：自动模式能拍，但手动调整曝光、对比度、色温会更漂亮。
为了让你更直观地看到变化：
<!-- 这是一张图片，ocr 内容为：PRIMARY COLOR SCALE SYSTEMS PERCEPTUAL SCALE(ADJUSTS HUE & SATURATION) 200 700 900 600 1000 100 400 800 500 300 FLAT SCALE(ONLY LIGHTNESS CHANGES) 600 500 400 300 100 700 1000 900 800 200 -->
第一排是都调整的版本，第二排是未调整色相和饱和度的版本。
最明显的区别在于 100、200 和 300 这几个色块，当仅调整亮度值时，颜色看起来失去了一些鲜艳度。
4. OKLCH 更科学的配色方式
4.1. 问题：HSL
HSL 虽然很棒，但在使用时，你会发现一些问题，让我们看个例子：
.green-bg {
/* 饱和度 100%，亮度 50% */
background: hsl(100 100% 50%);
color: white;
}
.blue-bg {
/* 同样饱和度 100%，亮度 50% */
background: hsl(220 100% 50%);
color: white;
}
你会发现，色和蓝色的饱和度、亮度虽然完全一样，但视觉效果完全不同：
<!-- 这是一张图片，ocr 内容为：BLUE GREEN -->
明显蓝色背景上的文字清晰易读，对比度超过 5，而绿色背景上的文字却很难看清，对比度仅略高于 1。
之所以会这样，是因为 HSL 的“亮度”不符合人眼感知。
人眼对绿色比蓝色更敏感，所以同样的“50%亮度”，绿色看起来更亮。
4.2. 解决：OKLCH
而这就是 oklch() 的优势。
OKLCH 是基于感知亮度设计的：
.consistent-green {
background: oklch(0.54 0.23 261);
}
.consistent-blue {
background: oklch(0.54 0.23 146);
}
使用效果如下：
<!-- 这是一张图片，ocr 内容为：BLUE GREEN -->
现在不管什么颜色，亮度值相同，人眼看起来的亮度就相同！
4.3. 讲解：OKLCH 的三个参数
在 LCH 颜色模型中：
第一个值是亮度（Lightness），取值范围为 0 到 1。它的计算方式与 HSL 略有不同，因为它基于感知亮度，但概念相同，即 0 是黑色，1 是白色。
第二个值是色度（Chroma），类似于饱和度，0 是灰色，越大越鲜艳，但最大值不固定，取决于亮度和色相（这是 OKLCH 最麻烦的地方）
第三个值是色相（Hue），和 HSL 一样是色轮，0 到 360 度，区别是 0 度是洋红色（HSL 里 0 度是红色）
OKLCH 的尴尬之处就在于色度（Chroma）的最大值会变：
/* 某些色相+亮度组合，0.4 已经是极限 */
.max-chroma-1 {
background: oklch(0.6 0.4 120);
}
/* 但另一些组合，0.4 可能太高或太低 */
.max-chroma-2 {
background: oklch(0.8 0.4 200); /* 可能超出范围 */
}
就像不同口味的饮料，有的最浓是“3 勺糖”，有的最浓是“5 勺糖”，没有统一标准。
4.4. 实用技巧：结合相对颜色
虽然直接写 OKLCH 值很麻烦，但我们可以用 HSL 定义基础色，然后用 OKLCH 保持一致性：
.toast {
--base-color: hsl(225, 87%, 56%); /* 用熟悉的 HSL 定义 */
}
[data-toast="info"] {
/* 只改变色相，保持亮度和色度 */
--toast-color: oklch(from var(--base-color) l c 275);
}
[data-toast="warning"] {
--toast-color: oklch(from var(--base-color) l c 80);
}
[data-toast="error"] {
--toast-color: oklch(from var(--base-color) l c 35);
}
使用效果如下：
<!-- 这是一张图片，ocr 内容为：USING OKLCH SOME GENERAL INFO TOAST THIS MIGHT END BADLY OH NO, SOMETHING HAS GONE WRONG! USING HSL SOME GENERAL INFO TOAST THIS MIGHT END BADLY OH NO,SOMETHING HAS GONE WRONG! -->
这样做的好处在于：不同颜色的提示框，边框对比度、整体饱和度感觉都很一致。
5. 混合颜色
有的时候，我们可能需要混合两种颜色：
.purple {
/* 红色和蓝色各占 50% */
color: color-mix(in srgb, red, blue);
}
就像调颜料：红色颜料加蓝色颜料，得到紫色。
目前必须定义一个颜色空间，所以必须写 in srgb 或 in oklab 等，未来会默认用 oklab。
不同颜色空间混出来的结果不一样：
<!-- 这是一张图片，ocr 内容为：SRGB OKLCH OKLAB XYZ XYZ -->
一般推荐：
- 先试
oklab - 再试
oklch - 不满意就换其他的
5.1. 控制混合比例
默认情况下，使用该功能时 color-mix()，每种颜色将使用 50% 的强度。
当然，我们也可以控制特定颜色的具体强度。
/* 90% 红色 + 10% 蓝色 */
.red-with-a-touch-of-blue {
background: color-mix(in oklab, red 90%, blue);
}
/* 或者反过来写 */
.or-like-this {
background: color-mix(in oklab, red, blue 10%);
}
5.2. 创建半透明色
有两种方法可以获得透明的值：
方法一：让总量小于 100%
/* 60% + 20% = 80%，所以透明度是 80% */
.semi-opaque {
background: color-mix(in oklab, red 60%, blue 20%);
}
方法二：混入 transparent
/* 30% 的不透明红色 */
.thirty-percent-opacity-red {
background: color-mix(in oklch, red 30%, transparent);
}
不过如果只是想降低透明度，还是用相对颜色更直接：
.better-way {
background: rgb(from red r g b / 0.3);
}
5.3. 小技巧：分段渐变
/* 不用手动算中间的每个颜色，color-mix 帮你搞定 */
.banded-gradient {
background: linear-gradient(to right, red, color-mix(in oklch, red 75%, blue), color-mix(in oklch, red 50%, blue), color-mix(in oklch, red 25%, blue), blue);
}
使用效果如下：
<!-- 这是一张图片，ocr 内容为： -->
6. 未来更简单
重复写这些代码很烦？
CSS 自定义函数快来了：
/* 定义函数 */
@function --lower-opacity(--color, --opacity) {
result: oklch(from var(--color) l c h / var(--opacity));
}
/* 使用函数 */
.lower-opacity-primary {
background: --lower-opacity(var(--primary), 0.5);
}
或者定义整套色阶函数：
@function --shade-100(--color) returns <color> {
result: hsl(from var(--color) calc(h - 12) calc(s + 15) 95%);
}
@function --shade-200(--color) returns <color> {
result: hsl(from var(--color) calc(h - 10) calc(s + 12) 85%);
}
/* 以此类推... */
.call-to-action {
background: --shade-200(var(--accent));
}
.hero {
background: --shade-800(var(--primary));
color: --shade-100(var(--primary));
}
一次定义，到处使用，完美！
7. 总结
最后总结下本篇文章的重点：
- 用 calc() 操纵颜色 - 数学生成配色方案
- OKLCH - 基于人眼感知的颜色系统，不同色相亮度一致
- color-mix() - 像调颜料一样混合颜色
在实际使用时：
- 简单需求：相对颜色 + HSL
- 需要视觉一致性：OKLCH
- 需要混合颜色：color-mix()
- 暗黑模式层次：light-dark() + 相对颜色
本篇整理自《A pragmatic guide to modern CSS colours - part two》，希望能帮助到你。
我是冴羽，10 年笔耕不辍，专注前端领域，更新了 10+ 系列、300+ 篇原创技术文章，翻译过 Svelte、Solid.js、TypeScript 文档，著有小册《Next.js 开发指南》、《Svelte 开发指南》、《Astro 实战指南》。
欢迎围观我的“网页版朋友圈”，关注我的公众号：冴羽（或搜索 yayujs），每天分享前端知识、AI 干货。
