本文属于“前端设计基础”系列。你也可以继续阅读字体与排版、字号阶梯、间距系统、设计四原则和视觉层次。

配色不是从色板里挑几个顺眼的颜色。真正稳定的配色系统，需要同时处理颜色本身、颜色之间的关系，以及颜色在界面中的职责。

先理解 HSL

HSL 把颜色拆成三个更符合人类直觉的维度：

• Hue（色相）：它是什么颜色，取值为色轮上的 0°—360°。
• Saturation（饱和度）：颜色有多鲜艳。降低饱和度会让颜色更克制。
• Lightness（明度）：颜色有多亮。0% 是黑色，100% 是白色。

设计一组状态色时，HSL 通常比直接修改十六进制值更容易控制。你可以固定色相，通过调整饱和度和明度得到悬停、按下、浅色背景和深色文字等变体。

常见的配色关系

• 互补色位于色轮两端，对比最强，适合强调动作，但不宜大面积平分使用。
• 类似色彼此相邻，整体更统一，适合内容型和品牌型页面。
• 三角色在色轮上等距分布，画面活跃，但需要明确主次。
• 单色方案只改变同一色相的明度和饱和度，最容易保持一致。

关系只是起点。进入界面后，更重要的是为每种颜色分配职责。

用 60-30-10 建立主次

一个实用的起步比例是：60% 中性背景与大面积底色，30% 辅助层和次要内容，10% 品牌色或强调色。它不是硬性数学公式，而是在提醒你不要让所有颜色争夺注意力。

按钮、链接和选中状态可以共享品牌强调色；成功、警告、错误和信息则应该使用符合用户预期的语义色。不要仅依靠红绿差异表达状态，还要配合文字或图标。

对比度决定可读性

按照 WCAG 2.2，普通文字与背景的对比度应至少达到 4.5:1；大号文字至少 3:1。达到 7:1 可以满足普通文字更高等级的对比要求。浅灰文字看起来“高级”，但如果读不清，它就不是好设计。

检查时不要只看正文，还要覆盖占位符、禁用状态、边框、图标和按钮文字。深色模式也需要独立验证，不能简单把颜色反转。

一套可执行的配色流程

1. 先确定中性色阶，搭好背景、文字和边框。
2. 选择一个品牌主色，并生成由浅到深的层级。
3. 定义成功、警告、错误和信息四类语义色。
4. 为默认、悬停、按下、聚焦和禁用状态建立规则。
5. 对真实组件进行对比度检查，而不是只检查色板。

配色的目标不是让颜色越多越好，而是让用户一眼知道哪里重要、哪里可操作、当前发生了什么。

更多可直接使用的风格和界面参考，可以访问 StyleKit。