01-色彩理论基础-
色轮（Color Wheel）
原色 红、黄、蓝（无法通过混合其他颜色得到）。
二次色 橙、绿、紫（由两种原色混合）。
三次色 红橙、黄绿、蓝紫等（原色与二次色混合）。
色彩属性
色相（Hue） 颜色的名称（如红、蓝）。
明度（Value） 颜色的明暗程度。
饱和度（Saturation） 颜色的鲜艳程度（高饱和=鲜艳，低饱和=灰暗）。
02
-配色设计原则-
明确配色目标
品牌传达 颜色需符合品牌调性（如科技感多用蓝、环保多用绿）。
功能导向 通过颜色引导用户操作（如红色用于警示、绿色用于确认）。
情感共鸣 颜色需引发用户情绪（如暖色系传递温暖，冷色系传递冷静）。
常用配色方法
单色（Monochromatic）
使用同一色相的不同明度/饱和度，适合简约、统一的设计。
示例：深蓝 + 浅蓝 + 灰蓝。
互补色（Complementary）
色轮上相对的两个颜色（如红+绿），对比强烈，适合突出重点。
技巧：降低一方的饱和度避免刺眼。
类似色（Analogous）
色轮上相邻的3-4个颜色（如黄、黄绿、绿），和谐自然。
适用场景：背景、渐变设计。
分裂互补色（Split Complementary）
选择一个主色，搭配其互补色两侧的颜色，平衡对比与和谐。
示例：主色蓝 + 黄橙 + 红橙。
三元色（Triadic）
色轮上等距的三个颜色（如红、黄、蓝），色彩丰富但需控制比例。
03
-实用配色技巧-
6:3:1 黄金比例
主色（60%） 决定整体风格，常用于背景或大面积区域。
辅助色（30%） 与主色协调，用于次级元素（按钮、图标）。
强调色（10%） 高对比颜色，用于关键操作（如CTA按钮）。
控制对比度
确保文字与背景的对比度符合可访问性标准（WCAG建议至少4.5:1）。
工具推荐 WebAIM Contrast Checker。
中性色平衡
使用黑、白、灰或低饱和色作为中性色，避免视觉疲劳。
示例：主色蓝 + 浅灰背景 + 深灰文字。
考虑使用场景
暗黑模式 避免纯黑，用深灰（如#121212）提升层次感。
光照环境 户外场景需提高明度，确保可见性。
04
-色彩心理学与行业应用-
颜色
心理联想
常见应用场景
红
激情、紧迫、危险
促销按钮、警示提示
蓝
信任、专业、科技
企业官网、金融产品
绿
自然、健康、安全
环保品牌、健康类应用
黄
活力、乐观、注意力
儿童产品、折扣标签
紫
奢华、创意、神秘
美妆、艺术类产品
黑
高端、简约、力量
奢侈品、科技产品
05
-案例展示-
06
-工具推荐-
配色生成工具
Adobe Color（色轮工具，支持规则生成）
Coolors.co（快速生成配色方案）
Paletton（模拟配色在实际界面中的效果）
灵感来源
Dribbble/Behance：参考成熟设计案例。
自然界/摄影：提取自然中的和谐配色。
品牌手册：学习Apple、Google等品牌的配色逻辑。
07
-避坑指南-
避免过多颜色 超过5种颜色易导致视觉混乱。
注意文化差异 例如白色在西方代表纯洁，在亚洲某些地区象征哀悼。
测试实际效果 在不同设备、光照下验证配色可见性。
动态调整 根据用户反馈或A/B测试优化配色方案。
图片来源：互联网 | 请勿商用 | 联系删除
欢迎来评论区留言讨论~
精彩回顾
-欢迎设计合作 敬请后台留言-
精彩分享 | 前沿资讯 | 设置为“星标”！