网页设计中色彩搭配的运用

颜色在潜意识里影响咱们的思维和理性。咱们一向面临着颜色的挑选，从决议早上穿啥颜色的衣服开端，通常，咱们会依据颜色传递的心境和志愿来挑选穿啥衣服。比衣柜的挑选更首要的是你的品牌或网站的颜色挑选。

颜色研讨和规划是规划进程的首要有些，在开端规划之前，有必要挑选适当的颜色，以有用地履行品牌，价值传递和整体颜色。

那么咱们怎么在页面规划中运用颜色发明准确的情感呢?在人类历史上，大师级画家和别的艺术家操控颜色的才能得到了全世界的认可。现如今，颜色的这种艺术方式在商业中得到了广泛使用，一开端是在广告行业，如今是被用于页面规划。颜色不可捉摸，颜色运用的技术也得到不断改进。咱们将探究颜色理论和配色计划的根本原理，然后查看某些颜色的情感作用。

颜色理论
与颜色有关的主题浩如烟海，所以这儿咱们只谈与UI规划有关的有些。咱们能够将颜色理论分为Web UI规划的三个有些：

比照度
每一种颜色的暗影都有一个相反的–比照度远远大于任何别的颜色的颜色与之对应。你能够运用下面的色轮来找到每个特定颜色的对面。只需在圆圈的另一端找到颜色。



页面规划颜色互补
颜色并非老是相互矛盾，互补的颜色相互着重，与比照色相反，它们交相辉映出最佳的互相。这些是在色轮上互相相对的颜色，例如，紫色的弥补是绿色的。

页面规划颜色生机
每种颜色都会导致特定的心境：温暖的颜色(赤色，橙色，黄色)倾向于鼓励用户，使他们愈加警惕，而较暗的颜色(绿色，蓝色，紫色)通常愈加轻松和安静。CNN在其官网的顶部导航中运用赤色banner来进步警惕性，颜色决议合适该网站的突发新闻内容。



页面规划中的颜色理论不仅仅是一个视觉装修，它能够对你的业务产生改动游戏规则的影响。

颜色的情感含义
不能否认情感和颜色之间的联络：事实上，人类现已记录了中世纪以来颜色的心理影响。天然，任何页面规划师都想运用这一点，由于准确的颜色能为你的网站发明准确的心境和气氛。

页面规划颜色：赤色
传递：力气，首要性，芳华



作为最影响的颜色，赤色关于增加血液循环是如此有用，它代表着热心和力气，赤色是能招引最多留意的颜色，所以通常被用于正告和首要通知。赤色十分合适No Way NSA网站，其目的是唤醒关于来自NSA威胁的感知。

在单页网站的榜首有些运用赤色是格外聪明，由于它经过向下翻滚来提醒大家留意首要信息，一起生理诱导大家“走出风险区域”。当然，这只会让用户参加更多的内容。可是，这可能对你不利，由于赤色能够鼓动愤怒，或最少过度影响。假如你想要一个更轻松的气氛，请谨用(或最少在较浅的暗影)或不必。

页面规划颜色：橙色
传递：友爱，能量，绝无仅有



作为最暖的暖颜色，橙色是绝无仅有的。作为原色，它能够招引和鼓励，作为非必须的颜色，它也以不显眼的方式保存这些属性。橙色也有助于发明运动和能量的感受。除了作为品牌个性的一有些，橙色与芬达所要表达的光明和卡通画面网站很相衬。颜色显示发明力，一起坚持了解度。

页面规划颜色：黄色
传递：美好，热心，复古(深颜色)



黄色是更通用的颜色之一，取决于颜色。亮堂的黄色是最有生机的颜色，没有赤色的严重性。黄色的中心颜色给人的舒畅感，一起依然感受振作。深颜色(包含金色)能够给人复古的形象，并供给永久，才智和好奇心的空气。上图是页面规划公司Flash Media的比如，黄色的深色散出了能量，好奇心和权威。这关于一个公司来说很有含义，他们的咨询和技术很有价值。

页面规划颜色：绿色
传递：增加，安稳，金融主题，环保主题



绿色缓和了暖颜色和冷颜色之间的距离，尽管通常是更酷的颜色。这意味着绿色有与蓝色一样的放松作用，但依然保存一些黄色的鼓励质量。因而，它发明了一个十分平衡和安稳的气氛。漆黑的暗影宣布更多的富裕的感受，你能够在Ameritrade上看到绿色。

页面规划颜色：蓝色
传递：安静，安全，敞开(更浅的颜色)，牢靠性(更深颜色)



像黄色，蓝色的含义依据颜色大不一样。一切的蓝色是遍及放松和安全，但较浅的暗影好像愈加友爱，而较暗的好像更烦闷。交际媒体网站，如Twitter和 Facebook ，选用更轻或中等的颜色，而公司网站喜欢更重更牢靠的颜色。

