颜色配搭速成!3个好用方式全面搞定配色

2021-02-22 20:00 admin
创刊词:最值得个人收藏的颜色设计方案方式!

为何要梳理设计方案颜色方式?

在颜色设计方案运用中,大家对色调不一样水平的了解,危害到设计方案网页页面的主要表现,娴熟地应用颜色配搭,设计方案时岂不事倍功半。1张出色的设计方案著作,它的颜色配搭必然和睦得体,让人赏心 悦目,反思大家在设计方案全过程中,如何的颜色配搭更非常容易做到设计方案目地,又是甚么危害了大家的配色逻辑思维呢?

下列几点常会危害颜色配搭逻辑思维:

1. 仅关心颜色表象

2. 配搭方式不足系统软件

3. 颜色与组成把握不到位

最先,大家简易了解1下色相和色彩定义:

接下来大家按3个大类的配色方式,融合1些实例 ,剖析颜色在网页页面中的运用技巧。

1、色相差而产生的配色方法

1.1 有主导颜色配色

这是由1种色相构 成的统1性配色。即由某1种色相操纵、统1画面的配色,假如并不是同1种色相,色环上邻近的相近色还可以产生相仿的配色实际效果。自然,也是有1些色相差别较大的做法,例如撞色的比照,或有没有颜色的比照,但这里先讲述带主导色的配色实例。

1.1 ⑴ 同色系配色

同色系配色是指主色和辅色都在统1色相上,这类配色方式常常会给人网页页面很1致化的体会。

twitter的实例

总体蓝色设计方案带来统1印象,色调的浓淡各自承载不一样种类的内 容信息内容,例如信息内容內容控制模块,白色底意味着客户內容,浅蓝色底意味着回应內容,更深1点的蓝色底意味着可回应实际操作,色调主导着信息内容层级,也维持了twitter的品牌形象。

见解:色调差分信号割网页页面层级和控制模块,并意味着不一样作用每日任务特性。

1.1⑵ 相邻色 配色

近邻色配色方式较为普遍,配搭比同色系略微丰富多彩,色相温和过渡看起来也很和睦。

ALIDP的实例

纯度高的颜色,基础用于组控制和文字题目色调,各控制选用相邻色使网页页面不那末简单,再把颜色饱和状态度减少用于不一样情况色和控制模块区划。

见解:根据品牌色的相邻色应用,灵便应用到各类控制中。

1.1⑶ 相近色配色

相近色配色也是常见的配色方式,比照不强给人色感宁静、调合的觉得。

BENMAPT的实例

红黄双色主导网页页面,颜色基础用于不一样组控制主要表现,鲜红色用于导 航控制、按钮和标志,另外也作輔助元素的主色。运用偏橙的黄色替代品牌色,用于內容标识和情况配搭。

见解:根据品牌色的相近色应用,有次序地用到网页页面各类控制和行为主体內容中。

1.1⑷ 中差色配色

中差色比照相对性突显,颜色比照明快,非常容易展现饱和状态度高的颜色。

facebook的实例

色调浓淡构建室内空间感,也輔助了內容控制模块层级之分,统1的深蓝色系应用,散播品牌形象。正中间色翠绿色按钮起到丰富多彩网页页面颜色的功效,另外也突显 翠绿色按钮每日任务等级为最高。深蓝色吊顶导航栏连通整站相对路径,并有正确引导客户向下阅读文章之意。

见解:运用颜色比照突显按钮每日任务优先选择级,提升网页页面气氛。

1.1⑸ 比照色配色

主导的比照配色必须精确地操纵颜色配搭和面积,在其中主导 色会带动网页页面气氛,造成猛烈的心理状态体会。

YouTube的实例

鲜红色的繁华反映內容的丰富多彩多彩,品牌鲜红色授予组控制颜色和可实际操作每日任务,贯穿全部站点的可实际操作提醒,又能反映品牌形象。鲜红色多意味着导航栏指引和类目归类,蓝色意味着登陆按钮、默认设置 客户头像和题目,展现客户所造成的內容信息内容。

见解:红蓝色反映不一样互动和信息内容的可实际操作性,对于系统软件实际操作和客户实际操作的区别。

1.1⑹ 中性色配色

用1些中性的颜色做为基调配搭,常运用在信息内容量大的网站,突显內容,不容易 受无须要的颜色影响。这类过配色较为通用性,十分經典。

