网页设计颜色系统怎么搭：不用靠审美，靠 tokens 和变量做稳定配色

很多团队做颜色系统时，实际流程是这样的：

• 先挑一个“看起来不错”的主色
• 再临时补两个按钮色
• 出错状态临时用红色
• 背景色、边框色、文本色一路补丁式增加

最后文件里出现几十个十六进制值，但没人说得清：

• 哪个才是品牌主色
• 哪个是弱化文本
• 哪个是表单错误态
• 为什么同一个按钮在两个页面颜色不一样

这说明团队有颜色，却没有颜色系统。

真正稳定的颜色系统，不靠“调色直觉”，而靠角色划分、变量命名、对比度约束和组件映射。

如果你还没建立 tokens 体系，建议先读 Design Tokens 设计与管理完全指南 与 Design Tokens 工程实践。

先给结论：颜色系统至少要回答 4 个问题

只要这 4 个问题回答不清，页面颜色就一定会越做越散。

第一步：先分“颜色角色”，不要直接分页面

很多人会按页面去配色：

• 首页一套色
• 价格页一套色
• 活动页一套色

这会让复用越来越难。

更好的方法是按角色分色：

先有角色，再谈具体色值。这样才能把颜色从“感觉”变成“系统”。

第二步：建立变量表，而不是直接写死十六进制

推荐至少有三层：

1. 基础色：原始色阶
2. 语义色：品牌、文本、状态等角色命名
3. 组件色：按钮、卡片、表单实际使用值

示例变量表：

这样做的好处是：

• 品牌换色时，不用全局搜 hex 值
• 暗色模式更容易映射
• 组件与页面可以共享同一套语义层

第三步：状态色必须先定义规则，再定义美感

最容易失控的通常不是品牌色，而是状态色。

因为一旦没有约束，团队会出现：

• 成功态有 3 种绿色
• 错误态按钮和错误文案不是同一色系
• 黄色警告与品牌辅助色互相冲突

推荐最小状态集：

状态色的重点不是“够亮”，而是：

• 与主品牌色不混淆
• 与背景有足够对比度
• 在按钮、文本、标签、通知里有统一映射

第四步：颜色系统必须接受“可读性验收”

颜色最容易沦为主观争论，所以一定要引入客观标准。

至少检查：

• 正文文本与背景对比度是否达标
• 按钮文案在主色背景上是否清晰
• 禁用态是否“可识别但不误导可点击”
• 深浅层背景之间是否能被用户快速区分

如果你在正文排版里也想做到稳态，可连同 排版可读性参数速查表 一起使用。

一个适合企业站和内容站的最小颜色系统

语义层建议

:root {
  --color-primary: #2563eb;
  --color-primary-hover: #1d4ed8;
  --color-accent: #7c3aed;

  --color-text-primary: #111827;
  --color-text-secondary: #4b5563;
  --color-text-muted: #6b7280;

  --color-bg-page: #f9fafb;
  --color-bg-surface: #ffffff;
  --color-border-default: #e5e7eb;

  --color-success: #15803d;
  --color-warning: #d97706;
  --color-danger: #dc2626;
  --color-info: #0284c7;
}

组件映射建议

这张表的作用，是让团队知道：颜色不是直接选，而是按角色调用。

失败案例：页面看起来“很有设计感”，但上线后三周就失控

常见情况是：

• 设计师为每个专题页单独调色
• 前端在组件里直接写 hex 值
• 运营改 Banner 时再补一套“更醒目”的橙色

结果是：

• 按钮在不同页面风格不一致
• 弱化文本颜色忽浅忽深
• 深色区块里的按钮和文字对比度不足
• 后续想统一品牌升级时，几乎无法整体替换

根因：没有变量层，也没有角色边界。

修复方式：

1. 先收集全站实际使用颜色
2. 合并同类项，删掉功能重复的值
3. 建立语义变量
4. 把组件映射改成变量调用

颜色系统验收清单

基础层

• 已区分品牌色、中性色、状态色、强调色
• 不再直接在组件里散落写死 hex 值

语义层

• 文本、背景、边框、状态均有对应变量
• 同一语义在全站只有一套主要取值

组件层

• 按钮、卡片、表单、提示组件都已映射变量
• hover、active、disabled 状态有一致规则

质量层

• 关键文本与背景对比度达标
• 状态色之间不会互相混淆
• 深色 / 浅色区块切换后仍可读

如果你还在改模板，可以同步看 HTML 模板怎么改不崩；如果你在做建站落地，也推荐串联 网页制作从 0 到上线。

最后总结

颜色系统真正要解决的，从来不是“好不好看”，而是“能不能稳定复用”。

只要你把颜色分成：

1. 基础色
2. 语义色
3. 组件色

再加上对比度验收和状态色规则，页面颜色就会从“靠感觉微调”升级成“可维护、可扩展、可协作”的系统。