生活

当前位置:手机版美高梅网站 > 生活 > 为设计员写的情调相比指南,网页设计配色剖析

为设计员写的情调相比指南,网页设计配色剖析

来源:http://www.best-sclae.com 作者:手机版美高梅网站 时间:2019-10-03 11:36

每个人都有自己最喜欢的颜色,在工作以及生活中,当购买产品或进行艺术创作的时候,他们会选择自己喜欢的颜色。对于设计师来说也是同理。设计师偏好在设计中重复使用他们最喜欢的色系。虽然命题是无限的,但是他们还是喜欢遵循自己的审美感觉。

本文摘要


一、色彩对比的基础知识
    1、色相对比
        (1)互补色对比
        (2)邻近色对比
        (3)对比色对比
        (4)零度对比
    2、明暗对比
    3、纯度对比
二、如何选择最佳的色彩搭配
三、每位设计师还需知道的
四、建议

可以说我们每个人每天无时无刻都在和颜色打交道,作为一名设计师,对颜色更是敏感。色彩的搭配影响着每个作品的成败,所以对于设计师来说,深入了解色彩掌握色彩搭配是一门重要的功课。

色彩是丰富多彩的,每一种色彩代表着不一样的心理和情感,不一样的色彩体现的情感让人们在视觉上心里上的作用都不一样。不一样的颜色碰撞也会给人们产生不一样的心理感受,这是色彩心理学教会我们的。色彩对比在生活中起着举足轻重的作用,所以我们要去深入的了解色彩对比的更多信息内容。包括色彩是什么?什么样的色彩搭配让人振奋人心?什么颜色组合对比是禁忌的?……了解完这些知识后,你就能明白什么颜色搭配组合能让客户或受众满意。

可以说我们每个人每天无时无刻都在和颜色打交道,作为一名设计师,对颜色更是敏感。色彩的搭配影响着每个作品的成败,所以对于设计师来说,深入了解色彩掌握色彩搭配是一门重要的功课。

4166金沙手机官网 1

一、色彩对比的基础知识

不同的颜色可以表达不同的感受,颜色上的对比也有很多,这个跟色彩构成有很大的关系。色彩对比的基础知识主要给大家讲讲几个重要的对比方式:色相对比、明度对比和纯度对比。

色彩是丰富多彩的,每一种色彩代表着不一样的心理和情感,不一样的色彩体现的情感让人们在视觉上心里上的作用都不一样。不一样的颜色碰撞也会给人们产生不一样的心理感受,这是色彩心理学教会我们的。色彩对比在生活中起着举足轻重的作用,所以我们要去深入的了解色彩对比的更多信息内容。包括色彩是什么?什么样的色彩搭配让人振奋人心?什么颜色组合对比是禁忌的?……了解完这些知识后,你就能明白什么颜色搭配组合能让客户或受众满意。

推广成功、运营优秀的网站,往往让用户感觉到页面和谐感强、视觉效果符合本能审美、元素具有图像象征且与产品服务紧密联系,这归功于网页设计。

1、色相对比

色相即各类颜色色彩的相貌称谓,任何黑白灰以外的颜色都有色相的属性。如朱红、普蓝、柠檬黄等。色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。

4166金沙手机官网 2

色相环是由原色、二次色和三色色组合而成(可看标准24色相环)。色相环中的三原色是由红、黄、蓝,在环中形成一个等边三角形。二次色是橙、紫、绿,处在三原色之间,形成另一个等边三角形。
红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色为三次色,三次色是由原色和二次色混合而成。

根据上面的色相环可以看出色环上的颜色是多丰富多彩,随意抽取两个颜色,都能形成不一样的对比。因此色相对比又分很多,有补色对比、对比色对比、邻近色相对比等等。

备注:原文中出现的所有案例都带有链接,可点开对应链接单独查看效果。

绿色的定义

(1)互补色对比

在色相环的组成中,相隔 180 度的色彩我们称之为互补色:红与绿互补,黄与紫互补而蓝色与橙色互补。互补色的对比效果强烈、眩目、响亮、极有力,但也需要慎用,因为使用不当易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。

4166金沙手机官网 3

一般在设计作品中,比较少的设计师会采用互补色来做作品的配色,因为互补色在实际应用中把握不好的话比较危险,容易让人产生不舒服、不协调的不舒适感。也有不少优秀的设计师将互补色运用得非常出色。以下这些知名的标志设计就采用了互补色来搭配的:

4166金沙手机官网 4

一、色彩对比的基础知识

绿,是一种颜色,绿色处于光谱中间,波长较短,大约为500~570nm。在减色法中,绿色不是主色,但是可以由黄色和蓝色、或者黄色和青色创造出来的。绿色是加法三原色之一。

(2)邻近色对比

邻近色对比好理解一些,好比黄色跟橙色可以称为邻近色,草绿和果绿也可称为邻近色。色相环上相邻的二至三色对比,色相距离大约30度左右,为弱对比类型。邻近色相对比效果感觉柔和、和谐、雅致、文静,但也会让人感觉单调、模糊、乏味、无力,所以必须调节明度差来加强效果。

4166金沙手机官网 5

邻近色之间往往是你中有我,我中有你。比如:朱红与桔黄,朱红以红为主,里面略有少量黄色;桔黄以黄为主,里面有少许红色,虽然它们在色相上有很大差别,但在视觉上却比较接近。在色轮中,凡在90度范围之内的颜色都属邻近色的范围。

