写给大家看的建站配色方案

须知

前言

1. 你知道为什么快餐店选择橙红色？
2. 你知道为什么社交网站选择蓝色？
3. 你知道为什么淘宝和亚马逊选择橙色？
4. 你知道为什么交通警示灯是黄红蓝吗？
5. 你知道为什么保险柜多为黑色而冰箱多为白色吗？
6. 你知道为什么正装西装以深色为主吗？
7. 你知道为什么卧室颜色多为淡色吗？

色彩搭配是网站的第一印象。深思熟虑的色彩搭配可以大大提高用户体验。在网页设计中，颜色的作用非常重要。有效的网页设计是由网站的用户，而不是网站所有者来判断的。影响网站可用性的因素很多，颜色是第一位的。

近代大神乔布斯帮主曾经说过：

设计不仅是看起来怎样或者感觉如何，设计是理想的运行（design is how it works, 翻译略有不当，或者翻译为设计不是好看是好用）。

提纲如下：

• 基本颜色，红蓝橙
• 网站设计颜色建议参考
• 色彩推荐
• 配色工具
• 规避的色彩搭配
• 高档的色彩搭配
• 颜色与感情

基本颜色，红蓝橙

每种颜色背后都有心理影响，比如：

红色，在时间上会让人感觉时间比实际时间长；在空间上暖色是前进色，会有停止的压力；传达情感丰富，印象深刻，是合作按钮，是品牌的首选颜色，做背景时要特别小心处理。

蓝色，在时间上会让人感觉时间比实际时间短，所以社交和咖啡店都是蓝色，希望人们尽量多的停留；冷色在空间上暖色是后退色，是合作背景，一张杂乱的工厂图加上蓝色蒙版瞬间高大上。

橙色，没有红色的危险警惕，暖色是一种前进色，起到兴奋和引注意力的作用，是购物网站按钮的首选；

综上，做品牌用红色，常规外贸官网用蓝色，商城网站用橙色，是不会错的颜色。

网站设计颜色建议参考

单色原则

单色制造出简洁的感觉，配合适合的留白就可以制作出大方的风格；单色+空白/负空间是非常有效的给你的网站一个现代和整洁的外观。

颜色色号通常用HEX或者RGBA来表示。在单色原则上可以略微调整颜色的浓度，饱和度，亮度等等来获得辅助色。推荐工具来直接获得色号。

互补色

互补色彩创造平衡与和谐。对文字和背景使用对比色将使阅读更容易，注意要有主次之分；

如果是三种颜色

比例可以考虑7:2:1，个人不推荐多色彩搭配。

永远不要超过3个颜色，除非你在构图超过达芬奇，配色超过梵高。

色彩推荐

冷色配深色；
推荐的几种颜色
红色+白色：突出品牌
红色+黑色：高性能运动
蓝色+白色：商务
明黄+黑色：机械
红色：#c71a1d
蓝色：#112a88
用色一般考虑是logo颜色和行业颜色，颜色有情感性别。

配色工具

paletton.com
自定义高级配色

gradient.shapefactory.co
不同渐变颜色

colorfavs.com
上传图片来分析图片的配色

getuicolors.com
深色单色做背景

www.peise.net
提供大量优秀配色方案

nipponcolors.com
日本文艺传统色

webgradients.com
推荐网站渐变背景色参考

color.adobe.com
Adobe 官方出品的配色工具

lolcolors
简洁，但非常好用的配色网站

flatuicolors.com
漂亮的扁平化配色

规避的色彩搭配

• 避免高饱和度+高饱和度
• 避免低饱和度+低饱和度
• 避免亮色+亮色
• 避免冷色+深色

总之看起来不舒服，是对比和可读性问题

高档的色彩搭配

想要网站看起来更高级（高大上），则尽量少输出颜色，即颜色浓度较低，造成高级感。之所以一些颜色看起来会显得高档，其实是因为该颜色传提出的情绪很少。而降低色彩饱和度，或者不明确色相的颜色，其实就是在降低和削减色彩对人情绪的影响。所以会看起来略显高档。

颜色越少感觉越高级，最高级的就是黑色+白色，这两种在网页设计中不算是颜色。黑白照片看起来比彩色照片高档，大部分奢侈品牌选择黑白，其实都是在降低色彩本身对于人情绪的影响，而使人感觉高档。

色彩饱和度较高的颜色，也就是我们通常所说的鲜艳的颜色，本身就会对我们观看者的情绪造成影响。鲜艳的色彩创造情感，应该谨慎使用。从用户体验角度来讲，鲜艳的色彩给人危险和警示的作用，用户看到大面积鲜艳的色彩后会迅速离开，这是本能反应。

颜色与感情

色彩的心理感受，并不是人类后期赋予或者毫无根据杜撰出来的。我们现代人的行为、思维等等，其实都是因进化演变而形成的一种自然生理机制。为什么蓝色会给人没有食欲？因为自然界中就没有天然存在的蓝色食物。为什么红色橙色会给人危险的感觉？因为自然界中，很多有毒的生物表体的颜色就是如此，因此在人类长期的进化演变过程中，对于过分鲜艳的颜色，便有了独特的警觉性。还有更多的色彩心理，其实，都是因人类进化而逐渐被我们确定认知的。

• 红色，会让人感觉时间比实际时间长；会有停止的压力；传达情感丰富，印象深刻，是品牌的首选颜色。
• 蓝色，会让人感觉时间比实际时间短，所以社交和咖啡店都是蓝色。
• 橙色，没有红色的危险警惕，暖色是一种前进色，起到引注意力的作用，是购物网站的首选；
• 而想要网站看起来更高级，则尽量少输出情感，即颜色饱和度较低，可以造成高级感。
• 黄色是充满活力的，给人以幸福和活力的感觉。此外，它与好奇心，智慧，亮度等有关。
• 绿色是和谐，自然，生命和健康的颜色。此外，它通常与金钱有关。在设计中，绿色可以具有平衡和协调效果。
• 绿色加黑：给人安稳、自私、沉默、刻苦的心理感觉。较深和较灰的绿色会产生相反的效果。这些橄榄绿色让我们想起腐烂和死亡，实际上可能对身体和情绪健康产生不利影响。
• 蓝色意味着耐心，和平，可信赖和稳定。它是最受欢迎的颜色之一，尤其是男性。它与专业，信任和荣誉有关。这就是为什么最大的社交网络使用蓝色的原因。
• 紫色传统上与权力，贵族和财富有关。在您的设计中，紫色可以给人一种智慧，皇室，高贵，奢华和神秘感。
• 粉红色表达浪漫，被动，关心，和平，感情等。
• 当力量，激情，力量和兴奋想要传递时，红色是一种很好的颜色。更明亮的色调更有活力，更暗的色调更强大和优雅。
• 橙色吸引注意力而不像红色那样过于强烈。这意味着快乐和创造力。橙色可以与友善，自信和勇气联系在一起。
• 加深的棕色意味着朴实，自然，耐用，舒适和可靠，放松和自信。