设计师的配色攻略
来源:网站资料都来源于网络, 若有侵权请联系作者 | 作者:zhferge180705 | 发布时间 :2020-09-25 | 955 次浏览: | 🔊 点击朗读正文 ❚❚ | 分享到:

运用色相环

色彩搭配不只是需要设计师具备一定的色感能力,也需要设计师理解色彩之间的关系,合理有效地运用它们达到和谐平衡关系。色相环是我们认识颜色关系的重要工具。

12 色相环由 12 种基本的颜色组成。首先包含的是三原色,即蓝、黄、红。原色混合产生了二次色,用二次色混合,产生了三次色。

我们选取其中某一种色相做为基准色相,通过色相环可以很容易了解到基准色和其他五种色相之间的关系,色相离得越近搭配越柔和,相隔越远对比越强烈。

橙色与红色色相距离较近,对比比较柔和,橙色的产品在红色背景上显得协调统一;绿色与红色色相相隔较远,对比较强烈,绿色的产品在红色背景上显得比较突出。

色彩之间的搭配大体上可以分为两种:对比柔和的配色,对比强烈的配色。

在主色调选取中曾说过大自然的颜色是无穷无尽的,新手设计师只需记住六种基础色相即可。比如本次示范选取蓝色为基准色,通过色相环可以知道与之最接近的颜色为紫色和绿色,对比比较柔和。与之距离较远的是红色和黄色,对比比较强烈。橙色是距离蓝色最远的颜色,所以对比最强烈。了解这些关系之后,配色实践就变得简单多了。

对比柔和的配色:单色搭配、相似色搭配。

1. 单色搭配

在同一色相上进行纯度、明度变化,搭配上并没有形成颜色的层次,但形成了明暗的变化,单色搭配可以产生低对比度的和谐美感,给人协调统一的感觉。

采用单色对比,需要通过纯度和明度的变化拉开画面层次。

2. 相似色搭配

色相具有较强的相似色因素,但也存在适度的对比,是既有对比又协调统一的色彩基调。这也是新手设计中最常用而不容易出错的一种配色方式。

蓝色和紫色、绿色是距离最近的颜色,既有相似色因素,又存在着适度的对比,视觉效果比较柔和。

对比柔和的配色特点:

优点:对比比较柔和、容易把控;

缺点:冲击性弱,运用不得当会单调、缺少视觉层次感。需要通过纯度和明度的变化拉开画面层次,避免产生单调、呆板的感觉。

对比强烈的配色:对比色搭配、互补色搭配。

3. 对比色搭配

对比色的对比是指在色相环中相距 120° 左右的色彩所产生的对比。对比色对比由于色彩差异比较大通常产生的视觉效果强烈而鲜明。

蓝色和黄色、红色属于对比色,具有强烈的对比,视觉效果丰富、富有动感。

4. 互补色搭配

在色轮上直线相对的两种颜色,是对比最强的搭配,因此在视觉上会产生极大的隔离作用,它们组合在一起,会产生相互衬托、相互抗衡、相互排斥的感觉,并使各自的色相更显突出,更为艳丽,具有强烈的视觉冲击力。

蓝色和橙色是互补色,对比性最为强烈,高亮的橙色可以很好的缓解深蓝色的沉闷,增加画面的愉悦气氛。

对比强烈的配色特点:

优点:视觉冲击力强,层次丰富、富有跳跃性;

缺点:容易产生不协调、杂乱刺眼的感觉,比较难把控。

要控制好画面的色彩比例,选出一方作为主色调,另一方作为辅助色或者点缀色;可以降低明度、饱和度,调和其对抗性;黑白灰是万能的调和色,可以在画面加入黑白灰缓冲其强烈的对抗性。

使用配色网站

目前有大量的配色网站可以用来辅助配色,对于配色基础薄弱的新人会有很大的帮助。在这里给大家推荐的是 Adobe 公司出品的一款极为高效的在线配色工具:Adobe Color。我们可以使用其「色轮」、「从图像撷取」 、「探索」、「趋势」四大核心功能来辅助配色。(网址:color.adobe.com

1. 从「色轮」创建颜色

可以选择一个基础颜色利用七种不同的调色规则创建颜色主题。在设置了基础颜色之后,另外四个关联颜色会自动生成。然后使用色盘、亮度以及不同颜色模式的滑块来建立颜色。

调色规则 7 种模式从上到下分别为:类比、单色、三元群、补色、复合、浓度、自定。

接下来使用 Adobe Color 进行配色示范。

选择橙色为基础颜色,会自动生成四个关联颜色,把生成的颜色配置到设计好的画面中:

2. 从图片创建颜色

可以从本地上传图片,选择规则后,会自动从图片中提取颜色。调色规则有彩色、亮色、柔和、深色、暗色、自定。

比如我们上传一张摄影图片,选择规则「彩色」,把获得的五种颜色运用到我们的设计中,就可以做出新的配色方案:

3. 从「探索」创建颜色

从「探索」菜单中可以得到来自于全球各地设计师的配色方案,还可以在此之上进行进一步编辑,或者将该配色下载、保存到「我的主题」。

4. 从「趋势」创建颜色

此功能是从 Behance Adobe Stock 的创意社群,获得以下几个类别的色彩趋势: