CSS设计系统颜色怎么定义？

从现在开始，努力学习吧！本文《CSS 设计系统中颜色如何定义？》主要讲解了等等相关知识点，我会在golang学习网中持续更新相关的系列文章，欢迎大家关注并积极留言建议。下面就先一起来看一下本篇正文内容吧，希望能帮到你！

语义化颜色命名的核心原则是用途优先而非外观，如primary表示主按钮用色而非蓝色，设计变更时自动适配；命名按品牌、交互、状态、表面、文本等抽象层级划分，避免blue-500等外观描述，确保可维护性与无障碍适配。

语义化颜色命名的核心原则是「用途优先，而非外观」

在 CSS 设计系统中，primary、success、border-light 这类名字不是描述“蓝色”或“#007bff”，而是表达“这个色值用在主按钮、高亮操作、可点击状态”。一旦设计规范调整主色从蓝变紫，所有使用 primary 的地方自动适配，无需全局搜索替换十六进制值。

常见语义层级与命名结构

颜色变量通常按抽象程度分层，避免直接暴露物理属性：

• color-brand-primary：品牌主色（如 logo 色），属于基础层，极少变动
• color-interactive-primary：交互主色（按钮默认态、链接），基于品牌色微调对比度/可访问性
• color-state-hover、color-state-disabled：明确绑定交互状态，不写成 color-primary-hover
• color-surface-card、color-surface-modal：表面层级色，强调容器背景角色，而非“浅灰”
• color-text-emphasis、color-text-secondary：文本语义，对应视觉层级，不叫 color-text-dark（暗可能指深灰，也可能指黑）

为什么不能用 blue-500 或 gray-200 命名？

这类命名来自工具链（如 Tailwind），适合原子化开发，但在设计系统中会引发三类问题：

• 当设计稿要求“所有卡片背景统一改为略暖的浅灰”，你得改 gray-50、gray-100、surface-light 三个变量，且无法保证它们实际用途一致
• 无障碍对比度调整时，text-primary 可能需从 #2563eb 改为 #1d4ed8，但 blue-600 这个名无法体现它承担的是“主要文本”职责
• 开发者看到 bg-blue-100 会下意识认为“这是装饰色”，不敢把它用于错误提示背景——语义断裂导致误用

CSS 自定义属性中的典型定义方式

语义变量最终落地为 CSS 自定义属性，关键点在于：只暴露语义名，隐藏具体值；值由设计系统维护者统一调控。

:root {
  /* 基础品牌色（少动）*/
  --color-brand-primary: #3b82f6;
/ 交互色（含可访问性校验）/
--color-interactive-primary: var(--color-brand-primary);
--color-interactive-primary-hover: #2563eb;
--color-interactive-primary-active: #1d4ed8;
/ 文本色（按信息层级）/
--color-text-emphasis: #1e293b;
--color-text-secondary: #64748b;
--color-text-disabled: #94a3b8;
/ 表面色（按组件角色）/
--color-surface-card: #ffffff;
--color-surface-inset: #f1f5f9;
}

使用时只写 color: var(--color-text-emphasis)，不关心它是否等于 #1e293b。真正容易被忽略的是：语义变量之间不应存在硬编码依赖关系（比如 --color-interactive-primary 不该用 lighten(var(--color-brand-primary), 10%)），因为 LCH/HSL 调色在不同色域下表现不稳定，必须由设计师人工校准后赋值。

好了，本文到此结束，带大家了解了《CSS设计系统颜色怎么定义？》，希望本文对你有所帮助！关注golang学习网公众号，给大家分享更多文章知识！