活动规划机构Van Vliet&Trap奇妙运用深蓝色，经过在布景中的花中运用蓝色，他们在视觉上提示他们在花艺规划的专业知识，一起也发出信赖和牢靠性。这是很有含义的，由于他们计划高可见度(和有点神经紧张)事情，如婚礼。

页面规划颜色：紫色
传递：奢华，浪漫(浅颜色)，奥秘(深颜色)



在历史上与皇族有关联，紫色保存了奢华的语调，乃至到颓丧的点。紫色表明通常的奢华和财富，使它变成时尚和奢华品(乃至巧克力，像上面的Cadbury比如)的盛行挑选。较淡的颜色如薰衣草(带粉赤色的颜色)被认为是浪漫的，而较深的颜色好像愈加奢华和奥秘。

页面规划颜色：黑色
传递：力气，和婉，杂乱



作为 最强的中性色，黑色存在于简直每个网站。它能够取决于其支撑颜色而具有不一样的特性，或者假如过量运用则占有一切这些特性。它在中性的力气使它变成长块的文本的挑选的颜色，但作为一个根本的颜色能够给人的形象，柔滑，杂乱，乃至凶恶。 

关于大多数网站，黑色能发明刹那间的杂乱性和永久的感受。当与白色字体合作运用时，高雅的感受格外激烈，而且设置了一个极简主义的规划，你能够在Bose的“Dream and Reach”微网站中看到。

页面规划颜色：白色
传递：清洁，美德，简略



白色与西方文化中的美德有关联，是与纯真和无辜最有关的颜色。极简主义和简略的网站最常运用它作为布景。跟别的颜色比较，白色是最不招引留意力的，所以它最能着重页面上的别的颜色。这关于艺术家 Kaloian Toshev 的awwwards 取胜网站特别有用。白色布景招引了对他充满生机的艺术品的留意，一起发明了一个艺术画廊高雅的光环。

页面规划颜色：灰色
传递：中立，方式，郁闷



尽管在某些情况下，它可能看起来沉思或哀痛，但灰色在传统或专业领域是很盛行的挑选。可是，灰色的最大优点之一在于它的颜色改动 – 娴熟运用，在白黑之间跳动，暗影的改动，能表现出定制的美感。当与更亮堂的颜色合作并呈如今一个平面的用户界面，灰色布景的awwwards与它烦闷的个性比较，感受更有现代感。

页面规划颜色：米色
传递：周围颜色的特色



米色是颜色的通配符，由于它的首要用途是突出别的颜色。米色很钝，尽管能够用来标志谦卑。可是，它通常承当烘托它周围的颜色的特色，使其变成一个风趣的规划东西。由于这些因素，米色简直老是非必须或布景颜色。

深色的米色(如Dishoom网站上)将发明一种土质和简直纸状的纹路，而较浅的颜色感受更新鲜。在这种情况下，环绕品牌称号的较浅的暗影，向外变暗，协助给餐厅发明一种取自大地精华的新鲜食材的感受。

页面规划颜色：象牙色
传递：舒畅，高雅，精约



在情感反应方面，象牙色(和奶油)是白色的细微改动。象牙色比白色更温暖，在表现相同的精约和互补的一起，能给人一种舒畅的感受。象牙色应该被用来代替白色，以软化它和更暗的颜色之间的比照度。关于 art in my coffee 网站，橙色/棕色被添加到奶油布景(看起来有点微灰色)，以发明一种温暖的感受。

页面规划配色计划
每个网站都有一个配色计划，在它的首要区域运用首要颜色。正如咱们一向在评论的，这些颜色的重复运用将影响用户的心态和心境，通常是潜意识，所以挑选它们会极好。

尽管有很多不一样的方式来把颜色混合在一起，咱们将重视3个最成功，最常见的：
三元组
三元组是三个构造中最根本和平衡的。运用生机和互补，但偏离了棘手的比照，三元构造是最安全和最牢靠的计划。在12步色轮上，挑选互相相隔120度的恣意三种颜色：一种颜色用于布景，两种颜色用于内容和导航。



复合(割裂互补)
这个配色计划稍微杂乱，但假如用得好，能够收到不错的作用。该概念运用四种颜色：两个比照对和两个互补对。



下图中 Florida Flourish的配色即是极好的比如。赤色和绿色的比照与文本标签和植物，加上沙漠上面的蓝色和橙色的天空。一起，赤色/橙色和蓝色/绿色的弥补让全部视图很和谐。

相似
最终有相似的计划，专注于互补色。真实突出了所挑选的颜色的生机，例如，一个红橙黄色的相似计划将看起来十分生动和生动。尽管这个计划相对容易摆开，诀窍是决议运用哪种颜色的生机，由于它会被夸张。



经过运用蓝色，绿松石和绿色的相似网站。下面这个页面规划事例，留意他们怎么运用比照的黄色来招引留意他们的号召力。



咱们刚刚评论的仅仅颜色理论怎么增强你的 UI 规划的根底，可是没有限制怎么更深化的去探究对你网站颜色的使用。