第七章 · 7.1 节

颜色系统与透明度

CSS 提供了不止一种描述颜色的方式，从最原始的十六进制色值，到贴近设计师调色习惯的 HSL，再到近几年才被浏览器广泛支持的感知均匀色彩空间 OKLCH——选对表示法，能让颜色的维护与调整轻松许多。

传统表示法

.accent {
  color: #8a5a2e;
  color: rgb(138 90 46); /* 等价写法，空格分隔是现代语法 */
}

hsl(色相饱和度明度) 用三个更贴近人类直觉的维度描述颜色，调整"更深一点"或"更鲜艳一点"时，不需要像 RGB 那样同时心算三个通道。

:root {
  --accent: hsl(30 47% 36%);
  --accent-light: hsl(30 47% 56%); /* 只改明度，颜色关系保持一致 */
}

同色相不同明度

30%

45%

60%

75%

现代语法允许在颜色函数内用斜杠追加透明度，不再需要专门记忆 rgba() / hsla() 这类"a 后缀"函数（它们仍可用，但已是历史写法）：

.overlay {
  background: hsl(240 20% 10% / .6);
  border: 1px solid rgb(255 255 255 / .12);
}

易混淆点opacity 作用于整个元素（含内容与子元素），会让文字也一起变淡；而颜色值里的 alpha 通道只影响这一处颜色本身，两者场景不同，不要混用。

HSL 有一个隐藏问题：同样的明度数值，在不同色相下人眼感知到的亮度并不一致（比如同明度的黄色看起来比蓝色亮得多）。OKLCH 用感知均匀的方式定义颜色，相同的明度差在任意色相下观感一致，非常适合生成色阶。

.accent {
  color: oklch(52% 0.09 48); /* 明度 色度 色相角 */
}

目前主流现代浏览器已支持 oklch，用于生成设计系统色阶时优先考虑；面向仍需兼容旧浏览器的项目，可保留 hsl 作为回退值——CSS 会自动忽略无法解析的属性值，保留最后一条生效的声明。

currentColor 是一个特殊关键字，代表元素当前生效的 color 值，让边框、阴影等属性可以"继承"文字颜色，减少重复声明：

.icon-btn {
  color: #3f5d54;
  border: 1px solid currentColor; /* 边框自动跟随文字色 */
}

无需手动计算，直接在 CSS 里按比例混合两种颜色——生成悬停态、禁用态等派生色时非常实用：

.btn:hover {
  background: color-mix(in srgb, #8a5a2e 85%, black);
}