颜色系统

构建有层次的色彩体系

一个完整的颜色系统包含主色调、中性色、语义色（成功、警告、错误）以及它们的明暗变体。使用 HSL 格式可以更容易地生成有规律的色阶。

核心要点

主色 (Primary) — 品牌标识色，用于主要操作和强调
次级色 (Secondary) — 辅助色，用于次要操作
中性色 (Neutral) — 文本、边框、背景的灰度色阶
语义色 — 成功(绿)、警告(黄)、错误(红)、信息(蓝)
暗色模式 — 需要为每个颜色定义暗色变体

HSL 色阶生成

/* Using HSL for easier shade adjustments */
--primary-50:  hsl(240, 5%, 95%);
--primary-100: hsl(240, 5%, 90%);
--primary-500: hsl(240, 5%, 50%);  /* Base color */
--primary-900: hsl(240, 5%, 10%);

/* Contrast checking is important! */
/* WCAG AA: 4.5:1 for body text */
/* WCAG AA: 3:1 for large text */

始终检查颜色对比度，确保满足 WCAG 无障碍标准。可以使用 WebAIM Contrast Checker 工具。

上一课完成并继续