配色方案指南：如何为你的网站选择完美的调色板
好的配色方案能让用户在打开网站的瞬间就产生信任感和专业感。不好的配色则会让用户迅速离开。
本文将教你用科学的方法来选择网站配色。
基础：色彩理论 101
HSL 色彩模型
HSL 是设计师最友好的色彩表示法：
- H (Hue)：色相，0-360度色环。0=红，120=绿，240=蓝。
- S (Saturation)：饱和度，0%=灰，100%=最鲜艳。
- L (Lightness)：亮度，0%=黑，100%=白。
经典的配色方案类型
| 类型 | 说明 | 适用场景 |
|---|---|---|
| 互补色 | 色环上 180° 对面的两种颜色 | 需要强烈对比的 CTA |
| 类似色 | 色环上相邻的 2-3 种颜色 | 和谐、自然的设计 |
| 三等分 | 色环上等距的三种颜色 | 活泼、多彩的品牌 |
实战：60-30-10 法则
这是室内设计中的黄金法则，同样适用于 Web 设计：
- 60% 主色：背景和大面积区域（通常是中性色）。
- 30% 辅色：卡片、侧边栏、次要区域。
- 10% 强调色：按钮、链接、重要元素。
无障碍：对比度标准
WCAG 2.1 标准要求：
- 普通文字：对比度至少 4.5:1
- 大字标题：对比度至少 3:1
使用 ColorSpark 对比度检测工具 可以实时检查你的前景色与背景色是否达标。
工具推荐
使用 ColorSpark 可以：
- 输入任意颜色，一键转换 HEX / RGB / HSL 格式
- 自动生成互补色、类似色、三等分配色方案
- 实时检测文字与背景的对比度是否符合无障碍标准