Web开发者色彩搭配快速指南

html-css014

Web开发者色彩搭配快速指南,第1张

我从来都不是色彩理论的粉丝,想来大概是由于自己总是不得要领。我也希望自己能手执色轮,挑选出令朋友、客户和家人都惊叹的互补色、分散互补色和三色组合。

但理论总令我费解,老实说,我从来不觉得色彩理论在我的项目中有什么作用。多少有点讽刺的是,我经常发现在选择和使用了不错的色彩后,我才对其背后的理论有更好的认识。在这篇文章中,你不会看到一个色轮,取而代之的是一种你可以拿来就用的简单的色彩挑选流程。当然,阅读过程中,你的潜意识会学到一些色彩理论,我强烈建议你在几个月后重新阅读本文并体会其中的理论,我保证,你会有更深的理解。

我们总是能碰到像是 一千万种色彩 这类荒谬的事,想想吧,一千万。而我们只需要选择其中一种作为我们网站或品牌的基色。基色可以说是万物之源,因此非常重要,但不用担心,你不会选错的。

从无到有挑出一种颜色很简单,但那不是我们要做的。对于任何一个涉及到客户的项目,你都应该尽可能全面地验证你的选择。否则,事情将变成你喜欢的颜色挑战他们喜欢的颜色,他们就是给你钱的客户,所以他们总是赢。

但不要过于担心,你只需要确保你的选择是基于某种理由的。

利用手头的素材

如果客户有自己的Logo,logo 的主色通常就是你寻找的初始色

不要使用竞争对手的主色

如果你的竞争对手有很强的品牌主导颜色,你要做的就是在自己的产品中排除这些颜色

想想你的目标用户

一家殡仪馆的网站与一家儿童俱乐部网站在色彩搭配上通常会有很大差异,想想谁是你的目标用户,你想让他们有什么样的感受(兴奋、严肃、被呵护等等)

不要局限于思维定势

即使你是在为年轻女孩设计网站,也不必非要选用粉红色,跳出思维定势去获取用户的认可。

玩一个文字游戏

如果你纠结于色彩选择,写下所有与你客户业务有关的词语,这些词语应该能为你提供一些线索。如果仍然纠结,找一个介绍颜色含义的网站,看看哪一个最匹配。

现在,你的脑子里面应该有一个基色了,它应该一种简单的颜色,像是红色、绿色、蓝色、黄色或者粉红色。接下来我们将会选合适的明暗度。

我们假设你的选择是蓝色。

与其在 Photoshop 提供的调色板中纠结,不如像艺术家一样去”盗取“他人的设计决策。

首先,访问 Dribbble 和 Designspiration 并点击“色彩”链接,你将看到两个相似的界面:

通过这种方法,你可以找到具有合适明暗度的蓝色。

清新活力的品牌选择明亮一些的蓝色(下图顶部5个中的一个),对于一些较商业和严肃的品牌,底部五个中的一个

在前面介绍的两个网站中选择一种明暗度,看真实的网站是如何使用该颜色的。你可以用 CSS-Tricks 中提到的任意一种颜色拾取技术在浏览器中获取颜色的值。

看到基色有这么多明暗不同的版本只是第一步,你还将知道如何选择适当的颜色来搭配你的基色。

现在你手上应该有一个 HEX 值了,我的是#30c9e8。现在要做的是从该颜色出发,创建一套色彩组合。

当提到创建色彩组合的时候,你可能会联想到一些类似如下的图片