Bechan的实例

黑色突显网站导航栏和內容控制模块的区别,品牌蓝色关键用于可点一下的实际操作控制,包含客户名字、內容题目。相较于大片应用品牌色的技巧,更能突显 內容和信息内容,合适之内容为王的通用性化、服务平台类站点。

见解:运用大面积中性色做为主导色,品牌色在这里起到画龙点晴的功效,用于1些必须关键突显的情景,强调互动的情况等。

1.1⑺ 多色配搭下的主导

主色和别的配搭色 之间的关联会更丰富多彩,将会有相近色、中差色、比照色等配搭方法,但在其中某种颜色会占主导。

Google的实例

针对具备丰富多彩商品线的谷歌来讲,根据4种品牌色依照1定的纯度比,再用无颜色黑与白灰能配搭出千姿百态的配色计划方案,让品牌极具统1感。在大部 分页查询面,蓝色会当做主导色,别的3色作辅色并设置不一样的每日任务特性,黑与白灰多做为輔助色,针对服务平台类站点来讲,多色主导有十分好的可塑性。

见解:谷歌设定了4种品牌色,根据次序、有效的占比运用在页面中,并根据组控制不一样的互动情况有效分派作用任 务。

2、色彩调合而产生的配色方法

2.1 有主导色彩配色

这是由同1色彩组成的统1性配色。深色彩和暗色彩等相近色彩配搭还可以产生一样的配色实际效果。即便出現多种多样 色相,要是维持色彩1致,画面也能展现总体统1性。

2.1⑴ 清亮色彩

SHOTFOLIO的实例

清亮音调使网页页面十分和睦,即便是不一样色相形同色彩的配色能让网页页面维持较高的融洽度。蓝色另网页页面造成清静冰凉的气氛,茶色让大家想起大地泥 土的厚实,给网页页面提升了平稳安稳觉得,另外温暖蓝色的冰凉。

见解:互补的色相配搭在1起,根据统1色彩的技巧,能够缓解颜色之间的比照实际效果。

2.1⑵ 昏暗色彩

定义运用的实例

昏暗的色彩3D渲染情景氛围 ,根据不一样色相的颜色转变丰富多彩信息内容归类,减少颜色饱和状态度使各色块融洽并融进情景,白色和光亮的青翠绿色做为信息内容载体展现。

Tips:多颜色历经统1色彩解决,地区间十分融洽,也不危害总体网页页面昏暗气氛主要表现。

2.1⑶ 光亮色彩

Kids plus的实例

光亮的色调开朗清楚,繁华的气氛和醒目地卡通形像描述着1场典礼,但铺满高纯度的颜色,过度刺激性,不适合长期游玩。

见解:饱和状态度与纯度特点显著的配搭,在做到视觉效果冲击性力的另外,可适度选用比照色或减少明度等方式调合视觉效果主要表现 。

2.1⑷ 深暗色彩

LEES FERRY的实例

网页页面以深暗偏灰色彩为主,不一样的颜色配搭,像在描述着不一样的故事,白色文本的排版,全部网页页面显得厚重精美,住宅小区域微渐变色提升版面质感。

见解:以低暗色彩组成总体画面氛围,小面积光亮一部分不容易危害总体觉得。

2.1⑸ 雅白色彩

Very的实例

温和的音调使网页页面显得明快溫暖,即使颜色许多也不容易导致视觉效果 负重。网页页面的同色彩配搭,色调做为不一样控制模块的信息内容归类,不抢行为主体的关键,还能烘托不一样种类载体的內容信息内容。

见解:同色彩不一样颜色的控制模块,即使承载着不一样的信息内容內容也能主要表现很和睦。

2.2 同色彩配色

这是由同1或 相近色彩中的色相转变组成的配色种类,与主导色彩配色中的属于同类技法。差别在于色彩遍布均值,沒有过深或过浅的控制模块,色彩范畴更加严苛。

Tumblr的实例

在具体的设计方案应用中,常会用些更综合性的技巧,比如总体有主导 色彩,小范畴合理布局会选用同色彩配搭。拿tumblr的公布控制模块来讲,尽管网页页面有自身的主色彩,但小控制模块应用同色彩不一样颜色的作用按钮,融合色相转变和图型表述不一样的作用点,诸多的按钮放在1起,因为同色彩缘故控制模块十分平稳统1。

