Web 设计色彩理论 - 从基础到实践
色彩理论基础 - 颜色的三属性
颜色由三个基本属性定义：色相（Hue）、饱和度（Saturation）和明度（Lightness/Value）。色相是颜色在色轮上的位置（红、橙、黄等），饱和度是颜色的鲜艳程度（从灰色到纯色），明度是颜色的明暗程度（从黑到白）。
理解这三个属性对 Web 设计至关重要。调整饱和度可以创建柔和或鲜明的视觉效果；调整明度可以建立层次感和深度；而色相的选择则决定了整体的情感基调。
色轮是理解颜色关系的核心工具。互补色（色轮上相对的颜色）产生强烈对比，类似色（相邻颜色）创造和谐感，三等分色（等距三色）提供平衡而丰富的配色。这些关系是所有配色方案的理论基础。
在数字设计中，还需要考虑颜色的感知差异。人眼对绿色最敏感，对蓝色最不敏感。相同数值变化在不同色相上的感知差异不同，这就是为什么 Lab 和 OKLCH 等感知均匀色彩空间在现代设计中越来越重要。
Web 颜色模型 - RGB、HSL、HWB 与 Lab
Web 开发中使用多种颜色模型，各有其适用场景。
RGB/Hex：最基础的 Web 颜色表示。#FF6B35 或 rgb(255, 107, 53)。直接对应显示器的红绿蓝子像素，但对人类不直观 - 很难从 RGB 值想象出实际颜色。
HSL：hsl(18, 100%, 60%)。色相用角度表示（0-360），饱和度和明度用百分比。比 RGB 更直观，调整明暗只需改变 L 值，创建同色系变体只需调整 S 和 L。CSS 中广泛支持。
HWB：hwb(18 10% 0%)。色相 + 白色混入量 + 黑色混入量。比 HSL 更符合画家的思维方式（"加白变浅，加黑变深"）。CSS Color Level 4 规范支持。
Lab/LCH：感知均匀的色彩空间。相同数值差异在视觉上产生相同程度的颜色变化。lab(60% 40 30) 或 lch(60% 50 30)。适合生成感知上等距的色阶。
OKLCH：Lab 的改进版本，修正了蓝色区域的色相偏移问题。oklch(0.7 0.15 30)。被认为是目前最适合 Web 设计的色彩空间，CSS 已原生支持。
配色方案模式 - 理论与实践
基于色彩理论的配色方案为设计提供了可靠的起点。
单色方案：使用单一色相的不同明度和饱和度变体。最安全的选择，不会出现颜色冲突。适合需要专业、克制感的界面。通过明度差异建立层次。
互补色方案：使用色轮上相对的两种颜色。产生强烈的视觉对比和活力。适合需要突出 CTA 按钮或重要信息的场景。注意不要等量使用两色，通常以 7:3 或 8:2 的比例分配。
分裂互补方案：选择一个主色，然后使用其互补色两侧的颜色。比纯互补色更柔和，同时保持足够的对比度。
三等分方案：色轮上等距的三种颜色。提供丰富的色彩变化同时保持平衡。适合需要活泼、多彩感的设计。
60-30-10 法则：主色占 60%（背景、大面积区域），辅助色占 30%（次要元素），强调色占 10%（CTA、图标、高亮）。这个比例创造视觉层次而不显杂乱。
实际应用中，还需要为每个主色生成 5-9 级的明度色阶（如 Tailwind CSS 的 50-950 色阶），以满足不同 UI 状态（hover、active、disabled）的需求。
对比度比率与无障碍
WCAG（Web 内容无障碍指南）对文本与背景之间的对比度比率有明确要求。不满足这些要求意味着部分用户无法阅读你的内容。
WCAG AA 标准（最低要求）：普通文本（小于 18px）需要 4.5:1 的对比度比率；大文本（18px 以上或 14px 粗体以上）需要 3:1。
WCAG AAA 标准（增强要求）：普通文本 7:1，大文本 4.5:1。
对比度比率的计算基于相对亮度：(L1 + 0.05) / (L2 + 0.05)，其中 L1 是较亮颜色的相对亮度，L2 是较暗颜色的相对亮度。白色对黑色的比率为 21:1（最大值）。
常见的对比度问题：浅灰色文字在白色背景上（如 #999 on #fff = 2.85:1，不达标）、彩色文字在彩色背景上、placeholder 文本过浅。
工具推荐：Chrome DevTools 内置对比度检查器、WebAIM Contrast Checker 在线工具、axe DevTools 浏览器扩展可以自动扫描整个页面的对比度问题。设计阶段就应该验证对比度，而非开发完成后再修复。
使用 CSS 自定义属性管理配色方案
CSS 自定义属性（CSS Variables）是管理网站配色方案的最佳实践，支持主题切换、暗色模式和动态颜色调整。
基本结构：在 :root 中定义颜色变量，组件中通过 var() 引用。按语义命名（如 --color-primary、--color-surface）而非按颜色命名（如 --blue），这样切换主题时只需修改变量值。
暗色模式实现：使用 @media (prefers-color-scheme: dark) 覆盖变量值。或通过 [data-theme="dark"] 属性选择器实现手动切换。两种方式可以结合使用，优先尊重用户的手动选择。
色阶生成：使用 OKLCH 色彩空间生成感知均匀的色阶。--primary-50: oklch(0.97 0.02 250); 到 --primary-900: oklch(0.25 0.10 250);。保持色相和色度不变，仅调整明度，确保整个色阶视觉上协调一致。
组件级别的颜色抽象：定义语义化的组件颜色变量（如 --btn-bg、--btn-text），映射到全局色阶变量。这样修改全局配色时，所有组件自动更新。
颜色工具与工作流
高效的颜色工作流需要合适的工具来辅助选色、验证和管理。
配色生成工具：Coolors.co 快速生成和谐配色方案；Adobe Color 基于色彩理论规则生成配色；Realtime Colors 可以在真实网页布局中预览配色效果；OKLCH Color Picker 在感知均匀空间中选色。
对比度验证工具：WebAIM Contrast Checker 快速检查两色对比度；Stark（Figma 插件）在设计阶段验证无障碍性；Chrome DevTools 的颜色选择器直接显示对比度比率和 WCAG 合规状态。
色阶生成工具：Tailwind CSS 色阶生成器；Leonardo Color（Adobe）基于对比度目标生成色阶；Huetone 在 OKLCH 空间中创建感知均匀色阶。
推荐工作流：
- 确定品牌主色和情感基调
- 使用配色工具生成互补/辅助色
- 为每个颜色生成 5-9 级色阶
- 验证所有文本/背景组合的对比度
- 定义 CSS 自定义属性并建立设计令牌
- 实现暗色模式变体并再次验证对比度