不同的颜色可以表达不同的感受,颜色上的对比也有很多,这个跟色彩构成有很大的关系。色彩对比的基础知识主要给大家讲讲几个重要的对比方式:色相对比、明度对比和纯度对比。

Green

(3)对比色对比

色相对比距离约120度左右,为强对比类型,要比邻近色相对比鲜明、强烈、饱满。丰富,容易使人兴奋激动和造成视觉以及精神的疲劳。如黄绿与红紫色对比等,但是颜色之间协同统一的工作也比较难做。这种对比不容易单调,但一般需要采用多种调和手段来改善对比效果,不然就容易产生杂乱和过分刺激的效果。

4166金沙手机官网 6

1、色相对比

4166金沙手机官网 7

(4)零度对比

零度对比其实也分了几块,比如无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种,这块只要理解下无彩色的概念即可。

无彩色指的就是没有色相的颜色,前面小编说的颜色都有色相,但黑白灰这三种是没有色相的,所以也被称为无彩色。

无彩色对比:如黑与白 、黑与灰、中灰与浅灰,或黑与白与灰、黑与深灰与浅灰等。

无彩色与有彩色的对比:如黑与黄、白与蓝等。

同种色相对:如蓝与浅蓝(蓝+白)色对比,橙与咖啡(橙+灰)或绿与粉绿(绿+白)与墨绿(绿+黑)色等对比。

无彩色与同种色相比:如白与深蓝与浅蓝、黑与桔与咖啡色等对比。

色相即各类颜色色彩的相貌称谓,任何黑白灰以外的颜色都有色相的属性。如朱红、普蓝、柠檬黄等。色相是色彩的首要特征,是区别各种不同色彩的最准确的标准。

网页设计中的绿色

2、明暗对比

明度指的就是色彩的亮度。比如:深黄、中黄、淡黄、柠檬黄等,这些黄颜色在明度上就不一样。颜色有深浅、明暗的变化,这些颜色在明暗、深浅上的不同变化,也就是色彩的明度变化。

两种以上色相组合后,由于明度不同而形成的色彩对比效果称为明度对比。它是色彩对比的一个重要方面,是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。

4166金沙手机官网 8

可以看到,明度变化里面也有低中高明度区分的。

4166金沙手机官网 9

4166金沙手机官网 10

Digital Asset 数据产品网站和POCARI SWEAT这两个网站都采用了明暗对比来设计的。在POCARI SWEAT网站的界面当中,右边的深蓝色显得比较稳重,左边导航部分采用一个明亮的蓝色,左右两边形成了鲜明的对比,这样的界面稳重中又带着轻快,视觉效果也比较好。

4166金沙手机官网 11

绿色在网页设计中效果极佳,因而被广泛的应用。可能是因为绿色是自然中最多的颜色,绿色能够唤起一种人类对于自然的本能意识。高手能够行之有效的将绿色和其它颜色有机结合,奏出一曲色彩、色调、明暗完美互补的视觉三重奏,让人兴趣满满。

3、纯度对比

纯度指的是色彩的鲜艳和深浅程度。纯度是色彩鲜艳度的判断标准,纯度最高的色彩就是原色,随着纯度的降低,色彩就会变暗、变淡。

纯度指的就是饱和度,柠檬黄的纯度是比较高的,当加入一点红色之后就变成橙色,因而柠檬黄和橙色就形成了纯度上的对比。两种以上色彩组合后,由于纯度不同而形成的色彩对比效果称为纯度对比。它是色彩对比的另一个重要方面,但因其较为隐蔽、内在,故易被忽略。在色彩设计中,纯度对比是决定色调感觉华丽、高雅、古朴、粗俗、含蓄与否的关键。

4166金沙手机官网 12

纯度变化里面也有低中高纯度区分。

4166金沙手机官网 13

纯粹纯度上的变化案例比较不好找,因为颜色到低纯度之后颜色本身就变得很脏,色彩本身也不好看。所以很少设计师会去做纯粹纯度上的变化,一般都是结合明度变化加纯度变化。James Gillen-詹姆斯吉伦设计师个人网站,从界面叠加的玫红色当中可以看到中纯度的玫红和一些比较低纯度的,界面的整体冲击力还是比较强的。

后面的纯度和明度可能比较容易混淆,纯度指的是颜色的饱和度,明度指的是颜色的明暗程度,这样说可能比较好区分。关于色彩对比在网页当中的应用,小编就给大家分析这三大点。色彩构成的内容涉及的比较广,也只能选择了其中几个有代表性的跟大家分享。

色相环是由原色、二次色和三色色组合而成(可看标准24色相环)。色相环中的三原色是由红、黄、蓝,在环中形成一个等边三角形。二次色是橙、紫、绿,处在三原色之间,形成另一个等边三角形。

而材质的加入也能改变颜色的效果,比如,粗糙的材质表面让颜色看起来更深,平滑的表面让颜色看起来更浅。

二、如何选择最佳的色彩搭配

关于色彩对比的重要性,其实不用说应该大部分设计师都知道。色彩对比为受众提供了视觉上的享受。我们可以试想一下,如果整个设计作品都是一个颜色,或者都是一个色系的,那这个作品拿出来得多无聊。

强烈的色彩对比可以比较抓人眼球,特别是在超市的货架上,我们往往很容易被一个色彩对比明显的包装所吸引。网页的界面设计也是,我们更加容易被色彩绚烂,对比明显且好看的界面所吸引。