[图片上传失败...(image-a92d69-1525677589902)]]( https://upload-images.jianshu.io/upload_images/306465-3284c48d063d0bcd.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240 )

这类色彩组合的问题是它们通常不太实际,大多数的色彩组合包含了太多你根本用不上的颜色,尤其是考虑到我们始终会用到三种中性的颜色:

如果你执意要把中性颜色增加到8种或者9种,结果将会是一团糟。其实你只需要再增加两种颜色:

如果你能将网站所用颜色控制在上面提到的5中颜色中,你将会得到一个远好于混杂了各类互补色的网站

强调色在你的网站中只占很少一部分比例,通常是为了引导用户行动,因此需要醒目。

你下一步要做的是打开 Paletton 并输入基色的 HEX 值。

然后,点击“添加互补色”按钮,然后你就得到你的强调色了——橙色

如果你对自动产生的强调色不满意,你还可以下图左上角的按钮进行微调

我个人而言,我非常喜欢点击三角按钮产生的红色,所以红色将会是我的强调色。当然,Paletton自动挑选颜色的背后是有科学理论可依的,但我们暂按不表。

好了,下面就是我们的色彩组合了,漂亮的蓝色,醒目的红色以及搭什么都漂亮的白色。

现在唯一还缺的就是一些灰色。

在我的大多数项目中,我发现2种明暗度的灰色非常有用——深灰和浅灰,你会经常用到他们。

深灰通常是用在文字上,浅灰则是在你需要与白色有细微差异的时候使用(白色通常都是背景色)。

你可以通过下面两种方式中的任意一种选择你要的灰色:

这里我们采用 Erica Schoonmaker’s technique 方法,首先随意选择两种灰色(一明一暗,这里我们选择使用#424242和#fafafa),然后按下面的步骤操作:

我要指出的是当基色为蓝色的时候,该方法效果最好。基色为其他颜色时最好将不透明度调低至5%到10%之间,或者直接选出两种灰色。

到此我们的色彩搭配宣告完成, 希望你为此感到骄傲!

我们已经有了一套色彩组合,现在的工作是将其应用到你的网站上,这完全是另一个话题了,不过为了让你有个概念,简单举个例子。下面分别是一网页的灰度设计稿和着色后版本。

小贴士:如果你纠结网站的色彩,可以先通过灰度设计稿确定布局,弄清楚元素间的层级关系,然后尝试不同的颜色搭配。

可以看出蓝色是主色,占了大量的篇幅,而且图标中也有采用。

我们的强调色,漂亮且醒目的占据了很小的一块区域。对强调色的使用越少,其突出。

深灰色用在了文字,标志和图标轮廓上(即使是细小如图标这样的元素,也值得去研究色彩的搭配,记住细节决定整体)。

白色和浅灰色组成了背景色。实际上可以不用浅灰色,不过我发现这一细节的处理让整个网站更加的赏心悦目。

需要强调的是,文字的颜色务必要与背景形成足够的反差,这样才不会对色盲和弱视人士造成困扰。有许多工具可以帮助你寻找符合 WCAG Guidelines. 的颜色。两个流行的工具分别是 WebAim Color Contrast Checker 以及 Lea Verou 的 Contrast Ratio 。

如你所见,无需更多的色彩,今天我们创建的这款色彩组合就能打造出漂亮的网页。但这并不意味你的选择要局限在这几种颜色中。

在设计过程当中,你可能会说引入更多的颜色是合理的,这当然没问题,只要细心,你完全可以利用本文介绍的技巧为你的色彩组合找到更多颜色。

重要的是,在色彩选择这件事上,你做的越多就会变得越擅长,你会渐渐知道哪些颜色可以在一起,哪些不能。有时候,本文介绍的方法可能会产生低于你期望的结果,请随意调整。

网页设计的色彩搭配设计艺术

打开一个网站,给用户留下第一印象的既不是网站丰富的内容,也不是网站合理的版面布局,而是网站的色彩。色彩对人的视觉效果非常明显,一个网站设计成功与否,在某种程度上取决于设计者对色彩的运用和搭配。因为网页设计属于一种平面效果设计,在排除立体图形、动画效果之外,在平面图上,色彩的冲击力是最强的,它很容易给用户留下深刻的印象。因此,在设计网页时,我们必须要高度重视色彩的搭配。

一、色彩的基础知识

色彩五颜六色、千变万化,我们平时所看到的白色光,经过分析在色带上可以看到,它事实上包括红、橙、黄、绿、青、蓝、紫等七色,各颜色间自然过渡。其中,红、黄、蓝是三原色,三原色通过不同比例的混合可以得到各种颜色。色彩有冷暖色之分,冷色(如蓝色)给人的感觉是安静、冰冷;而暖色(如红色)给人的感觉是热烈、火热。冷暖色的巧妙运用可以让网站产生意想不到的效果。

色彩与人的心理感觉和情绪也有一定的关系,利用这一点可以在设计网页时形成自己独特的色彩效果,给浏览者留下深刻的印象。一般情况下,各种色彩给人的感觉是:

红色代表热情、活泼、热闹、温暖、幸福、吉祥

橙色代表光明、华丽、兴奋、甜蜜、快乐

黄色代表明朗、愉快、高贵、希望

绿色代表新鲜、平静、和平、柔和、安逸、青春

蓝色代表深远、永恒、沉静、理智、诚实、寒冷

紫色代表优雅、高贵、魅力、自傲

白色代表纯洁、纯真、朴素、神圣、明快

灰色代表忧郁、消极、谦虚、平凡、沉默、中庸、寂寞

黑色代表崇高、坚实、严肃、刚健、粗莽

二、色彩搭配的原则

色彩搭配既是一项技术性工作,同时它也是一项艺术性很强的工作,因此,设计者在设计网页时除了考虑网站本身的特点外,还要遵循一定的艺术规律,从而设计出色彩鲜明、性格独特的网站。

1.特色鲜明

一个网站的用色必须要有自己独特的风格,这样才能显得个性鲜明,给浏览者留下深刻的印象。

2.搭配合理

网页设计虽然属于平面设计的范畴,但它又与其它平面设计不同,它在遵从艺术规律的同时,还考虑人的生理特点,色彩搭配一定要合理,给人一种和谐、愉快的感觉,避免采用纯度很高的单一色彩,这样容易造成视觉疲劳。

3.讲究艺术性

网站设计也是一种艺术活动,因此它必须遵循艺术规律,在考虑到网站本身特点的同时,按照内容决定形式的原则,大胆进行艺术创新,设计出既符合网站要求,又有一定艺术特色的网站。

三、色彩搭配要注意的问题

1.使用单色

尽管网站设计要避免采用单一色彩,以免产生单调的感觉,但通过调整色彩的饱和度和透明度也可以产生变化,使网站避免单调。

2.使用邻近色

所谓邻近色,就是在色带上相邻近的颜色,例如绿色和蓝色,红色和黄色就互为邻近色。采用邻近色设计网页可以使网页避免色彩杂乱,易于达到页面的和谐统一。

3.使用对比色

对比色可以突出重点,产生了强烈的视觉效果,通过合理使用对比色能够使网站特色鲜明、重点突出。在设计时一般以一种颜色为主色调,对比色作为点缀,可以起到画龙点睛的作用。

4.黑色的使用

黑色是一种特殊的颜色,如果使用恰当,设计合理,往往产生很强烈的艺术效果,黑色一般用来作背景色,与其它纯度色彩搭配使用。

5.背景色的使用

背景色一般采用素淡清雅的色彩,避免采用花纹复杂的图片和纯度很高的色彩作为背景色,同时背景色要与文字的色彩对比强烈一些。

6.色彩的数量

一般初学者在设计网页时往往使用多种颜色,使网页变得很“花”,缺乏统一和协调,表面上看起来很花哨,但缺乏内在的美感。事实上,网站用色并不是越多越好,一般控制在三种色彩以内,通过调整色彩的各种属性来产生变化。

服饰是一种无声的语言,是一种重要的体态信号,它展示着人的内在精神风貌和生活情趣。其色彩更彰显人的形象和风度,并且是不同场合中,体现服饰礼仪规范的最直接的一道风景。

服装色彩与体形美

就客观而言,人有高矮、胖瘦之分。色彩有明暗、深淡、冷暖之别。服装穿着是否美观,与人的体形有很大关系,而服装色彩对修饰改变体形的弱点,更好地展现精神风貌起着重要作用。因此,对自己的体态特征有一个明确客观的认识,慎重选择服装色彩,才能穿着得体。

一般来说体形较肥胖宜选用富于收缩感的深色、冷调,使人看起来显得瘦些,产生苗条感。如果穿浅淡色调,脸上的阴影很淡,人就显得更胖了。但是肌体细腻丰腴的女性,亮而暖的色调同样适宜。体形瘦削,服装色彩选用富有膨胀、扩张感的淡色,沉稳的暖色调,使之产生放大感,显得丰满一些,而不能着清冷的蓝绿色调或高明度的明暖色,那会显得单薄透明弱不禁风。胖体和瘦体还可利用衣料的花色条纹来调节,横色条纹能使瘦体形横向舒展、延伸,变得稍丰满;竖色条纹能使胖体形直向上长,产生修长、苗条的感觉。

臀部过大的体形,上装用明色调,下装用暗色调,上下对照,突出上装,效果会好些。腿短的人,上装的色彩和图案比下装华丽显眼一些,或者选择统一色调的套装,也可以增加腿的长度。正常体形,选用服装色彩的自由度要大得多,亮而暖的色彩显得俏丽多姿,暗调、冷色系也可搭配得冷峻迷人。选用流行色更加富于时代色彩,但是也必须考虑穿着的时间、场合,适合自己肤色,同时要讲究色彩与款式、饰物的搭配协调,注意上、下装色彩的组合搭配。

不是任何一组色彩组合都是美的,只有恰当的色彩组合才会合乎礼仪规范,并创造出美。因此,可以说,服装色彩搭配是一门艺术,其美丽真谛在于和谐,即变化于统一之中。

服装配色的基本方法

服装给人的第一印象是色彩。人们经常根据配色的优劣来决定对服装的取舍,来评价穿着者的文化艺术修养。所以服装配色,是衣着美的重要一环,也是讲究服饰礼仪的必备话题。服装色彩搭配得当,可使人显得端庄优雅、风姿绰约。搭配不当,则使人显得不伦不类、俗不可耐。要巧妙地利用服装色彩神奇的魔力,得体地打扮自己,就要掌握服装配色的一般原理。现将服装色彩搭配的主要三种方法介绍如下:

(1)同种色相配

这是一种简单易行的配色方法,即把同一色相,明度接近的色彩搭配起来。如深红与浅红、深绿与浅绿、深灰与浅灰等。这样搭配的上下衣,可以产生一种和谐、自然的色彩美。

(2)邻近色相配

把色谱上相近的色彩搭配起来,易收到调和的效果。如红与黄、橙与黄、蓝与绿等色的配合。这样搭配时,两个颜色的明度与纯度最好错开。例如用深一点的蓝和浅一点的绿相配或中橙和淡黄相配,都能显出调和中的变化,起到一定的对比怍用。

(3)主色调相配

以一种主色调为基础色,再配上一二种或几种次要色,使整个服饰的色彩主次分明、相得益彰。这是常用的配色方法。采用这种配色方法需要注意:用色不要太繁杂、零乱,尽量少用、巧用。一般来说,男性服装不易有过多的颜色变化,以不超过三种颜色为好。女子常用的各种花型面料,色彩也不要过于堆砌,色彩过多,显得太浮艳、俗气。不同色彩相配,常采用对比手法。在不同色相中,红与绿、黄与紫、蓝与橙、白与黑都是对比色。对比的色彩,既有互相对抗的一面,又有互相依存的一面,在吸引人或刺激人的视觉感官的同时,产生出强烈的审美效果。因此,鲜艳的色彩对比,也能给人和谐的感觉。如红色与绿色是强烈的对比色,配搭不当,就会显得过于醒目、艳丽。若在红与绿衣裙间适当添一点白色、黑色或含灰色的饰物,使对比逐渐过渡,就能取得协调。或者红、绿双方都加以白色,使之成为浅红与浅绿,看起来就不那么刺眼了。

在服装色彩搭配中应注意以下几点:

第一,中轻色在上、重色在下比较稳定,反之则有头重脚轻之感。但如果搭配得当,重色在上,轻色在下也可达到飘逸活跃的效果。如女士夏天穿着一条悬垂性好的白色纱裙。配以宝石蓝、孔雀绿、淡粉红、红等色上衣则会产生飘然欲仙的感觉。

第二,服装的花料与素料相配时,素料应与花料的底色或花料的主花色色彩一致;一套服装上切忌用两种不同的花料相配,除非这两种花料在色彩和花形中有着统一联系。

第三,切忌阶梯式的颜色搭配。如上身是深色,腰间是中色,下身是浅色,显得非常呆;板;相反上身浅色逐渐深下去,也一样索然无味。

色彩的喻义

服装的色彩在人际知觉中是最直接、最敏感的。对此人们只有按照一定的认识标准去选择适当的色彩和搭配方式,才能适应公众的审美要求和符合着装礼仪标准。

不同的色彩有不同的象征意义。现将各种色彩的象征意义介绍如下:

①红色。象征兴奋、热情、快乐,在感觉上给人以十分强烈的刺激作用,显示着浪漫、活泼与热烈。因此,红色的服装更显朝气和青春活力。

②黄色。象征华贵、明快,但它是一种过渡色,能使兴奋的人更兴奋,活跃的人更活跃:同时也能使焦虑和抑郁的情绪更明显。

③蓝色。象征宁静、智慧和深远,是一种比较柔和的颜色,它能使人联想到天空和海洋,给人以高远、深邃的感觉。

④橙色。象征活力与温暖,是一种明快、富丽的色彩,能引起人的兴奋与欲求,使人联想到阳光。

⑤绿色。象征生命与和平,是一种清爽宁静的色彩,能使人想到青春、活力与朝气。

⑥黑色。既可象征深刻、沉着、庄重与高雅,也可以代表哀伤、恐怖、黯淡与恫吓,是一种庄重、肃穆的色彩。它能使人们产生凝重、威严、阴森等不同感觉。

⑦紫色。象征高贵和财富,给人以富丽堂皇、高雅脱俗的感觉,是一种华贵、充盈的色彩。

⑧白色。象征纯洁、高尚、坦荡,是一种纯净、祥和、朴实的色彩,给人以明快、无华的感觉。

⑨灰色。象征朴实、庄重、大方和可靠,是一种柔弱、平和的色彩,给人以平易、脱俗、大方的感觉。