【纯干货】颜色一直用不好?3招让你的颜色提升一个档次

1年前发布

原创文章 / 多领域 / 观点
阿阿董董 原创,如需商业用途或转载请与阿阿董董联系,谢谢配合。

用3招,马上让你的配色看起来高大上,转载请注明出处!!


配色永远是一个设计师最头疼的问题,配色永远配不好,并且颜色用起来显得非常脏,像下面的这张图片,就是特别明显的那种绿的刺眼的的配色,看久了心特别累。




那我们今天就理论基础开始,到后面结合一些案例来讲讲配色的方案,毕竟没有这些理论的支撑,恐怕后面配色也不会配。



关于色彩的三个属性


色相 / 明度 / 纯度


  • 色相

色相是指物理学或心理学上区别的红、黄、蓝等色感的要素之一,同时也只颜色本身,将色相按照波普上顺序进行排列,收尾相连,形成的环装图形,称为“色相环”。在色相环确定了色相之间的关系后,配色就会变得简单很多。

  • 明度(亮度)

明度是指色彩的明亮的程度,在任何颜色中添加白色,明度上升,添加黑色,明度下降。因此,色彩中明度最高的色白色,明度最低的是黑色。白色-黑色的灰度色标是明度差异的表现。同时明度也是决定文字可读性和物体外观的重要元素。两种色彩之间的差别,明度方面的对比越强烈,色彩之间的交接部分就明显.

undefined

  • 纯度(饱和度)

纯度是指色彩的鲜艳程度。新鲜水果的那种鲜艳、颜色的色彩代表是“高纯度”,树汁和泥土等天然染料那种朴素、淡雅的色彩代表“低纯度”。纯度越低,颜色浑浊,纯度最低的是灰色。纯度的高低容易形成不同的气质,一般来说,纯度越高,越有活力,充满朝气,纯度越低,则容易给人成熟稳重的印象。

undefined


色轮的基础知识


白光由可见光汇聚而成,可见光则是广谱中的拿到彩虹,将这道彩虹围城圆形,就是色轮了。我们将赤橙黄绿青蓝紫无穷的渐变简化,成为具有12种基本的颜色色轮,就跟我们美术课用过的颜料、彩铅似的。

undefined

将这个色轮的明度,饱和度降低,可以将这个色轮的宽度变得更宽,色域更广,我们常说的降低饱和度,降低明度,也就是这个意思,如图所示

undefined



了解了原色,间色,复色的概念之后,我们再来了解一下如何通过色轮上的颜色关系的表达进行配色。

1.同类色
同类色是基本的颜色关系,也是成功设计必备的搭配,他们都是属于同一色系,只不过加入了黑色或者白色或者灰色(无色彩)而已,也就是说明度、纯度、色相不同。


undefined


2.近似色
近似色在色环上是相邻的,虽然看起来很鲜明,但因为二者相邻,由近似色的原色、间色混合而成,所以所能营造出低对比的和谐分为。近似色的特变是丰富,可选且多易于掌握、使用。

undefined


3.互补色
再色轮上相对的被成为互补色(对比色),他们能造成强烈的反差,也意味着难以驾驭。洽淡的使用可以相得益彰增添活力,充满能量。

undefined


讲完工具,我们来讲讲怎么去配色


  • 单色配色法:

这个配色最常用的方法就是先确定一个你所想要用的主色调,然后再这个主色调添加10-%50%不透明度的白色或者黑色图层,组成一套配色方案。围绕主色进行配色的设计是遵循这“少即是多”的设计黄金法则,是一个非常不错的选择。


这样的配色方法能够非常好的增加我们设计中的层次,等到慢慢熟练后,我们就能够直接再HSB模式中进行调色,只是我们保证最终生产的颜色在同一色系中,我们就能够得到一个非常协调的配色方案了。

undefined

单色配色法的效果:

undefined

(以上案例均来自网络,如有侵权,请联系删除)


  • 单色配色法:

近似色配色法就是选取同主色相邻的颜色组成一套配色方案。此时,我们往往会去参考色轮。近似色尤其适合软件内容国语单调乏味的情形。使用相似的颜色可以提供视觉上的变化,活跃界面氛围。

undefined

(以上案例均来自网络,如有侵权,请联系删除)


  • 互补色配色法:

互补色配色法就是选取对比色相对较强烈的颜色进行进行配色,这一种方法也比较难掌握。我们常说的“红配绿”就是一组互补色。由于对比强烈,能够瞬间激活界面中的气质,但却很容易产生视觉上的刺激与疲劳,应谨慎使用。

undefined

有时候我们可能无法避免会用到互补色配色,但对比度太高又显得扎眼,那我们该怎么办?我们可以降低的饱和度,或者调整比例面积。

undefined

  • 直接吸取大自然的颜色

很多时候,大自然所呈现出来的配色是非常美妙的,而且因为风景的颜色大家一直都在观察着,所以涉取出来的使用后并不会让人产生方案。所以身为设计师的我们,也要学会去利用美妙的大自然带给我们的颜色。

这个方法厉害了。具体方法如下:

undefined


  • 产品色吸取法:

当我们完全没有想法的时候,我们可以直接吸取产品的颜色来进行调整,这样配出的颜色和产品更搭调。

undefined


  • 最后总结一下

配色好的界面有什么特点:主色调明确突出,一眼就能看出来,不超过4钟颜色,注意色彩的比

  • 最后分享一些在线配色网站


    COLOURlovers(www.colourlovers.com)

    Adobe Color CC(color.adobe.con)

    Color Metters (www,colormatters.com)

    paletton(www.paletton.com)

    Color Explore(www.colorexplore.com)


10
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息