优秀的设计离不开优秀的配色，配色也是产品成功与否的重中之重，甚至会影响用户对内容的认知。书籍封面就是个例子。很多人都说，不会只因为封面就判断书的好坏。但是能用一个精彩的封面吸引人，为什么不呢？很显然，如果你已经吸引了别人的注意，那剩下的事儿可以交给内容了。前提是你用对了颜色。

“想明白你对一个人的真实看法，就判断你对他们的第一印象。”——叔本华 哲学家

目录

一.第一印象只有一次

二.色彩能够刺激感官

三.用对色提升可读性

四.色彩简史

一、第一次印象只有一次

一个界面中总有一个地方是希望用户重点关注或点击的，例如订阅按钮、关注按钮，或是购买按钮。不管那个按钮是什么，用户做什么动作取决于界面呈现给用户的感觉。看看下面的例子是如何让用户感受温暖，友善，信任甚至是极度的兴趣。

1.Pinterest承包了红色

毋庸置疑，红色是最火热的颜色。红色是Pinterest的基础色。红色总和爱、活力和激情联系在一起。我们经常在清仓和打折的地方看到红色。因为它的冲击力能塑造一种紧张感。虽然红色能让人觉的兴奋。小心点，太多的红色会让用户绕道。红色在你的色彩组合中只用来强调，把它和灰色、白色、淡蓝色或者银色混合。

红色应该这样用

我猜你应该不知道人眼能够看到的红色波长在630-700毫微米之间。超过这个范围的光是红外线，虽然人眼看不见，但是能被检测为热。 ——维基百科

优秀的红色色板 jimjim421（http://www.colourlovers.com/lover/jimjim421）

红色的10个联想1）血2）战争3）火4）暴力5）激情6）诱惑7）愤怒8）军队9）能量10）勇气

红色色号Hex Triplet: #FF0000RGB: (255, 0, 0)

2.亚马逊钟爱橙色的力量

橙色是温暖而激励的，但是没有红色强烈。这个活力而温暖的颜色似乎在邀请人们参与，而不是强迫人们紧张地做事。橙色有时候也会咄咄逼人，它鼓励人们行动，比如购买、认购、出售或者关注。如果你希望用户感到受激励的、高兴的、有创意的、充满激情的，我推荐使用橙色。

橙色应该这样用：

我猜你不知道网页颜色橙色,定义为FFA500,是CSS语言中唯一命名的颜色。——维基百科

优秀的橙色色板manekinekohttp://www.colourlovers.com/lover/manekineko

橙色的10个联想1)乐观2）果断3）火4）警告5）秋天6）信仰7）耐力8）同情9）万圣节10）微生物

橙色色号Hex Triplet: #FF7F00RGB: (255, 127, 0)

3.Facebook的蓝色给人们安全感

很多商业性网站和企业网站都喜欢用蓝色。蓝色容易让人感觉稳妥、安全、依赖和经验丰富。所以就不奇怪了，每个想要给用户留下稳定印象的企业都会使用蓝色。蓝色创造的感觉与红色完全相反。它能让人淡定，不用要担心使用的太多。你可在自己的界面上铺满蓝色。

蓝色应该这么用

我猜你不知道在德国2009年发布了一项调查，46%的男性受访者和44%的女性受访者最喜欢的颜色是蓝色。——维基百科

优秀的蓝色色板entitydesignshttp://www.colourlovers.com/lover/entitydesigns

蓝色的10个联想1) 真实2）亲切3）魔法4）男孩5）冰6）忠诚7）冬天8）警察9）天空10）水 蓝色色号：Hex Triplet: #0000FFRGB: (0, 0, 255)

4.Groupon 有个绿色的小宇宙

感受到正能量了吗？让我猜猜，你是不是刚刚在看绿色的东西？也许你只是盯着一盆绿植，但它确实能让你静下来，感到正能量。任何与绿色生活或者环境运动有关的设计会更愿意用绿色，至少在局部会用。看看100美金，是绿色的。像Groupon这样的网站会在品牌视觉系统里运用大量的绿色，因为他们直接和钱打交道。绿色清新、放松，让人感到平衡和鼓舞。它在设计中代表平衡和和谐。

绿色应该这样用

我猜你不知道在古代的中国、日本、泰国和越南，同一个词可能同时指绿色和蓝色，目前还没有经过美国食品药品监督管理局认可的绿色天然着色剂。——维基百科

优秀的绿色色板Skybluue2uhttp://www.colourlovers.com/lover/Skyblue2u

绿色的10个联想1）钱2）贪婪3）成长4）嫉妒5）自然6）春天7）健康8）年轻9）草10）希望

绿色色号Hex Triplet: #00FF00RGB: (0, 255, 0)

5.雅虎！紫色四射！

人们经常用想象力、创造力、尊严、高贵和丰富来形容紫色，紫色渐变会联想到春天和浪漫，深紫色会联想到奢华与财富。紫色广泛用在美容、时尚和内衣产品中。因为紫色镇静舒缓的能力比其他颜色多。公认紫色很女性化和浪漫。看着紫色的东西，我们很容易认为是人工的，因为自然界很少看到紫色的东西。跟红色一样，人们会觉得紫色是强烈和不可抵抗的，让人感觉被强迫去行动。所以明智的做法是把紫色和其它颜色配对，比如白色和黑色。

紫色应该这么用