列举的三个网页界面截图,第一个注意到的其实是最后一个,比较抓眼球,这样的色彩对比让受众有所期待,对该产品或者网站印象深刻。

4166金沙手机官网 14

我们在给一个作品配色的时候,我们会选择多种的配色方案,根据上面介绍的色彩基础知识,我们可以分成:

红橙、黄橙、黄绿、蓝绿、蓝紫和红紫六色为三次色,三次色是由原色和二次色混合而成。

正如色彩理论专家J.L.Morton说的那样:

1、单色配色

单色的配色很简单,这样的界面通常相对比较单调。简单举个例子,我将色环上的颜色排列成一行,方便对比查看:

4166金沙手机官网 15

4166金沙手机官网 16

Nineswiss这个网站设计,采用了单色设计,界面效果比较单调。所以一般情况下我们建议采用单色的时候,可以多用几个同色系的颜色来协调,这个可以采用相关的纯度明度变化的颜色。例如:

4166金沙手机官网 17

LOHBS的这个网站,虽然采用了橙色来做主色,同时利用了其他一些纯度明度上变化的颜色来丰富界面。当然,也用到了部分的邻近色,比如黄色。但是这种配色方案可以增加视觉的冲击效果,增加画面的丰富性。

根据上面的色相环可以看出色环上的颜色是多丰富多彩,随意抽取两个颜色,都能形成不一样的对比。因此色相对比又分很多,有补色对比、对比色对比、邻近色对比等等。

成功的设计知道如何用色彩去传达意义。网页设计师应该像对待图形和布局一样认真对色彩其中蕴藏的象征意义。

2、互补色配色

互补色的使用,前面说过了,冲突性会比较强,所以使用中需要谨慎。

运用要领:互补色, 75%+25%+ 5%。

由于互补色之间的对比相当强烈,因此在实际运用过程中,配色的比例相当的重要。详见下图:

4166金沙手机官网 18

当两个互补色出现在画面当中的比例各为50%的时候,画面的冲突性比较大,这样的配比对比是及其不舒服的。当橙色占三分之一和四分之一的时候会比之前二分之一占比的视觉效果要好很多。最后一个图在互补色中间加了一个白色做协调,使得整体的过渡更加柔和,这样的搭配是最舒服的。

在实际的运用过程中,我们可以选择其中之一的颜色为大面积,构成主调色,而另一颜色为小面积作为对比色。日本的设计师 まりっぺ也针对色彩的配色提出比例原则 75%、25%与 5% 的配色比例方式 ,这个原则跟上面说的一致,两个互补色各占75%和25%,剩下的用5%的过渡色来做画面的协调色,使得主次分明。来看看实际应用中的作品:

4166金沙手机官网 19

4166金沙手机官网 20

奥塞梯馅饼的官网就是用了红绿互补色的对比设计的。绿色的占比面积比较少,中期用了大量的黄色做协调,整个网页界面非常的出色。

(1)互补色对比

绿色在心理学上具有冲击力,因此被应用于广告、机构标识和电子媒体中。想要在网络上创收的工业制造商通常会发现,官方主页上使用绿色效果很棒。

3、邻近色配色

邻近色配色这个方案用得比较多,因为邻近色有相似的颜色特点,但又各有特性,所以这样的搭配方式比较受欢迎。比如黄色、橙色、红色的组合使用,绿色和蓝色的组合搭配。下面列举部分常用的邻近色搭配方案:

4166金沙手机官网 21

以上列举的都是3种的邻近色搭配,在实际应用中切勿平均比例去应用,这样出来的界面效果一定不好看。具体比例的建议可以一个大的为主其他两个颜色为辅助色做点缀。

这里没有列举到紫色,不是说紫色不常用,紫色在多数网页当中出现都是比较特殊的,邻近色上比较搭配的是蓝色和红色,但是一般紫色出现的占比面积大的时候,蓝色和红色一般占比面积会比较小,这个就不单独拿出来讲解了。

4166金沙手机官网 22

4166金沙手机官网 23

Kresko食品网站应用了邻近色的对比,黄色的界面中添加了橘色和红色,邻近色的运用会让整个页面比较协调,看起来也比较舒服。

在色相环的组成中,相隔 180 度的色彩我们称之为互补色:红与绿互补,黄与紫互补而蓝色与橙色互补。互补色的对比效果强烈、眩目、响亮、极有力,但也需要慎用,因为使用不当易产生幼稚 、原始、粗俗、不安定、不协调等不良感觉。

很多设计师认为,当按钮和选项采用绿色时,能够吸引更多的点击或操作,具有很强的行为召唤力

4、零度对比配色

从上面讲解的零度对比分很多种,常见的有无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种。常用的基本是无彩色与有彩色的对比。

零度对比的配色比较个性,给人一种比较冷酷的视觉感受。无彩色虽然无色相,但它们的组合在实用方面很有价值。其中无彩色和有彩色的搭配使用会比较出色,如果是使用无彩色的话,建议跟有彩色搭配比较好。

4166金沙手机官网 24

MINI 5-DOOR HATCH这个网页就是采用了无彩色和有彩色的对比,整体画面色彩对比特别明显,容易彰显个性和主题。黑色的底色、白色的字体和灰色logo,无彩色的黑白灰都运用到了。有彩色选用了蓝色,比较明亮,也跟产品的颜色相呼应。在整个画面当中,倘若没有蓝色出现,画面会变得枯燥单调,加入蓝色之后,整个画面鲜活起来了。

4166金沙手机官网 25

