如何为网站创建专业配色方案

第一步：确定品牌色调和情感基调

颜色传递强烈的心理信号。在选色之前，先回答这些问题：你的品牌是可信任的（蓝色系）、充满活力的（橙色/红色系）、自然友好的（绿色系），还是优雅高端的（黑色/紫色系）？你的目标用户是谁？他们对哪些颜色有情感共鸣？这一步骤能帮你缩小色调范围，避免后期反复修改。

第二步：选择品牌主色

品牌主色是整套配色方案的出发点。选择一个你从情感和视觉上都满意的颜色，然后在 HSL 格式中记录它。建议将主色的饱和度设为 60%–80%（足够鲜艳但不刺眼），亮度设为 45%–55%（在白色和黑色背景上都有足够对比度）。

/* Example: tech startup blue */
--primary: hsl(214, 72%, 52%);

第三步：生成主色色阶

从主色出发，通过改变亮度（L）生成一组 5–10 个色阶，覆盖从极浅（用于背景、高亮）到极深（用于文字、深色按钮）的范围。保持色调（H）和饱和度（S）不变，只调整亮度：

--primary-50:  hsl(214, 72%, 95%);
--primary-100: hsl(214, 72%, 88%);
--primary-200: hsl(214, 72%, 78%);
--primary-300: hsl(214, 72%, 65%);
--primary-400: hsl(214, 72%, 55%);
--primary-500: hsl(214, 72%, 52%); /* base */
--primary-600: hsl(214, 72%, 42%);
--primary-700: hsl(214, 72%, 32%);
--primary-800: hsl(214, 72%, 22%);
--primary-900: hsl(214, 72%, 12%);

第四步：建立中性色（灰色系）

中性色（灰色系）是网站用得最多的颜色，用于文字、背景、边框、分割线等。直接使用纯灰色（饱和度为 0）往往显得生硬，更好的做法是使用略带品牌色调的"有色灰"，让整体视觉更统一：

/* Tinted grays with brand hue */
--gray-50:  hsl(214, 20%, 98%);  /* page background */
--gray-100: hsl(214, 15%, 94%);  /* card background */
--gray-200: hsl(214, 15%, 88%);  /* border */
--gray-400: hsl(214, 12%, 60%);  /* placeholder */
--gray-600: hsl(214, 12%, 40%);  /* secondary text */
--gray-800: hsl(214, 15%, 18%);  /* primary text */
--gray-900: hsl(214, 20%, 8%);   /* dark bg */

第五步：添加强调色和语义色

强调色用于吸引注意的 UI 元素（如徽章、特殊标签）。语义色有固定含义：成功（绿色）、警告（黄色/橙色）、错误（红色）、信息（蓝色）。这些颜色应与主色不同，但应保持相似的饱和度和亮度范围以保证视觉一致性：

--success: hsl(142, 65%, 42%);
--warning: hsl(38,  90%, 50%);
--error:   hsl(0,   72%, 52%);
--info:    hsl(199, 72%, 48%);

第六步：验证对比度

颜色方案确定后，必须验证所有常见颜色组合的对比度。WCAG AA 标准要求正文文字与背景的对比度至少为 4.5:1，大号文字（18px 以上）至少为 3:1。特别需要检查：

• 主色背景上的白色文字（如主要按钮）
• 页面背景上的正文文字
• 卡片背景上的次要文字
• 错误/成功状态的颜色组合

第七步：实现为 CSS 变量

将最终确定的配色方案定义为 CSS 自定义属性（变量），这样整个项目都能引用它们，修改时也只需改一处：

:root {
  /* Semantic roles */
  --color-bg:        var(--gray-50);
  --color-surface:   var(--gray-100);
  --color-border:    var(--gray-200);
  --color-text:      var(--gray-800);
  --color-text-muted: var(--gray-600);
  --color-primary:   var(--primary-500);
  --color-primary-hover: var(--primary-600);
}