推荐用 CSS 自定义属性配合 8 位 HEX（如 #3b82f666）作为主色方案，兼顾可维护性、语义清晰、原生透明支持与现代浏览器兼容性，避免命名爆炸与数值歧义。
推荐用 CSS 自定义属性（:root + var()）配合 8 位 HEX（#RRGGBBAA）作为设计系统主色方案。 它兼顾可维护性、语义清晰度、透明度原生支持和浏览器兼容性，不是最炫的写法，但最扛得住迭代和多人协作。
为什么不用纯 HEX 或 RGB/RGBA？
纯 6 位 HEX（如 #3b82f6）无法表达透明度，每次要半透色都得额外写 rgba()，导致同一语义颜色出现多个变体（比如 primary、primary-40、primary-overlay），命名爆炸且难以统一管理。RGB/RGBA 虽支持透明度，但数值无业务含义，rgba(59, 130, 246, 0.4) 比 #3b82f666 更难一眼识别色相，也不利于设计工具（如 Figma）自动提取主题色。
使用场景包括：按钮悬停态、禁用态背景、卡片蒙层、状态徽标等需要微调不透明度的组件。
-
#3b82f6是蓝色主色，#3b82f666就是它的 40% 透明版本 —— 含义直觉、书写紧凑、无需计算小数 - 所有 8 位 HEX 值都能被现代浏览器（Chrome 117+、Firefox 115+、Safari 16.4+）原生解析，无需 PostCSS 插件
- 当需降级时，可搭配
@supports提供 fallback：button { background-color: rgba(59, 130, 246, 0.4); }@supports (background-color: #3b82f666) { button { background-color: #3b82f666; } }
自定义属性怎么组织才不乱？
直接在 :root 里定义带语义的变量名，而不是裸写颜色值。避免出现 --color-blue-500 这类仅反映设计系统层级、脱离业务含义的命名。
立即学习“前端免费学习笔记（深入）”；
推荐结构：
:root { --color-primary: #3b82f6; /* 主操作色 */ --color-primary-hover: #2563eb; /* 主色深一级 */ --color-primary-disabled: #3b82f633; /* 主色+20%透明 */ --color-surface: #ffffff; /* 卡片/模态框背景 */ --color-border: #e2e8f0; /* 边框色 */}- 每个变量名必须对应明确 UI 角色（
primary、surface、border），而非抽象编号（blue-500） - 透明色一律用 8 位 HEX，不混用
rgba()，保证代码一致性 - 禁用
_下划线命名（如--color_primary），CSS 变量规范推荐短横线分隔（--color-primary）
暗色模式下颜色怎么同步切换？
别靠 JS 动态改 document.documentElement.style，用 CSS 媒体查询 + :root 覆盖更稳定。
关键点：只覆盖真正需要变的变量，不是整套重写。
- 文字、背景、边框这些需反转的色值，在
@media (prefers-color-scheme: dark)内重新赋值 - 主色（
--color-primary）通常保持不变，否则按钮在明/暗模式下会“消失”或突兀跳变 - 示例：
@media (prefers-color-scheme: dark) { :root { --color-surface: #1e293b; --color-border: #334155; --color-text: #f1f5f9; }}
最容易被忽略的是：8 位 HEX 的透明度换算不是线性百分比映射（CC ≠ 80%），而是十六进制值本身（CC = 204/255 ≈ 79.9%）。团队必须共享一张速查表，或者用构建工具把 alpha(0.4) 编译成 66，否则设计师给的 “50% 透明” 和前端写的 #3b82f680 之间会有肉眼可见偏差。