NewsTech设计公司这个网站采用了无彩色的对比,整个界面都是用了黑白灰来表现,一般这种界面都会显得比较冷酷和个性,但看久了也会觉得有点单调。这个界面在黑白灰的处理上做得特别好,通常只用黑白灰来表现主题难度很大,因为对于界面的黑白关系不好掌握,也不好凸显主次关系,但这个界面真是小编觉得推荐的一个,界面的主次关系很明显,在点线面的处理上可以看出设计者花了不少心思。

4166金沙手机官网 26

行为召唤

5、渐变配色

这两年,相信大家都打开网站,看到不少带有渐变色的界面效果,而这种效果也让很多人惊艳到。渐变色给人丰富的视觉感受,同时也能表达丰富的情感体验。

渐变色有很多方式,比如中心渐变、对角渐变、垂直渐变、水平渐变、双渐变或是多色渐变。前面说的四种渐变比较好理解,我们在ai、ps里面看到的渐变色面板,主要就是上面说的这几种。具体区分可以参照下图:

4166金沙手机官网 27

渐变色在网页当中的运用表现在很多方面,可以是整体色系上的渐变,也可以是一个小元素的渐变,不管是哪种方式的渐变,只要使用恰当,那对网站来说,便是锦上添花。

4166金沙手机官网 28

像开源即时通讯喧喧的官网一样,也是采用了渐变色的背景,整体简洁又丰富。这样的表现形式比较常见。

一般在设计作品中,比较少的设计师会采用互补色来做作品的配色,因为互补色在实际应用中把握不好的话比较危险,容易让人产生不舒服、不协调的不舒适感。也有不少优秀的设计师将互补色运用得非常出色。以下这些知名的标志设计就采用了互补色来搭配的:

WedoXHTML用绿色突出了重要的信息,同时绿色的字体也易于阅读。

6、其他配色

其他配色这个使用性也比较广泛,很多设计师不受前面几种颜色的设定,更加自由的选择对应的颜色搭配。

4166金沙手机官网 29

蝉知官网这个例子,主色调采用了绿色,但是界面中可以看到有红色、黄色的局部元素出现,整体界面也活泼一些。类似的例子还有很多,这些网站会采用较多的色彩来做对比,活跃整个界面。

4166金沙手机官网 30

Wedoxhtml

配色过程中需要注意到的一些常见问题:

(2)邻近色对比

4166金沙手机官网 31

1、文字的可读性

在颜色对比的使用过程中,一定要注意文字的可读性。切勿用互补色来处理文字,因为看上去会很不舒服。

运用要领:深色背景上用浅色字,浅色背景上用深色字。

4166金沙手机官网 32

4166金沙手机官网 33

可读性,是任何设计的必备要素,也是比较重要的一个要素。所以设计师在设计的时候,应该考虑到颜色对文本阅读的影响,设计上的处理也要跟注意一些。

邻近色对比好理解一些,好比黄色跟橙色可以称为邻近色,草绿和果绿也可称为邻近色。色相环上相邻的二至三色对比,色相距离大约30度左右,为弱对比类型。邻近色相对比效果感觉柔和、和谐、雅致、文静,但也会让人感觉单调、模糊、乏味、无力,所以必须调节明度差来加强效果。

Pagelime使用绿色,作为一种行为召唤的暗示

2、颜色不是用得越多越好

在实际运用过程中,切勿颜色使用过多,颜色多了就容易给人杂乱感,且没有美感。

4166金沙手机官网 34

4166金沙手机官网 35

Pagelime

三、每位设计师都需要知道的

全球约有8%的男性患有某种形式的色盲。这种情况在女性中比较罕见,但每17名色盲患者中有1人是女性。总共有4.5%的世界人口看不到世界其他地区的所有颜色。这个比例虽然小,但是作为一名设计师,我们也要考虑到这种特殊情况,我们希望我们的每一个作品所有人都能正常的访问或者能正常的呈现出来。

简单举个例子,红绿色盲也是常见的一种色盲人群,我的弟弟就对分不清绿色。这样一类人,意味着世界上任何含有红色/绿色的物体都不会正常呈现。例如,一个具有红色/绿色盲症的人会将紫色视为蓝色。这是因为他们无法看到有助于区分紫色和蓝色的红色。

4166金沙手机官网 36

您可以想象,这使得选择完美色彩对比的过程更加困难。如果您选择绿色作为主要背景颜色,甚至选择字体颜色,则4.5%的预期观众可能无法准确查看所有内容。他们甚至可能根据您选择的色调和色盲程度有多严格,甚至无法阅读这些词。

所以,当我们在设计作品的时候,要先确定好我们的受众人群,在配色的时候,需要再着重考虑到这些特殊人群的存在性。

邻近色之间往往是你中有我,我中有你。比如:朱红与桔黄,朱红以红为主,里面略有少量黄色;桔黄以黄为主,里面有少许红色,虽然它们在色相上有很大差别,但在视觉上却比较接近。在色轮中,凡在90度范围之内的颜色都属邻近色的范围。

4166金沙手机官网 37

四、建议

设计不是一下子就能立马进步的,它是个循序渐进的过程,需要积累需要练习。也许今天给大家介绍的这些方法还不能满足大家,配色方案如果上面列举的几种常见配色方法还不能给大家启发,那再给大家推荐几个配色网站以供参考。没有思路的时候可以去配色网站上找点灵感,下面这几个是国外知名度比较高的跟配色相关的网站。

4166金沙手机官网 38