见解:综合性应用的状况, 总体页面是有主导色彩,在合理布局比如关键标志等是同色彩配色灵便应用。

2.3 同色浓淡配搭

这是由同1色相的色彩差组成的配色种类,属于单1颜色配色的1种。 与主导色彩配色中的同色系配色属于同类技法。从基础理论上来说,在 同1色相下的色彩不存在色相差别,而是根据不一样的色彩阶级配搭产生,能够了解为色彩配色的1种。

Genrecolours的案 例

拿紫色页面来讲,运用同1色相根据色彩浓淡比照,构建网页页面室内空间层级。尽管颜色浓淡配搭有效,但一些无法区别次序,因为是同1色相配搭,颜 色的特点决策着心理状态体会。

见解:同色浓淡配色拥有极高的统1性,但有点枯燥乏味。

3、比照配色而产生的配色方法

因为比照色互相比照组成的配色,能够分成互补色或相反色配搭组成的色 相对性比实际效果,由白色、黑色等明度差别组成的明度比照实际效果,和由纯度差别组成的纯度比照实际效果。

3.1⑴ 双色比照

颜色间比照视觉效果冲击性明显,非常容易吸引住客户留意,应用时常常大范畴配搭。

VISA的实例

VISA是1个个人信用卡品牌, 深蓝色传递友谊安全性的品牌形象,黄色能让客户造成激动幸福快乐感。此外蓝色减少明度后再和黄色配搭,比照独特之余还能缓解视觉效果疲惫。

见解: 无论是总体比照還是部分比照,比照色给人明显的视觉效果冲击性,融合颜色心理状态学对品牌传递实际效果更佳。

3.1⑵ 3色比照

3色比照色相上更加丰富多彩,根据提升色彩关键突显某1种色调,且在颜色面积更加注重。

NAVER的实例

大面积翠绿色做为站点主导航栏,形象独特突显。应用品牌色对应的两种中差色作2级导航栏,并减少在其中1方蓝色系明度,再用同色 调的西瓜红做为当今部位情况,2级导航栏內部比照十分明显却不危害主导航栏实际效果。

见解: 3色比照中西瓜红做为强调色限制在小面积呈现十分重要,面积尺寸立即危害画面均衡感。

3.1⑶ 多色比照

多色比照给人丰富多彩圆润的觉得 ,颜色配搭融洽会使网页页面会十分精美,控制模块感明显。

Metro的实例

Metro设计风格选用很多颜色,隔开不一样的信息内容控制模块。维持大控制模块地区面积相同,控制模块內部能够细分出不一样內容等级,纯色控制模块只承载1种信息内容內容,配 上对应作用标志鉴别性高。

见解:颜色色相对性比、颜色面积比照,要是维持1定的占比关联,网页页面也能整整井然有序。

3.2 纯度比照

相对性与色相对性比,纯度差比照,比照颜色的挑选十分多,设计方案运用范畴普遍,能用于1些突显品牌 、营销推广类的情景。

PINTEREST的实例

网页页面管理中心登陆控制模块,根据减少纯度解决生产制造无色相情况,再运用鲜红色按钮的比照,产生纯度差关联。与色相对性比相较,单色比照矛盾感刺激性感相对性小1些,十分非常容易突显行为主体內容的真正性。

见解: 应用比照关键的是比照例的掌握,面积、构 图、节奏、色调、部位等1切能够产生转变的元素,产生视觉效果的明显矛盾。

3.3 明度比照

明度比照贴近日常生活具体反应,根据自然环境远近、日照角度等明暗关联,设计方案趋于真正。

ARKTIS的实例

明度比照够组成画面的空 间纵深层次次,展现远近的比照关联,高超度突显近景行为主体內容,低明度主要表现发展前景的间距。而明度差令人留意力集中化在高亮度地区,展现出药瓶的真正写照。

见解: 明度比照使网页页面显得更单纯性、统1,而高矮明度差可造成间距关联。

总结:

颜色是最能引发心情共鸣点和心态认知能力的元素,3原色能配制出十分丰富多彩的颜色,颜色配搭更是千姿百态。设计方案配色时,大家能够革除1些传统式的默认设置款式,掌握设计方案身后的要求目地,思索颜色对网页页面情景主要表现、感情传递等功效,从而有根据、有逻辑性、 有方式地搭建颜色配搭计划方案。