超多案例！零基础学配色系列之红色+蓝色篇

@飞屋睿UIdesign ：人气超高的从零开始学配色教程出进阶版咯。进阶版不仅增加了更多案例，而且案例的配色也越来越丰富，特别全面的系列教程，建议收藏。

上期回顾：《带你重新全面认识色彩系列之橙色进阶篇》

红色

色彩是光的魔术。而对于人类来说，其实光也是人脑的一个魔术。既然有魔术这样的词出现，我们就必须放弃对于色彩的固化的思考。比如，对于色彩的命名带来的限制。

红色是一种热烈的色彩，它是所有色彩中最为夺人眼目的一种。红色所拥有的热情也是其他色彩所无法比拟的，当你想要表现出热情活力的一面时，红色当即是首选。然而，就像我们之前谈到的，既有热情洋溢的正红，也有轻柔粉嫩的婴儿粉红，这就是基于“红”这个意向上的色调变化所拓宽的情感空间。因此，在选用“红”作为主题色时，必须要认真的了解设计背后的传达目的，根据目的最终来瞄准精确的红色调。

深红色往往象征着一种成熟的奢华，而用得不恰当也会显露出某种邪恶，或让人联想到伤口血液这样的意向。因此在网页设计中并不多见。而高明度的红则带来某种热情的同时又不至于暗沉，使用较多的也是这个区域的色彩。

红色的邻近色系是橙色和紫色，因此，红色中也有橙红和紫红的参与，它们自然也夹杂了橙色和紫色的特点。

下面这个网页中采用了红色的明度渐变作为背景展示内容，红色本身的感染力一览无余。红色作为背景是非常大胆的想法，因此运用渐变会让背景不会抢夺走主角的风头，这也是在运用背景红色的一个解决方案。

将正红作为背景是十分冒险的行为，如果你将这样做，那么就要确保你的网站内容并不需要太多，也就是网站自身能发挥“夺眼球”的功能，而相对“实用”性将下降，毋庸置疑，一个全红的网站看久了会让人产生视疲劳。

而绝大多数情况下，红色作为主色使用更为适宜，无论你采用什么颜色作为背景，将红色用在主要的组件上，例如按钮、导航等，都能从背景凸显出来，而不同担心主要元素用户很难留意。

将缩略图设计为红色，在白色背景上方十分惹人注目，增加了点击的欲望。

我们知道，红色在色轮上属于暖色系，暖色系的色彩都有一种往前扩大的感觉。有时候为了削减红色的这种激进，可以选用偏紫的红色。

华美的紫红色降低了饱和度以后，变为了淡淡的粉红，让人感受亲切柔和，而作为背景色的存在则显得非常舒适。

网页设计这两年开始越多使用浅粉色作为大面积使用，更多时候为了营造一种怀旧感，而同时又表达出时尚。粉色的背景往往可以使用高纯度高明度的红色作为主色。

相对而言，橙红色则没有红色如此抢眼，而又没有失掉红色的活泼，更带着橙色独有的亲和力。这样的颜色在与饮食相关的设计中最为常见，可见它是一种开胃色。

非餐饮类的网页设计中用到了橙红色，也能让画面变得更加亲切活泼。

食品类的网页设计中常见用到橙红色，这种颜色能刺激人的食欲，让食物看起来更好吃。

浅色粉作为背景，将橙红色作为强调色，这一组搭配显得时尚优雅又新鲜活泼。

后记

红色作为强调色而存在，似乎显得理所应当。显然，我们对红色的开发还不尽全然，有些时候我们避免使用这种过于醒目的颜色是为了让使用变得更流畅，所以，降低红色的饱和度使其不过与抢眼，提高红色的明度让页面变得“清爽”都是在轻设计中极为重要的原则。如果真的需要用到厚重的深红色，也要试着降低其使用的比例，使其发挥精准的聚焦作用。

蓝色

蓝色作为天空和海洋的颜色，我把它称之为“宇宙色”，因此它自带浩瀚和广大是其他颜色所无法比拟的。然而又因为它是绝对的冷色调，因此在表达逻辑、理性、男性、专业、科技等主题上得以大量运用。

蓝色的色调也是相当丰富的，从深邃忧郁的深蓝，到柔和清爽的粉蓝……并不是每一种蓝色都是冷感的，与它临近的紫色和绿色都对蓝色色调有一定范围的影响。