(3)对比色对比

为何选择绿色?

Paletton

帮助平面设计师和网页设计师选择理想的配色方案,打开网站即可选择一种颜色,然后系统自动生成配套的色系供设计师使用。

4166金沙手机官网 39

色相对比距离约120度左右,为强对比类型,要比邻近色相对比鲜明、强烈、饱满。丰富,容易使人兴奋激动和造成视觉以及精神的疲劳。如黄绿与红紫色 对比等,但是颜色之间协同统一的工作也比较难做。这种对比不容易单调,但一般需要采用多种调和手段来改善对比效果,不然就容易产生杂乱和过分刺激的效果。

视觉感受器具有一些特性与限制,大多数人对于光的频谱中间部分最为敏感,比如绿色。

Adobe color cc

Adobe官方配色网站,你输颜色它出配色。

4166金沙手机官网 40

4166金沙手机官网 41

绿色是一种合成色,有多种用途,能够清晰的传达设计师的意图。绿色让食物看起来自然、清新、生态环保。在工业环境下,如果设备被涂上绿色,会让人感觉安全,同时也能促进生产。这种环保的感觉让人们感到洁净并不会危害到个人健康。

Color Palette Generator

制作配色方案。输入图像的URL以获得与图像匹配的调色板。这对于根据图片来定网站色调的比较好用。

4166金沙手机官网 42

(4)零度对比

绿色令人放松。当一想到绿色,大多数人会想到户外和植物。因此具有平静心态的功效。

Color Scheme Designer

Color Scheme Designer 后来改名成Paletton,是小编用得比较频繁的配色网站。使用时只用开一个窗口,功能完备且实用,定制性强,几乎无缺点,非要说一个的话就是复制RGB值不太方便。

4166金沙手机官网 43

零度对比其实也分了几块,比如无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种,这块只要理解下无彩色的概念即可。

绿色能够最大化可读性,降低视觉疲劳发生的几率,这在网页设计中非常关键。还能够激发用户的视觉兴趣。

Nippon Colors

这个网站没有前面几个推荐的配色网站好用,实用性不是很高。但是这是小编不得不推荐的,这个绝对是文艺范十足。

配色网站就介绍这么多,之前小乔还整理过一篇:网页设计师常用的一些工具素材合集的工具文,应该对大家有所帮助,更多设计相关的内容也欢迎大家关注小乔设计的个人博客。

4166金沙手机官网 44

无彩色指的就是没有色相的颜色,前面小编说的颜色都有色相,但黑白灰这三种是没有色相的,所以也被称为无彩色。

绿色的作用

无彩色对比:如黑与白 、黑与灰、中灰与浅灰,或黑与白与灰、黑与深灰与浅灰等。

绿色对人具有显著的心理冲击作用,在很多文化中非常流行。绿色使人宽心,经常在医疗设施上看到绿色。绿色降低血压,缓解神经紧张,放松大脑,启发创造,但也抑制胃口。绿色的视觉负担很小,以绿色为背景的图像看起来更有深度。

无彩色与有彩色的对比:如黑与黄、白与蓝等。

绿色虽然能够帮助人们走出焦虑和沮丧的情绪。但是如果使用过度,就让用户有种极度、仇恨、占有的负面情绪!

同种色相对:如蓝与浅蓝(蓝+白)色对比,橙与咖啡(橙+灰)或绿与粉绿(绿+白)与墨绿(绿+黑)色等对比。

网页设计中不同种类的绿色

无彩色与同种色相比:如白与深蓝与浅蓝、黑与桔与咖啡色等对比。

绿色对于绿色食品、保健、有机产品来说是很好的推广工具。但是要按需而定,要合理的使用。

2、明暗对比

DARK GREEN(深绿色)

明度指的就是色彩的亮度。比如:深黄、中黄、淡黄、柠檬黄等,这些黄颜色在明度上就不一样。颜色有深浅、明暗的变化,这些颜色在明暗、深浅上的不同变化,也就是色彩的明度变化。

通常与金钱和野心联系在一起。对于公司来说很不错。能够给用户一种强力、有名望、踏实的感觉。

两种以上色相组合后,由于明度不同而形成的色彩对比效果称为明度对比。它是色彩对比的一个重要方面,是决定色彩方案感觉明快、清晰、沉闷、柔和、强烈、朦胧与否的关键。

Heineken

4166金沙手机官网 45

4166金沙手机官网 46

可以看到,明度变化里面也有低中高明度区分的。

BRIGHT GREEN(亮绿色)

4166金沙手机官网 47

象征着自然中的生机与活力。

4166金沙手机官网 48

Yodaa

Digital Asset 数据产品网站和POCARI SWEAT这两个网站都采用了明暗对比来设计的。

4166金沙手机官网 49

在POCARI SWEAT网站的界面当中,右边的深蓝色显得比较稳重,左边导航部分采用一个明亮的蓝色,左右两边形成了鲜明的对比,这样的界面稳重中又带着轻快,视觉效果也比较好。

CELADON(青瓷绿)

3、纯度对比

在中国、朝鲜、日本经常使用的绿色,后来传播到其他国家,一种难以描述的优雅感。

纯度指的是色彩的鲜艳和深浅程度。纯度是色彩鲜艳度的判断标准,纯度最高的色彩就是原色,随着纯度的降低,色彩就会变暗、变淡。

Qilady

