CSS 颜色格式

浏览器接受多种 CSS 颜色语法。了解支持矩阵允许哪些写法，可避免 silent 回退。

CSS 中的 Hex

.brand {
  color: #2563eb;
  border-color: #2563eb80; /* 现代浏览器 8 位 hex 含 alpha */
}

小写 hex 常见于风格指南；#ABC 与 #abc 浏览器视为相同。

函数式 rgb() 与 hsl()

传统逗号语法：

background: rgba(37, 99, 235, 0.12);

现代空格分隔（CSS Color Level 4）：

background: rgb(37 99 235 / 0.12);
color: hsl(221 83% 53%);

Autoprefixer 与压缩器可能规范化格式——设计系统仓库里保持令牌源格式一致。

命名色与关键字

transparent、currentColor 以及 tomato、rebeccapurple 等命名色适合原型。生产主题应用 令牌 而非随意命名色，避免漂移。

currentColor 继承

color: currentColor 让图标与边框跟随文字色——状态变化时不必重复 hex。

现代色彩空间：oklch 与 color-mix

较新 CSS 支持感知更均匀的空间：

--accent: oklch(58% 0.22 264);
--hover: color-mix(in oklch, var(--accent) 85%, black);

是否采用取决于浏览器目标。回退栈常在 sRGB hex 之后，用 @supports 提供广色域主题。

邮件与 PDF 限制

许多 HTML 邮件客户端会去掉 hsl() 与变量。模板应导出 内联 hex，即使 Web 应用内部用 CSS 变量。

要点

令牌 只选一种编写格式，构建时生成各平台输出，并文档化哪些场景必须 hex-only 回退。