我猜你不知道在2007年的4月，有人提出早期的古菌使用视黄醛（一种紫色的色素）而不是叶绿素去进行光合作用。如果真是这样，海洋和大片的海岸都是紫色的，这就是自地球假说。——维基百科

优秀的紫色色板 Miakahttp://www.colourlovers.com/lover/Miaka

紫色的10个联想1）财富2）皇室3）高贵4）精致5）浪漫6）人造的7）异域风情的8）灵性的9）奢华的10）女性化的 紫色色号Hex Triplet: #800080RGB: (128, 0, 128)

6.聪明的单色设计

通常，白色、黑色、深灰色、浅灰色被设计师用来做背景色，衬托有冲击力的主色。如同上图的网站，用橙色作为主色，深灰、浅灰、白色作为辅助色进行了组合。黑色一贯被认为代表现代、神秘、优雅和力量。灰色是中性的颜色，代表平静和不显眼的，例如影子。灰色有时候看起来脏脏的，白色的效果正好相反，白色代表了干净、开放、简约和极简派艺术。

单色应该这么用

我猜你不知道在数码摄影中，单色是传感器通过捕捉黑色的阴影得到的，或者在后期的图像处理中，通过色彩多个通道的组合来感知明度才最终呈现。——维基百科

优秀的单色色板munsterihttp://www.colourlovers.com/lover/munsteri

单色的10个联想1）力量2）优雅3）空间4）柔软5）天堂6）和平7）天真8）悲观9）沮丧10）无聊 单色色号黑色Hex Triplet: #000000RGB: (0, 0, 0)灰色Hex Triplet: #808080RGB: (128, 128, 128)白色Hex Triplet: #FFFFFFRGB: (255, 255, 255)

你最喜欢什么颜色呢？你最爱的颜色给你什么感觉呢？下面我们来看看色彩能如何影响我们的感官，界面设计中如何进行色彩组合？

二.色彩能够刺激感官

色彩能够刺激人们，例如提高食欲，让人感觉温暖和平静。这个部分将着重讲这个内容，博主还搜集了好多干货，希望能给你一些灵感。色彩动力学认为红色能让人兴奋。可口可乐的网站是红色的，它让你想起一个慵懒、炎热的夏日——就是你想喝可乐的季节。

图片来源StockLogos（https://stocklogos.com/）

除了情绪上的影响，色彩还有别的作用。人们在红光下比在蓝光下赌的更多。这就是为什么拉斯维加斯这样的城市红光用的多。色彩对行为有影响。红光能让人行动更快，感觉更有力量,不过，也有反面的影响。相对的，蓝色能让人三思而后行。有个日常的例子，“STOP”的路牌是红色的，你必须立刻停止你的座驾，不然会很危险。1.混合的颜色如果颜色混合得当是有益的。人们经常混合互补色，但这种做法只能偶尔用。使用过度对人的视力有损伤。想象一下黑色的网站配上粉色的文案，我一秒钟都不想看见。关于互补色有个小游戏。在两个互补色的图形周围画上一条很细的线（白色、灰色或者黑色）,眼睛就能分别在一个图形里看到两种颜色。我们来看下方的百事可乐的logo,白色的带子把蓝色和红色分开了，这样的融合比直接把红蓝部分进行拼接要好的多。

图片来源Pepsi（http://www.pepsi.com/）

2.色彩与文化

色彩在不同的地域代表的意义不尽相同。红色在中国代表幸运，在德国正好相反。财力雄厚的大型企业在进入一个新的市场之前，会花大量的钱去研究不同的颜色对不同文化的影响。很多人觉得不可思议，但客户很有可能因为用错了颜色就迷失了。

3.产品的颜色（特指网站、APP等产品）

为产品选择颜色比挑选一个自己喜欢的颜色加入界面布局要复杂的多。那意味着要选择对的颜色去打动我们的目标用户。如果你了解你的用户，弄明白什么颜色对他们更有用，那你在创意的路上已经成功了一半。但是选一种颜色能够满足每一位访客也是不可能的。所以重要的是大部分的用户青睐哪种颜色和调性。

根据不同的资料，有一半的用户不再访问一个网站，就是因为颜色。人们看到网站第一个识别的就是品牌的颜色。如果你有很多颜色，人们无法区别主色是什么，那你得重新设计了。 1）假设你有一个蓝色的配色，如果人们心情好的话会给你一个不错的反馈。假设你需要一个干净、白色的设计，蓝色也可以满足。但如果你想让人们兴奋起来，多用点红色和橙色。绿色和白色搭配起来很棒。如果你想现代有型，不要用强烈的颜色，用白色和灰色，这样的配色很迷人，时尚、清新和干净。看看下面这个案例：

2）如果你喜欢深色的色调，黑色可以做任何搭配，因为黑色不是主色。网站的背景如果是黑色的，看上去很棒充满幻想，但是不容易阅读。最简单的组合是黑色和白色，或者黑色和亮灰。虽然黑色和橙色搭配很有冲击力，但需要白色去平衡。

3）黑白搭配蓝色也不错。确保白色是主色，不然你就需要亮蓝去做主色了。组合中不要太强调黑色。下面的第一个案例不错，第二个案例就很惨了，不仅仅是因为设计陈旧，主要是颜色难以忍受。

4）黑白配红色也可以很棒。但要确保红色不是主色，不然会让人感觉太有压迫感，和黑色的对比也难以忍受。下面是优秀的配色：

5）我还要推荐一种组合，黑白绿。下面的案例就是推荐理由：

（本文由酷九设计翻译，转载请注明本文地址。）