纯度指的就是饱和度,柠檬黄的纯度是比较高的,当加入一点红色之后就变成橙色,因而柠檬黄和橙色就形成了纯度上的对比。两种以上色彩组合后,由于纯度不同而形成的色彩对比效果称为纯度对比。它是色彩对比的另一个重要方面,但因其较为隐蔽、内在,故易被忽略。在色彩设计中,纯度对比是决定色调感觉华丽、高雅、古朴、粗俗、含蓄与否的关键。

4166金沙手机官网 50

4166金沙手机官网 51

YELLOW-GREEN/LIME GREEN(黄绿/柠檬绿)

纯度变化里面也有低中高纯度区分。

因为会让人联想到反胃呕吐时的病态,要谨慎使用。对于与食物不相干的网站和保健品网站来说,是很理想的颜色。

4166金沙手机官网 52

Pado

纯粹纯度上的变化案例比较不好找,因为颜色到低纯度之后颜色本身就变得很脏,色彩本身也不好看。所以很少设计师会去做纯粹纯度上的变化,一般都是结合明度变化加纯度变化。

4166金沙手机官网 53

James Gillen-詹姆斯吉伦设计师个人网站,从界面叠加的玫红色当中可以看到中纯度的玫红和一些比较低纯度的,界面的整体冲击力还是比较强的。

OLIVIA GREEN(橄榄绿)

后面的纯度和明度可能比较容易混淆,纯度指的是颜色的饱和度,明度指的是颜色的明暗程度,这样说可能比较好区分。

非常的愉悦视觉,安宁大方,适合公众场合。但是也有一点军事色彩。

二、如何选择最佳的色彩搭配

Mocapoke

关于色彩对比的重要性,其实不用说应该大部分设计师都知道。色彩对比为受众提供了视觉上的享受。我们可以试想一下,如果整个设计作品都是一个颜色,或者都是一个色系的,那这个作品拿出来得多无聊。

4166金沙手机官网 54

强烈的色彩对比可以比较抓人眼球,特别是在超市的货架上,我们往往很容易被一个色彩对比明显的包装所吸引。网页的界面设计也是,我们更加容易被色彩绚烂,对比明显且好看的界面所吸引。

BLUE GREENS(青绿色)

4166金沙手机官网 55

最容易让人接受的绿色,对男女都有吸引力。

列举的三个网页界面截图,第一个注意到的其实是最后一个,比较抓眼球,这样的色彩对比让受众有所期待,对该产品或者网站印象深刻。

Amitkhera

我们在给一个作品配色的时候,我们会选择多种的配色方案,根据上面介绍的色彩基础知识,我们可以分成:

4166金沙手机官网 56

1、单色配色

绿色与其他颜色的搭配

单色的配色很简单,这样的界面通常相对比较单调。简单举个例子,我将色环上的颜色排列成一行,方便对比查看:

绿色和其它互补色搭配效果良好。互补色的定义:凡两种颜色相结合产生白色或灰色,则称其中一种颜色为另一种颜色的互补色。三组基本互补色:红色与绿色互补,蓝色与橙色互补,紫色与黄色互补。

4166金沙手机官网 57

了解了这些,就能有效的组织网页中的色彩搭配,深色与浅色的搭配一般不会差。另外值得一提的是,要避免在网页中使用多种色彩。最好开始设计时做做实验,调调明暗度,可以用互补色开始实验。现在,我们来看看绿色的配色方案。

4166金沙手机官网 58

绿色与蓝色的搭配

Nineswiss这个网站设计,采用了单色设计,界面效果比较单调。所以一般情况下我们建议采用单色的时候,可以多用几个同色系的颜色来协调,这个可以采用相关的纯度明度变化的颜色。例如:

自然的呼唤感,新鲜而又清澈。象征着新生事物的萌芽。

4166金沙手机官网 59

Narhir

LOHBS的这个网站,虽然采用了橙色来做主色,同时利用了其他一些纯度明度上变化的颜色来丰富界面。当然,也用到了部分的邻近色,比如黄色。但是这种配色方案可以增加视觉的冲击效果,增加画面的丰富性。

4166金沙手机官网 60

2、互补色配色

The Forbidden Corner

互补色的使用,前面说过了,冲突性会比较强,所以使用中需要谨慎。

4166金沙手机官网 61

运用要领:互补色, 75%+25%+ 5%。

绿色与褐色,棕褐色或米黄色的搭配

由于互补色之间的对比相当强烈,因此在实际运用过程中,配色的比例相当的重要。详见下图:

这种组合,有机感强,让人感觉自然循环生生不息,也适合产品包装设计

4166金沙手机官网 62

Mailchimp

当两个互补色出现在画面当中的比例各为50%的时候,画面的冲突性比较大,这样的配比对比是及其不舒服的。当橙色占三分之一和四分之一的时候会比之前二分之一占比的视觉效果要好很多。最后一个图在互补色中间加了一个白色做协调,使得整体的过渡更加柔和,这样的搭配是最舒服的。

4166金沙手机官网 63

在实际的运用过程中,我们可以选择其中之一的颜色为大面积,构成主调色,而另一颜色为小面积作为对比色。日本的设计师 まりっぺ也针对色彩的配色提出比例原则 75%、25%与 5% 的配色比例方式 ,这个原则跟上面说的一致,两个互补色各占75%和25%,剩下的用5%的过渡色来做画面的协调色,使得主次分明。来看看实际应用中的作品:

Juandiego Velasco

4166金沙手机官网 64

4166金沙手机官网 65

4166金沙手机官网 66

绿色与黄色与黑色/白色的搭配

