网页设计配色的核心
一、色彩基础与心理暗示
| 颜色 | 情绪 / 适用场景 | 常见行业 |
|---|---|---|
| 红色 | 热情、紧急、促销 | 电商、活动、警示 |
| 蓝色 | 信任、科技、专业 | 金融、科技、医疗 |
| 绿色 | 自然、健康、环保 | 农业、健康、环保 |
| 橙色 | 活力、温暖、行动 | 餐饮、创意、CTA 按钮 |
| 紫色 | 高贵、神秘、艺术 | 高端、时尚、文创 |
| 灰色 / 黑白 | 简约、高级、中性 | 全行业通用、正文 |
二、5 种经典配色方案（直接可用）
- 单色系（最安全）
同色相，仅变明度 / 饱和度（如深蓝→中蓝→浅蓝）。
效果：统一、专业、高级感，适合企业 / 官网。
- 类似色（柔和和谐）
色轮相邻 3 色（如蓝→蓝绿→绿）。
效果：舒适、低对比、层次自然，适合内容 / 教育站。
- 互补色（强对比、吸睛）
色轮对面两色（如蓝 + 橙、红 + 绿）。
效果：活力、醒目、强记忆点，适合 CTA 按钮 / 重点区块。
- 分裂互补色（平衡活力）
主色 + 互补色的两个邻色（如蓝 + 橙红 + 黄橙）。
效果：对比适中、不刺眼、更丰富，适合创意 / 时尚站。
- 三色组（平衡且丰富）
色轮上等距 3 色（如红、黄、蓝）。
效果：活泼、均衡、现代感，适合年轻品牌 / 应用。
三、黄金分配法则：60-30-10
60% 主色：品牌核心色，用于导航、标题、大区块背景。
30% 辅助色：主色的搭配色，用于侧边栏、卡片、次要按钮。
10% 强调色：对比色，用于按钮、链接、提示、图标。
中性色（黑 / 白 / 灰）：占剩余空间，用于正文、背景、边框，保证可读性。
四、实用技巧（避坑 + 提质感）
文本可读性优先
正文：深灰（#333/#444）+ 白色背景，避免纯白 #000，刺眼。
背景图上文字：加半透明黑 / 白遮罩，或用高对比度色。
无障碍设计（必做）
文字与背景对比度≥4.5:1（WCAG 标准），用工具检测。
避免红 + 绿等色盲不友好组合，可用图案 / 文字补充区分。
中性色打底
大面积用白 / 浅灰，主色仅做点缀，减少视觉疲劳。
从品牌 / 图片取色
用品牌 LOGO 主色为网站主色；或从首页大图中提取 3–5 色做色盘。
五、推荐工具（一键生成 + 取色）
Adobe Color：选主色，自动生成互补 / 类似 / 三色方案，可保存为色盘。
Coolors：一键随机生成和谐配色，支持导出 CSS/PNG。
ColorZilla（浏览器插件）：网页任意位置取色，测对比度。
Figma：内置色轮与配色插件，直接应用到设计稿。
六、实战示例（直接抄）
科技官网：主色 #165DFF（蓝）+ 辅助 #36CFC9（青）+ 强调 #FF7D00（橙）+ 中性灰。
电商促销页：主色 #F53F3F（红）+ 辅助 #FFAA00（橙）+ 中性白 / 浅灰。
极简博客：主色 #409EFF（浅蓝）+ 辅助 #67C23A（浅绿）+ 黑白灰。
推荐
-
-
QQ空间
-
新浪微博
-
人人网
-
豆瓣
