一、色彩基础与心理暗示

二、5 种经典配色方案（直接可用）

1. 单色系（最安全）

• 同色相，仅变明度 / 饱和度（如深蓝→中蓝→浅蓝）。

• 效果：统一、专业、高级感，适合企业 / 官网。

  
2. 类似色（柔和和谐）

• 色轮相邻 3 色（如蓝→蓝绿→绿）。

• 效果：舒适、低对比、层次自然，适合内容 / 教育站。

  
3. 互补色（强对比、吸睛）

• 色轮对面两色（如蓝 + 橙、红 + 绿）。

• 效果：活力、醒目、强记忆点，适合 CTA 按钮 / 重点区块。

  
4. 分裂互补色（平衡活力）

• 主色 + 互补色的两个邻色（如蓝 + 橙红 + 黄橙）。

• 效果：对比适中、不刺眼、更丰富，适合创意 / 时尚站。

5. 三色组（平衡且丰富）

• 色轮上等距 3 色（如红、黄、蓝）。

• 效果：活泼、均衡、现代感，适合年轻品牌 / 应用。

三、黄金分配法则：60-30-10

• 60% 主色：品牌核心色，用于导航、标题、大区块背景。

• 30% 辅助色：主色的搭配色，用于侧边栏、卡片、次要按钮。

• 10% 强调色：对比色，用于按钮、链接、提示、图标。

• 中性色（黑 / 白 / 灰）：占剩余空间，用于正文、背景、边框，保证可读性。

四、实用技巧（避坑 + 提质感）

1. 文本可读性优先

• 正文：深灰（#333/#444）+ 白色背景，避免纯白 #000，刺眼。

• 背景图上文字：加半透明黑 / 白遮罩，或用高对比度色。

2. 无障碍设计（必做）

• 文字与背景对比度≥4.5:1（WCAG 标准），用工具检测。

• 避免红 + 绿等色盲不友好组合，可用图案 / 文字补充区分。

3. 中性色打底

• 大面积用白 / 浅灰，主色仅做点缀，减少视觉疲劳。

4. 从品牌 / 图片取色

• 用品牌 LOGO 主色为网站主色；或从首页大图中提取 3–5 色做色盘。

五、推荐工具（一键生成 + 取色）

• Adobe Color：选主色，自动生成互补 / 类似 / 三色方案，可保存为色盘。

• Coolors：一键随机生成和谐配色，支持导出 CSS/PNG。

• ColorZilla（浏览器插件）：网页任意位置取色，测对比度。

• Figma：内置色轮与配色插件，直接应用到设计稿。

六、实战示例（直接抄）

• 科技官网：主色 #165DFF（蓝）+ 辅助 #36CFC9（青）+ 强调 #FF7D00（橙）+ 中性灰。

• 电商促销页：主色 #F53F3F（红）+ 辅助 #FFAA00（橙）+ 中性白 / 浅灰。

• 极简博客：主色 #409EFF（浅蓝）+ 辅助 #67C23A（浅绿）+ 黑白灰。

泰安网络公司