奥塞梯馅饼的官网就是用了红绿互补色的对比设计的。绿色的占比面积比较少,中期用了大量的黄色做协调,整个网页界面非常的出色。

三种颜色的结合(绿黄黑、绿黑白)让页面具有户外运动感

3、邻近色配色

Evacare

邻近色配色这个方案用得比较多,因为邻近色有相似的颜色特点,但又各有特性,所以这样的搭配方式比较受欢迎。比如黄色、橙色、红色的组合使用,绿色和蓝色的组合搭配。下面列举部分常用的邻近色搭配方案:

4166金沙手机官网 67

4166金沙手机官网 68

Bugworldexperience

以上列举的都是3种的邻近色搭配,在实际应用中切勿平均比例去应用,这样出来的界面效果一定不好看。具体比例的建议可以一个大的为主其他两个颜色为辅助色做点缀。

4166金沙手机官网 69

这里没有列举到紫色,不是说紫色不常用,紫色在多数网页当中出现都是比较特殊的,邻近色上比较搭配的是蓝色和红色,但是一般紫色出现的占比面积大的时候,蓝色和红色一般占比面积会比较小,这个就不单独拿出来讲解了。

绿色与紫色/红色的搭配

4166金沙手机官网 70

对比强烈,生动并扣人心弦。

4166金沙手机官网 71

Designheartsme

Kresko食品网站应用了邻近色的对比,黄色的界面中添加了橘色和红色,邻近色的运用会让整个页面比较协调,看起来也比较舒服。

4166金沙手机官网 72

4、零度对比配色

Naturestable

从上面讲解的零度对比分很多种,常见的有无彩色对比、无彩色与有彩色的对比、同种色相对比和无彩色与同种色相比四种。常用的基本是无彩色与有彩色的对比。

4166金沙手机官网 73

零度对比的配色比较个性,给人一种比较冷酷的视觉感受。无彩色虽然无色相,但它们的组合在实用方面很有价值。其中无彩色和有彩色的搭配使用会比较出色,如果是使用无彩色的话,建议跟有彩色搭配比较好。

绿色与橙色/黄色的搭配

4166金沙手机官网 74

柠檬绿与橙色/黄色的搭配,营造了一种如同水果的新鲜感,让人感觉非常的健康环保。

MINI 5-DOOR HATCH这个网页就是采用了无彩色和有彩色的对比,整体画面色彩对比特别明显,容易彰显个性和主题。黑色的底色、白色的字体和灰色logo,无彩色的黑白灰都运用到了。有彩色选用了蓝色,比较明亮,也跟产品的颜色相呼应。在整个画面当中,倘若没有蓝色出现,画面会变得枯燥单调,加入蓝色之后,整个画面鲜活起来了。

Web Banner Ad Design

4166金沙手机官网 75

4166金沙手机官网 76

NewsTech设计公司这个网站采用了无彩色的对比,整个界面都是用了黑白灰来表现,一般这种界面都会显得比较冷酷和个性,但看久了也会觉得有点单调。这个界面在黑白灰的处理上做得特别好,通常只用黑白灰来表现主题难度很大,因为对于界面的黑白关系不好掌握,也不好凸显主次关系,但这个界面真是小编觉得推荐的一个,界面的主次关系很明显,在点线面的处理上可以看出设计者花了不少心思。

Blymp

5、渐变配色

4166金沙手机官网 77

这两年,相信大家都打开网站,看到不少带有渐变色的界面效果,而这种效果也让很多人惊艳到。渐变色给人丰富的视觉感受,同时也能表达丰富的情感体验。

网页设计中应用绿色的案例:机构篇

渐变色有很多方式,比如中心渐变、对角渐变、垂直渐变、水平渐变、双渐变或是多色渐变。前面说的四种渐变比较好理解,我们在ai、ps里面看到的渐变色面板,主要就是上面说的这几种。具体区分可以参照下图:

广泛应用,作用明显。

4166金沙手机官网 78

Nutrifield

渐变色在网页当中的运用表现在很多方面,可以是整体色系上的渐变,也可以是一个小元素的渐变,不管是哪种方式的渐变,只要使用恰当,那对网站来说,便是锦上添花。

4166金沙手机官网 79

4166金沙手机官网 80

Gbados Energy Solutions

像即时通讯喧喧的官网一样,也是采用了渐变色的背景,整体简洁又丰富。这样的表现形式比较常见。

4166金沙手机官网 81

6、其他配色

Compograss

其他配色这个使用性也比较广泛,很多设计师不受前面几种颜色的设定,更加自由的选择对应的颜色搭配。

4166金沙手机官网 82

4166金沙手机官网 83

Blossoms Village

蝉知官网这个例子,主色调采用了绿色,但是界面中可以看到有红色、黄色的局部元素出现,整体界面也活泼一些。类似的例子还有很多,这些网站会采用较多的色彩来做对比,活跃整个界面。

4166金沙手机官网 84

配色过程中需要注意到的一些常见问题:

Aquaadria

1、文字的可读性

4166金沙手机官网 85

在颜色对比的使用过程中,一定要注意文字的可读性。切勿用互补色来处理文字,因为看上去会很不舒服。

Rcleaners

运用要领:深色背景上用浅色字,浅色背景上用深色字。

4166金沙手机官网 86

4166金沙手机官网 87

Daguia

4166金沙手机官网 88

4166金沙手机官网 89

