平面设计 – 色轮 & 配色
前言
由于之前有点长, 而且色轮很重要就独立写一篇呗.
参考:
一文看懂色轮
Youtube – 03 色彩 （什么是色相、纯度、明度、色环、补色？怎样配色？）
Youtube – 初學繪畫必看調色教程！教你觀察顏色明度，之後才能調準顏色【跟着楊將學畫畫】
Youtube – RGB色彩模式原理 学会这个，解决你的调色难题！
Youtube – 颜色学习笔记 - 深入了解色轮
选色方案:
Youtube – How to pick the right colors for your website or app | UI/UX design tips
Youtube – How to Choose Colors (Easy 3-Step Process)
Youtube – Bad at Picking COLORS? Let's fix that - RAPID Color Scheming
介绍
色轮长这样
它里面包含了, 原色, 间色, 复色. 还有不同的饱和度 / 明度. 通过色轮可以容易选颜色, 这个后面说, 先来看看色轮是怎样搞出来的.
红黄蓝 vs CMY vs RGB
红黄蓝是小学美术老师教的 3 原色, 通常用在画画水彩.
CMY 是青, 品红, 黄是印刷用的 3 原色.
RGB 是红, 绿, 蓝, 是电子屏幕用的 3 原色.
所以经常看到很多版本的色轮. 但是大部分就是这 3 种啦.
但其实它们差别不是很大. 不需要纠结太多. 看你在哪个领域就用哪个呗.
画色轮
图片来源
原色
先画原色 RGB
间色
然后是间色
红 + 蓝 = 紫色
红 + 绿 = 黄色
蓝 + 绿 = 青色
复色
把间色和原色在 combine
转一圈看就是红, 橙, 黄, 绿, 蓝, 靛, 紫.
明度
色彩心理学 (color psychology)
参考: 知乎 – 色彩心理学
每种颜色都能给人的心里带来不同的感觉, 这里举几个例子.
红色 – 攻击性, 刺激性, 激情, 危险性, 活力
橙色 – 有趣, 新鲜, 创意, 成功, 热情
黄色 – 愉快, 乐观, 积极, 新鲜
绿色 – 健康, 自然, 青春, 新鲜感
蓝色 – 和谐, 和平, 平静, 放松, 信任, 安全
紫色 – 奢华, 智慧, 高贵
粉红 – 柔美, 柔和, 浪漫, 轻松, 愉快
白色 – 清晰, 干净, 奢华, 优雅
黑色 – 奢华, 优雅, 精致, 经典
色调
参考: 这可能是你听过最好的色彩课，色彩大师速成手册！【裹小脚的大叔】
色调就是明度饱和度的归类.
七大色调
分 3 层, 是高调, 中调，低调.
白色调 – 淑雅, 文艺, 干净, 极简, 单调, 乏味.
粉色调 (粉红, 粉蓝, 粉黄等) – 清秀, 天真, 可爱, 软弱, 乏力
明色调 – 年轻, 活力, 阳光, 清爽, 廉价, 缺乏品质
鲜色调 – 刺激, 活力, 强力, 生硬, 廉价
灰色调 (高级灰) – 品质, 高端, 奢华, 生态, 缺少活力
深色调 – 成熟, 稳重, 大气, 压抑, 阴暗, 不透气
黑色调 – 神秘, 力量, 厚重, 抑郁, 压抑
色相/调搭配
参考:
一劳永逸的配色方案 (上)
一劳永逸的配色方案 (中)
一劳永逸的配色方案 (下)
工具 :
color.adobe.com
color contrast checker
lapa.ninja 灵感网站
Color Palettes 1
Color Palettes 2
单色 / Monochromatic
选一种色相, 然后配上不同的明度 / 饱和度 (色调).
邻近色 / 类似色 / Analogous
90° 范围内的色相, 颜色靠近看上去就比较协调.
补色 / Complementary
180° 对角的颜色, 通常会形成鲜明的对比. 如果想凸显某物就适合用补色.
拆分补色 / Split Complementary
和补色类似效果, 只是颜色多了一些. 有点补色又加邻近色的 feel.
三元色 / 三角色 / Triad
120° 的叫对比色, 3个对比色会互相凸显. 整体会很亮眼 ,但据说不容易把控.
四色组合 / 四色系 / Tetradic
2 条 180° 对角选出 4 种颜色作为搭配.
要记得, 颜色越多越难掌控. 大师都是劝告新手从简单不会错的开始练起.
深浅平衡
如果颜色都是浅色, 那么就难识别. 没有层次. 把色相去掉, 会看的更明显. 所以很多人喜欢先用黑白灰去做设计, 最后才上色.
其实就是先把色调调好, 再配色相.
左边那张一看就知道 contrast 不过. 转灰色来看就更明显了
配上原则之一就是要达到深浅平衡. 层次分明.
色彩面积平衡
这个就是所谓的主色(primary / dominant color), 辅助色(secondary color), 点缀色(other color).
它们的占比应该是 (70%, 25%, 5%) 或 (60%, 30%, 10%), 参考值而已, 不需要很精准, 但概念就是主色一定占大多数, 然后是辅助, 最后点缀, 点缀可以是多种颜色.
一个好的平衡设计, 应该可以很容易的分辨出主色, 辅助色, 点缀. 应该它们的比例应该是很分明的.
比如这张, 主色是粉红, 辅助色是粉蓝, 其它的是点缀色.
花色和纯色平衡
花色指的是图片, 插画, icon, 复杂线条等. 花色会给人一种混乱的干净, 所以要通过颜色来 balance 调.
比如下面 2 张图.