蓝色象征着科技，这一点已为大众所接纳，因此，各种以蓝色作为背景的，对蓝色的大面积运用，在这一主题下尤为常见。以高明度的高饱和度的蓝色作为主色，抛弃了蓝色的忧郁，非常富有活力。由于蓝色容易联系到水、天空、海洋等，因此它能最大程度的发挥这类自然元素的视觉特性.

最易于和大面积的蓝色搭配的还是黑白灰，这样的搭配来得非常安全，但也会有点呆板，画面略平淡。为了打破这种单一色彩的平淡，可将背景增加一些富有动态的纹理图案，顿时让画面变得非常具有科技感。

当然，在大面积使用蓝色的时候，当你想要突出某一焦点，最好的方式就是采用它的互补色，形成视觉的冲击。

如下页面中，页头部分出现的橙色救生圈即是蓝色的互补色，这一焦点让人过目难忘。

蓝色是冷色系，因此，为了让画面不至于太冷，增加暖色系是最好解决视觉平衡的做法。红、橙、黄都是不错的选择。由于蓝色一方面和这些暖色有强烈的对比，一方面又能使画面回暖，因此在蓝色为主色的页面中增加暖色，可以说是常见的配色手法。

选用怎样的暖色，其实完全取决于你所使用的蓝色是怎样的色调。并不一定是高明度高纯度的蓝色才是最优的选择，尽管目前这一色彩受到科技界的高度青睐。

如下这一网页中选用了比较黯淡的蓝色最为主色，明度相对较低，蓝色有着淡淡的怀旧感，与此同时，橙红色也作为强调色，让画面显出活力。

蓝色在自然界中四处可见，大海、天空……每张风景照多少都会包含着蓝色这种色彩，因此在运用照片时，选用比较纯粹的蓝色系大海、山川或天空已经是一个不二之选。

风景照片能表达的主题也非常广泛：广大、辽阔……这些都给足了设计师非常优质的素材，而将风景照作为大图背景，也是近几年流行的界面样式。所不同的是，这些风景照片中的蓝色色调的不同带来不同的视觉感受，与此相匹配的色彩也有所不同。

就是由于蓝色的“宇宙”属性，让它丝毫不会困在“忧郁”这个词汇里，而增加了绿色的蓝色，显得更加有亲和力。

偏向紫色的高饱和度低明度的蓝色，有一种奢华优雅的魅力，任何色彩在降低其明度后自有一种沉稳的感觉。

当深蓝作为主色时，明亮的绿色作为搭配，相互之间是邻近色，而又因为其明度的对比，相互辉映出蓝天绿水之美

当蓝色沉寂下来，我们并不会因此而觉得压抑，只要增加其饱和度，这种蓝色就会显得非常有质感，体现出某种专业的感觉。在公司的网站中，这种体现专业感的蓝色显得中性毫不浮夸，提升了视觉的信赖感。

后记

尽管蓝色并不一定属于男性，但是深蓝色的确比其他颜色来得更为理性和克制。但根据配色的不同，赋予画面的色彩比例的差异，所演绎的色彩感觉也会不同。蓝色几乎是一种万能色，它的冷并不是绝对的，就像在深海里，当你把头望向太阳的时候，蓝色又有着一种温暖的错觉。也许这就是一种颜色说不尽的秘密。

2016年流行色：《2016流行色彩！如何在设计中运用潘通年度代表色？（附优秀案例）》

「色彩科普系列教程」

1. 红色篇：《设计师的读书笔记！带你重新全面认识色彩系列之红色篇》
2. 橙色篇：《深入浅出学配色！带你重新全面认识色彩系列之橙色篇》
3. 黄色篇：《深入浅出学配色！带你重新全面认识色彩系列之黄色篇》
4. 绿色篇：《深入浅出学配色！带你重新全面认识色彩系列之绿色篇》
5. 蓝色篇：《深入浅出学配色！带你重新全面认识色彩系列之蓝色篇》
6. 紫色篇：《深入浅出学配色！带你重新全面认识色彩系列之紫色篇》

原文地址：ifeiwu

【优设网 原创文章 投稿邮箱：yuan@uisdc.com】

================关于优设网================
"优设网uisdc.com"是国内人气最高的网页设计师学习平台，专注分享网页设计、无线端设计以及PS教程。
【特色推荐】
设计师需要读的100本书：史上最全的设计师图书导航：http://hao.uisdc.com/book/。
设计微博：拥有粉丝量180万的人气微博@优秀网页设计 ，欢迎关注获取网页设计资源、下载顶尖设计素材。
设计导航：全球顶尖设计网站推荐，设计师必备导航：http://hao.uisdc.com