4166金沙手机官网,可读性,是任何设计的必备要素,也是比较重要的一个要素。所以设计师在设计的时候,应该考虑到颜色对文本阅读的影响,设计上的处理也要跟注意一些。

Geo Vision

2、颜色不是用得越多越好

4166金沙手机官网 90

在实际运用过程中,切勿颜色使用过多,颜色多了就容易给人杂乱感,且没有美感。

Green Globe Ideas

4166金沙手机官网 91

4166金沙手机官网 92

三、每位设计师都需要知道的

Ecoservice

全球约有8%的男性患有某种形式的色盲。这种情况在女性中比较罕见,但每17名色盲患者中有1人是女性。总共有4.5%的世界人口看不到世界其他地区的所有颜色。这个比例虽然小,但是作为一名设计师,我们也要考虑到这种特殊情况,我们希望我们的每一个作品所有人都能正常的访问或者能正常的呈现出来。

4166金沙手机官网 93

简单举个例子,红绿色盲也是常见的一种色盲人群,我的弟弟就对分不清绿色。这样一类人,意味着世界上任何含有红色/绿色的物体都不会正常呈现。例如,一个具有红色/绿色盲症的人会将紫色视为蓝色。这是因为他们无法看到有助于区分紫色和蓝色的红色。

Gbb

4166金沙手机官网 94

4166金沙手机官网 95

您可以想象,这使得选择完美色彩对比的过程更加困难。如果您选择绿色作为主要背景颜色,甚至选择字体颜色,则4.5%的预期观众可能无法准确查看所有内容。他们甚至可能根据您选择的色调和色盲程度有多严格,甚至无法阅读这些词。

Greenanysite

所以,当我们在设计作品的时候,要先确定好我们的受众人群,在配色的时候,需要再着重考虑到这些特殊人群的存在性。

4166金沙手机官网 96

四、建议

Hrasti

设计不是一下子就能立马进步的,它是个循序渐进的过程,需要积累需要练习。也许今天给大家介绍的这些方法还不能满足大家,配色方案如果上面列举的几种常见配色方法还不能给大家启发,那再给大家推荐几个配色网站以供参考。没有思路的时候可以去配色网站上找点灵感,下面这几个是国外知名度比较高的跟配色相关的网站。

4166金沙手机官网 97

4166金沙手机官网 98

E Schneider Garten

Paletton,帮助平面设计师和网页设计师选择理想的配色方案,打开网站即可选择一种颜色,然后系统自动生成配套的色系供设计师使用。

4166金沙手机官网 99

4166金沙手机官网 100

Rbc

Adobe color cc,Adobe官方配色网站,你输颜色它出配色。

4166金沙手机官网 101

4166金沙手机官网 102

Sleepydog

Color Palette Generator,制作配色方案。输入图像的URL以获得与图像匹配的调色板。这对于根据图片来定网站色调的比较好用。

4166金沙手机官网 103

4166金沙手机官网 104

Biofoolish

Color Scheme Designer,Color Scheme Designer 后来改名成Paletton,是小编用得比较频繁的配色网站。使用时只用开一个窗口,功能完备且实用,定制性强,几乎无缺点,非要说一个的话就是复制RGB值不太方便。

4166金沙手机官网 105

4166金沙手机官网 106

Cobahair

Nippon Colors,这个网站没有前面几个推荐的配色网站好用,实用性不是很高。但是这是小编不得不推荐的,这个绝对是文艺范十足。

4166金沙手机官网 107

配色网站就介绍这么多,之前小乔还整理过一篇:网页设计师常用的一些工具素材合集的工具文,应该对大家有所帮助,更多设计相关的内容也欢迎大家关注小乔设计的个人博客。

Shopify

4166金沙手机官网 108

Sprintbio

4166金沙手机官网 109

Liptongreenmint

4166金沙手机官网 110

Organic Supermarket

4166金沙手机官网 111

Reallywildtravel

4166金沙手机官网 112

Oypro

4166金沙手机官网 113

Outdooritalia

4166金沙手机官网 114

Terrasse Concept

4166金沙手机官网 115

网页设计中应用绿色的案例:机构篇

Anna Pawelczyk

4166金沙手机官网 116

Quadrifolia

4166金沙手机官网 117

Tyler Web Design

4166金沙手机官网 118

Snailbird

4166金沙手机官网 119

Anandakm

4166金沙手机官网 120

Artist in design

4166金沙手机官网 121

Inspirationbit

4166金沙手机官网 122

Ladysign

4166金沙手机官网 123

Paulicio

4166金沙手机官网 124

网页设计中绿色的应用案例:独立设计师篇

Cgalvin

4166金沙手机官网 125

Pestovo Golf

4166金沙手机官网 126

Sageblue

4166金沙手机官网 127

Somoslaperalimonera

4166金沙手机官网 128

Studio7designs

4166金沙手机官网 129

Viget

4166金沙手机官网 130

Blogfullbliss

4166金沙手机官网 131

Ztradycja w nowoczesnosc

4166金沙手机官网 132

Growmedia

4166金沙手机官网 133

绿色调色工具

Colourlovers: 有一些非常棒的绿色

Colorcombos: 便捷高效

Colorscheme: 在线的组织,用户可以分享自己的绿色主题。

保护环境

保护环境人人有责,必须要注意到对环境的保护,资源的合理利用,让自然的循环更加和谐有机。

本文由手机版美高梅网站发布于生活,转载请注明出处:为设计员写的情调相比指南,网页设计配色剖析

关键词:

上一篇:没有了

下一篇:没有了