新手配色手册!可能是最简单实用的色彩搭配指南 - 优设-UISDC

新手配色手册!可能是最简单实用的色彩搭配指南

2016/05/10 33796评论区

simplest-color-matching-guideline-1

编者按:今天的色彩搭配教程是针对零基础的新手写的,分别是<基础:色彩的组成>、<进阶:色彩的搭配>、<高阶:调色三要素>3个部分,有图有实例,文末推荐了一个网站一个视频,都是帮你提高配色技巧的,建议阅读。

1. 基础教程:色彩的组成

关键词:原色 间色 复色 色环

29wb20160510

所有的色彩都是源自”红黄蓝”三种原色。有人可能会潜意识地认为三原色是”红绿蓝”,但其实不是。红绿蓝是显示上的三原色,和美术上的三原色不一样。

28wb20160510

红黄蓝两两混合后得到三个二级色即“间色”绿橙紫。

27wb20160510

原色与间色混合或间色与间色混合而形成越来越多的颜色,称之为“复色”。

26wb20160510

最后由三种原色、三种间色和六种复色组成的系统就统称为十二色环(colorwheel),也是学习色彩搭配的基础。

2. 进阶教程:色彩的搭配

关键词:单色 近似色 补色

十二色环的存在并不只是一个摆设,它巧妙地建立了配色系统。

常见的色彩搭配有:单色搭配,近似色搭配,补色搭配,分散互补色搭配,三角对立的配色搭配……

单色搭配(monochromatic)

25wb20160510

这个不用解释,就是只用一种颜色的搭配。

类似色搭配(analogous colors)

24wb20160510

色环上任意三个相邻的颜色,被称为类似色。通常认为,它们放在一起会很和谐。

类似色是选择相近颜色时十分不错的方法,可以在同一个色调中制造丰富的质感和层次。理所当然成为配色法则中最经济适用的一条。

23wb20160510

一大片近似色将梵高叔叔的忧郁高冷展现的淋漓尽致。

22wb20160510

再放眼时尚圈,同类色也是除了黑白灰以外最安全的穿搭法则哦!

21wb20160510

但是在选择的时候要注意比例上的调和,选一个为主要颜色。

20wb20160510
补色搭配(complementary colors)

19wb20160510

色环上相对的两种颜色,被称为互补色。放在一起,会形成对比效果。比如蓝色和橙色、红色和绿色、黄色和紫色等。

互补色有非常强烈的对比度,在颜色饱和度很高的情况下,可以创建很多十分震撼的视觉效果。很多广告和招贴为了吸引眼球经常会使用,用作强调提示作用效果是极好的。

18wb20160510

但是记得,在文本中使用互补色是很糟糕的。

要用好互补色,最好的办法就是:改变明度、降低纯度,看起来会柔和许多。下面看几个例子。

17wb20160510

降低纯度后的互补色相当和谐。

16wb20160510

《天使爱美丽》中的这个场景,是一个典型的红绿互补色。

15wb20160510

室内装修中互补色也很管用,清新又不失活泼。

分散互补色搭配(split-complementary colors)

14wb20160510

寻找三种颜色,其中两种互相类似,另一种与它们形成对比,这就是分散互补色搭配。分散互补色搭配是初学者很好的选择,怎么搭都很好看。

13wb20160510

红、深蓝与浅蓝搭配,完美突出对比感,画面又不失和谐。

三角对立配色(Triadic colors)

12wb20160510

此外,如果要寻找三种互相平衡的颜色,可以选择12色环上任意三个三角对立的颜色。

11wb20160510

要成功地使用三色系产生和谐效果,需要谨慎地在色彩间取得平衡——只用一种主色,其他两种颜色作烘托。

3. 高阶教程:调色三要素

关键词:色相 饱和度 明度

要精准的调出每一种颜色,其实包括三个要素:色相、饱和度和明度。

10wb20160510

色相(hue):指饱和度和亮度都为100%的颜色。我们肉眼所见到于是能说出来的颜色就叫色相,所有的色相都可以用色环来展示。

9wb20160510

饱和度(saturation)即纯度,指色彩的鲜艳程度——颜色中含有灰色的程度。饱和度越高,颜色越纯,色彩越鲜明;饱和度越低,颜色中灰色成分越大,色彩越黯淡。

8wb20160510

明度(value),即色彩的亮度。反映的是色彩的深浅变化,如粉红、大红、深红,都是红,但一种比一种深。

7wb20160510

明度的变化来自于颜色中白色的成分变化。一般情况下在颜色中加入白色,明度提高,加入黑色,明度降低。最大值时,所有颜色都变成白色,最小值时,所有颜色都变成黑色。

下面来看一下明度(Value)的具体应用。

TINT:HUE+WHITE

6wb20160510

在色彩中加入白色。这种基调给人更加明亮、和平但缺少活力的感觉,更体现女性色彩,适用的行业有spa、美容等。

5wb20160510

SHADE:HUE+BLACK

4wb20160510

在色彩中加入黑色。神秘、黑暗、罪恶、危险色调,更体现男性色彩。使用纯色或更明亮的阴影色时,与渐变能很好搭配。

3wb20160510

TONE:HUE+GREY

2wb20160510

在色彩中加入灰色,调性不至于太黑暗但能突出冰冷的感觉。

1wb20160510

最后给大家推荐一个视频,一个网站和一本书。

一个视频:<A Brief Lesson on Color Theory>,Vimeo上的视频,上面文章里的一些色环截图都是来自这个视频。搭梯子访问

一个网站:Color Hunt,每天更新两条很有想法的配色方案,缺乏灵感的时候不妨一看。

欢迎关注作者的微信公众号「ZUO设计」

zuoshejiqr

中文字体免费打包下载」

  1. 《中文字体来咯!12款怀旧风格的字体免费打包下载(个人非商用)》
  2. 《中文字体第二弹!12款手写风格的字体免费打包下载(个人非商用)》
  3. 《吸睛利器!20款适合作为标题的字体免费打包下载(个人非商用)》
  4. 《端午节福利!27款张力十足的中文书法字体免费打包下载(个人非商用》

yestone-uisdc-2

【优设网 原创文章 投稿邮箱:2650232288@qq.com】

================关于优设网================
“优设网uisdc.com“是国内人气最高的网页设计师学习平台,专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书:史上最全的设计师图书导航:http://hao.uisdc.com/book/
设计微博:拥有粉丝量112万的人气微博@优秀网页设计 ,欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航:全球顶尖设计网站推荐,设计师必备导航:http://hao.uisdc.com

优设大课堂

非特殊说明,本文版权归原作者所有,转载请注明出处
本文地址:https://www.uisdc.com/simplest-color-matching-guideline

发表评论 加载中....

评论加载中....

uisdc

评论区都快饿瘪了,看看我期盼的小眼神...

sketch 优设大课堂 转场动效 界面设计 设计师 扁平化设计 交互设计师 排版布局 职场 平面设计 设计师专访 素材下载 设计流程 视觉设计 配色 用户体验设计 web前端开发 AI教程 海报设计 设计理论 字体下载 神器下载 设计规范 设计趋势 动效设计 psd下载 产品设计 图标设计 logo设计 ICON 神器推荐 职场规划 App设计 字体设计 酷站推荐 交互设计 ui设计 设计师职场 优秀网页设计 用户体验 ps技巧 酷站 PS教程 网页设计 经验分享
wechat

优设官方微信

50万设计师关注

微信号:youshege

把好文章收藏到微信

打开微信,扫码分享
学设计 优设网 在这里