颜色命名规范与变量命名指南

← 返回博客

颜色命名规范与变量命名指南

· 6 分钟阅读

颜色命名的重要性

好的颜色变量命名系统是设计系统可维护性的基石。当你直接使用 HEX 值（如 #4A90E2）而没有命名时，修改品牌颜色就意味着在整个代码库中全局替换这个值，而且完全无法从代码中判断该颜色的用途。好的命名系统让颜色的意图自文档化，让主题切换、品牌更新变得容易。

三种主要命名策略

颜色变量命名主要有三种策略，各有优劣：

• **基于颜色值命名（Value-based）：**如 --blue-500、--gray-100。直接描述颜色本身，Tailwind CSS 采用此策略。
• **基于角色命名（Role-based）：**如 --color-primary、--color-background。描述颜色的用途，Bootstrap 和许多设计系统采用此策略。
• **两层命名（Two-tier）：**结合以上两种，先定义颜色层（原始值），再定义语义层（用途）。这是现代设计系统的最佳实践。

两层命名系统的实现

两层命名系统是目前最推荐的方式：第一层（色板层）定义所有可用的颜色值，第二层（语义层）从第一层引用，并赋予语义含义：

/* Tier 1: Color palette (raw values) */
:root {
  --blue-100: hsl(214, 80%, 92%);
  --blue-500: hsl(214, 80%, 52%);
  --blue-700: hsl(214, 80%, 35%);
  --blue-900: hsl(214, 80%, 18%);

  --gray-50:  hsl(220, 15%, 98%);
  --gray-800: hsl(220, 15%, 20%);
}

/* Tier 2: Semantic tokens */
:root {
  --color-primary:        var(--blue-500);
  --color-primary-hover:  var(--blue-700);
  --color-primary-subtle: var(--blue-100);
  --color-bg:             var(--gray-50);
  --color-text:           var(--gray-800);
}

/* Usage in components */
.btn-primary {
  background: var(--color-primary);
  color: white;
}
.btn-primary:hover {
  background: var(--color-primary-hover);
}

大型设计系统的命名实践

不同的大型设计系统有不同的命名约定，了解它们有助于做出更有见识的选择：

• **Tailwind CSS：**使用颜色名+数字（50–950），如 text-blue-500、bg-gray-100。简洁直观，但不携带语义。
• **Material Design：**主色（Primary）、辅色（Secondary）、背景（Background）、表面（Surface）、错误（Error），每个还有 On- 前缀（如 On-Primary 表示主色上面的文字颜色）。
• **GitHub Primer：**使用两级系统，底层是颜色色板，上层是功能性语义名（如 --color-btn-primary-bg）。极为细粒度。

命名规范的最佳实践

• 避免具体颜色名作为语义名：--color-blue 不如 --color-primary，前者在品牌换色为绿色后会引起混乱
• **使用一致的后缀约定：**hover/active/disabled/focus 等状态后缀应在整个系统中保持一致
• **为语义色添加背景：**不要只有 --error，也要有 --error-bg（错误提示框背景色）和 --error-border
• **文档化每个变量的用途：**写注释说明每个颜色变量应用于哪些具体场景

SCSS 颜色变量的最佳实践

// SCSS: Two-tier color system

// === Tier 1: Color palette ===
$blue-50:   #EFF6FF;
$blue-500:  #3B82F6;
$blue-600:  #2563EB;
$blue-700:  #1D4ED8;

// === Tier 2: Semantic tokens ===
$color-primary:          $blue-500;
$color-primary-hover:    $blue-600;
$color-primary-active:   $blue-700;
$color-primary-focus-ring: rgba($blue-500, 0.4);

// === Component-level tokens ===
$btn-primary-bg:         $color-primary;
$btn-primary-bg-hover:   $color-primary-hover;
$btn-primary-text:       #ffffff;

向 CSS 自定义属性迁移

如果你的项目目前使用 SCSS 颜色变量，建议逐步迁移到 CSS 自定义属性（CSS 变量）。CSS 变量的主要优势是可以在运行时更改（如主题切换），这是 SCSS 变量做不到的。迁移时，可以先用 CSS 变量替换语义层，保留 SCSS 变量作为原始颜色值，再逐步将组件的样式从 SCSS 变量改为 CSS 变量。

立即尝试在线工具，无需安装，免费使用。

打开工具 →