颜色在网页设计中的核心作用
-
品牌识别强化
- 建立视觉识别系统（如可口可乐红、Twitter蓝）
- 提升品牌记忆度（色彩提升品牌认知度达80%）
-
视觉层次构建
- 通过对比色引导用户注意力
- 使用相似色建立内容关联性
-
情感传达机制
- 暖色系（红/橙）激发行动欲（常用于CTA按钮）
- 冷色系（蓝/绿）营造信任感（金融/医疗类网站常用）
-
可读性保障
- 文本与背景对比度需符合WCAG 2.1标准（AA级至少4.5:1）
- 色盲友好配色方案（避免红绿组合）
专业配色选择方法论
1. 品牌调性分析
- 制作情绪板（Mood Board）提取关键词
- 行业基准色研究（如科技蓝、环保绿）
2. 色轮原理应用
主色选择 → 类似色协调 → 互补色强调 → 三角色对比
3. 对比度控制
- 文本层级：7:1（标题）- 4.5:1（正文）
- 交互元素：3:1（非文本元素对比）
4. 60-30-10法则
- 60% 主色（背景/大面积区块）
- 30% 辅助色（导航/按钮）
- 10% 强调色（重要交互元素）
5. 文化语义考量
- 红色：西方-警示/东方-喜庆
- 白色：西方-纯洁/部分亚洲国家-丧事
6. 系统化色板构建
基础色（1-3种） → 扩展色（明度/饱和度梯度） → 功能色（成功/警告/错误）
颜色工具
- Colorffy：网站颜色方案生成工具
- Color Hunt：网站配色方案集合
- UI Colors：Tailwind CSS 配色生成工具
- shadcn ui 主题色生成工具
- design-foundations：提取输入网站的配色和字体工具