做网站前端设计必备的色彩解读之色调篇
作者:admin
发布时间:2018-12-02 17:51:10
浏览:1532次
一般一个画面中不止一种色调,但主色调是主要传递风格的,辅色调是补充完善风格。就比如页面中有主色、辅色、点缀色。主色传递主要风格,辅色补充说明,点缀色强调重点。
素色调
![](https://img.zcool.cn/community/010e4f5bcaea89a8012099c8683e3f.png)
以青色为例,将色彩分为高纯、中纯、低纯,低纯部分即素色调。这里只是个大致的划分,事实上
由于色相本身就有纯度差异,三原色(红绿蓝、青品黄)的纯度最高,其他混合色纯度偏低,比如青蓝、橙色、紫色之类的。所以实际应用中,这种划分并不是绝对的,需要灵活变化。
![](https://img.zcool.cn/community/01e9435bcaeb31a8012099c8f63eee.png)
三原色(红绿蓝、青品黄)在色相条中的位置
素色调里明度较高的部分更加温柔、柔和,单独分出来称为柔色调/淡色调,也就是常说的马卡龙少女色调。素色调准确的划分是低纯度减去柔色调所剩的部分。
![](https://img.zcool.cn/community/0111595bcaebe2a801213deafacc10.png)
素色调:低纯度有四个最本质的特点,陈旧(复古)、品质(高档)、成熟稳重(冷静/文艺内涵)、压抑灰暗
![](https://img.zcool.cn/community/0190a65bcaececa801213dea9fb824.png)
明度的划分大概是这样的,低明度=暗色调,很明显素色调与暗色调之间是有重合的地方的,所以素色调与暗色调有共同的色调特点。
暗色:成熟稳重(严肃),高档(品质),酷,神秘、阴森(恐怖)、压抑
素色调、暗色调共同点:品质感、成熟稳重。
![](https://img.zcool.cn/community/01851e5bcaed34a801213dea5b3a28.png)
素色调 暗色调 :复古 高档
![](https://img.zcool.cn/community/010d9b5bcaedaba8012099c8360de5.png)
素色调 淡色调(柔色调):复古、温柔
上下两组插画同样是以复古为主题,主色调同样是素色调,但辅色调的不同又决定了两组插画细腻风格的不同。
![](https://img.zcool.cn/community/01ebe55bcaedf7a801213dea096f7e.png)
素色调:品质感、冷静
京东这组双十一前夕的海报,一为延续之前一直主打的“品质”路线,二给天猫的狂欢来盆巨大的冷水。而素色调+大面积留白很好地体现出了品质感、冷静的特点。
![](https://img.zcool.cn/community/010dfa5bcaee6aa8012099c8172b7e.png)
素色调:品质感
![](https://img.zcool.cn/community/01f8f95bcbefd3a801213dead2f6a6.png)
这组海报的主题是“品质坚守 成就安全好外卖”,如果单单从品质感体现这点来说,这组海报柔色调比重过大,显得比较柔和少女心,换成素色调更能体现品质感。
![](https://img.zcool.cn/community/011fa95bcaef02a801213deae9fd4c.png)
素色调 暗色调:稳重可靠、品质感
![](https://img.zcool.cn/community/0130155bcaef6ba8012099c86fa815.png)
素色调:压抑灰暗
素色调:素雅文艺
同样是素色调为主色调,蓝色为主色,但左图给人压抑灰暗的感觉,右图则是素雅文艺。当素色调在画面中面积大到一定程度,整体就会给人压抑灰暗的感觉。右图河面部分对比之下偏明色调,荷花淡色调,荷叶也偏纯色调,色调、色相比左图丰富得多,明暗对比、纯度对比更加强烈。由此削弱了素色调压抑的感觉。比如摄影后期修图时明暗对比小,画面就会灰。在灰色的特点梳理时也提到过这点,见下图
![](https://img.zcool.cn/community/01d5215bcaefe5a8012099c89ca4a0.png)
素色调:内涵、故事
这组海报的主题是:夜深了,我有美食,你有故事吗?海报标题“外婆的糖水”、“兄弟牛肉”及下面的小段文字都描述了藏在美食里的那些牵动情感的往事。素色调的内涵属性很好地营造出了怀旧的故事感。
柔色调
柔色调:柔和/温柔、淡雅、轻盈、宁静、舒缓情绪,即常说的少女心马卡龙色调。
之前对色相(冷暖色)对情绪神经的影响有一个归纳,见下图。纯度也适用以下结论,高纯度色彩对生理、心理有促进亢奋作用,低纯度则是舒缓、抑制作用。所以柔色调、素色调有舒缓情绪、宁静的特点。
![](https://img.zcool.cn/community/01ff815bcaf0eaa8012099c801315d.png)
柔和 淡雅
百雀羚卖的是护肤品,面对的主要是女性人群,而女性中对这种马卡龙色调没有抵抗力的比比皆是哈~ 面向女性、婴幼儿的产品适合用这种色调。然后视觉风格中需要展现出温柔可人时也适用于这种色调。
![](https://img.zcool.cn/community/012faf5bcaf21ca801213dea3aad59.png)
温柔 浪漫 少女心 淡雅 高档
![](https://img.zcool.cn/community/01d4be5bcaf246a801213dea061430.png)
粉色的温柔感、黑色的力量感,这组海报的主题是以温柔有力的方式宣传“不再恐同”。
![](https://img.zcool.cn/community/011be45bcaf2b9a8012099c856ae2d.png)
柔和 宁静(绿色色相本身就有舒缓、平静作用)
![](https://img.zcool.cn/community/011d5a5bcaf2ffa801213dea896e99.png)
左图背景柔色调+红色纯色调,整体的风格是柔和中带着热烈、喜庆。
右图背景柔色调+人物部分明色调,整体风格柔和、明快。
明色调
明色调:轻松、明快、新鲜,积极向上的基调适用于大多数主题。
![](https://img.zcool.cn/community/0117595bcaf400a801213dea02be5d.png)
海报主题是“从美好开始一天”,明色调积极明快的基调很贴合。
![](https://img.zcool.cn/community/0139fe5bcaf429a8012099c8039ff5.png)
新鲜 干净
![](https://img.zcool.cn/community/01d3d75bcaf47fa8012099c8644d79.png)
这组海报整体是明色调+柔色调,明媚温柔,符合恋爱甜蜜的主题
![](https://img.zcool.cn/community/019a475bcaf4d6a8012099c89ef186.png)
这里的主色黄色介于明色调与纯色调之间,所以海报主色调可以说是明色调,也可以说是纯色调。黄色的色相特点里有一条是年轻活力,这点需要在明色调/纯色调的基础上才能实现,换了素色调、暗色调,则黄色也不具有年轻活力的特点了。
纯色调
纯色调:激情、热烈、时尚,廉价(高纯度容易廉价,低纯度易体现品质和高档感)。
前面讲过高纯度色彩像暖色一样,能够有效促进人的生理、心理处于亢奋状态。节日促销使用纯色调营造氛围也是由于人在兴奋、激动的情况下易受外界促销信息影响,更容易下单。高明度纯色调是无所顾忌的个性、激情、热烈,低明度纯色调则具备了纯色调+暗色调两者的特征,压抑的激情、成熟的张扬。
![](https://img.zcool.cn/community/016f785bcaf5b2a801213dea2bdd67.png)
高纯度部分即纯色调
![](https://img.zcool.cn/community/0115515bcaf63ba8012099c89c30df.png)
时尚
![](https://img.zcool.cn/community/0130f55bcaf687a801213dea2ccb38.png)
纯色调营造了节日热烈的氛围
![](https://img.zcool.cn/community/01847c5bcaf6d3a801213dea9411f4.png)
纯色调 暗色调:个性张扬 酷
这种就是比较炫酷的,炫是纯色调,酷是暗色调。暗色调的稳重感,使得与纯色调的色彩组合炫丽个性又不显花哨幼稚。
![](https://img.zcool.cn/community/016bfa5bcaf715a8012099c88951f4.jpg)
纯色调 明色调:激情、活力
海报表现出了强烈的个性、激情,形式比上图(纯色调+暗色调)艳丽地多。
天空的黄色粉色部分是明色调,紫色部分是纯色调。这里如果没有一定比重的明色调做调节,整张海报都是纯色调的话则太腻了。海报中多色相、纯色调对比强烈,但不失和谐,原因在于色彩之间的对比是渐变的,紫色、玫红、粉色、橙色、黄色,整体变化是一个和缓过渡的状态,由此缓解了对比碰撞的程度。
暗色调
暗色调:成熟稳重(严肃),沉重(厚重),高档(品质),酷,神秘,阴森(恐怖),压抑
![](https://img.zcool.cn/community/01e2645bcaf802a801213dead62342.png)
低明度部分即暗色调
暗色调与《色彩解读之黑白灰》中黑色的特点极其相似,黑色篇里讲述地很详细了,可参考这篇
https://www.zhe94.com/459.html 加以理解。
![](https://img.zcool.cn/community/01b7305bcaf86aa801213dea43a15e.png)
暗色调 素色调:庄重 厚重 历史感(与博物馆、网易新闻的气质相符)
![](https://img.zcool.cn/community/0133d75bcaf8bba801213dea7d5166.png)
暗色调:沉重感(德邦快递对于子女缺少对父母关怀的现状,沉重平静地“控诉”)
![](https://img.zcool.cn/community/01c5815bcaf8dfa801213dea23c656.png)
酷 个性
黄色也很能表达年轻个性的特点,两个十足个性的色彩搭配在一起,满满的年轻趣味感。
![](https://img.zcool.cn/community/0140ce5bcbedcca801213dea687119.png)
品质感
![](https://img.zcool.cn/community/01a37d5bcbedf5a8012099c8248713.png)
恐怖 惊悚
右图红色暗色调特别能体现血腥恐怖的感觉。在红色篇里也提过这点。
这些总结只是我现阶段对色彩的理解,肯定有局限性和不恰当的地方。
希望只是提供给大家一个参考而已~
锦幄初温/文
如需转载请保留本文出处: https://zhe94.com/460.html