in

10个流行的网站配色方案

当你设计网站时,有很多要考虑的事情。你必须创建布局,设置站点架构,放置行动呼叫(ctas),并选择域名,只是举几个例子。

然而,很多网站所有者很少或根本不考虑选择网站的配色方案,更别提流行的色彩方案了。他们认为:“我的网站颜色真的有多重要?”

实际上,你网站上的颜色选择对访问者的影响比你想象的要大。它们会引发特定的感觉,并且可以成为激励访问者选择的强大方式。

事实上,研究表明,人们在接触产品后的90秒内就会对其进行评判,而其中90%的评判是仅基于颜色。选择正确的颜色会影响读者对你的网站和品牌的感知。

如果做得好,它可以提高内容的可读性,提高理解力,并提高学习效果。

颜色是为你的网站增加可信度的最重要的元素之一。根据hubspot的说法,近一半的人认为网站的设计是确定公司可信度的最重要因素。

多伦多大学进行了一项有趣的关于颜色及其被个体感知的研究。他们确定大多数人喜欢简单颜色的组合。

在大多数情况下,只有两种或三种颜色被认为是吸引人的。这就是为什么坚持使用一种配色方案对你的网站的成功以及最终的业务非常重要。

但有超过1000万种颜色可供选择。这个数字令人不知所措。你如何确定哪种网站颜色最适合你的品牌呢?

无论你是从头开始设计一个新网站,还是需要为旧网站进行改版,你来对地方了。

本指南将向你展示哪种配色方案正处于流行趋势中,以便你可以找到最适合你网站品牌的颜色,以及与你想要顾客产生的感觉相匹配的颜色。我们将看一些真实网站的例子,并列出一些确切的颜色代码供你参考。

1. 轻柔色调

轻柔色调在2023年确实很流行。wells是一家电子商务品牌。以下是他们网站2023年登录页面的截图:

这些颜色柔和、高雅,非常吸引人。对于一个当代家居和装饰行业的品牌来说,这是一个完美的选择。简单的色调相互协调,并帮助家居产品的图片脱颖而出。

除了该网站所使用的简单配色方案外,布局也采取了相同的方法。留出空白区域使页面呼吸。在本指南的整个过程中,你会发现负空间的使用与你所使用的颜色一样重要。

正如你所见,文字很少。这个品牌不需要依靠大量的文字来传达他们的信息,而且他们的受众也不希望如此。

柔和的颜色给人一种高贵和精致的感觉。它不是显而易见的。

而不是试图将尽可能多的产品塞进一个页面中,这个网站采取了一种一次只展示几个产品的方法。这样访客有机会单独体验每个产品。颜色通过支持图片并突出它们来帮助实现这一点,而不是分散注意力。

如果你对在你的网站上使用这些颜色感兴趣,颜色代码是:米色(#ddd0c8)和深灰色(#323232)

2. 简约灰色,米白色和一点红色

你也不必总是选择许多不同的颜色。使用由白色阴影和主要颜色的一点点突出的网站配色方案会更不分散注意力,让你的受众能够专注于对他们来说重要的内容。

查看来自最佳恐怖场景的这个页面。这是一个专注于恐怖场景的网站,所以他们选择了一个强大但简约的设计和配色方案。

页面上还有更多的文本,但它仍然简单易读。

选择了一个略带米白色的色调,与灰色和红色配色方案相融合。这种略带米白色与醒目的红色特别搭配。

这是该网站使用的颜色代码:白烟色(#f0f0f0)和鲜红色(#e7473c)。

如果你正在寻找一个专业、简约且适合有更多文本的页面的配色方案,这是一个很好的选择。

3. 彩虹渐变与黑色文字

stripe是一个受欢迎的电子商务支付处理软件选项。作为一家科技品牌,stripe需要与最新的技术趋势保持同步。但他们的网站配色方案也很时尚。

在我们看看他们的网站现在是什么样之前,先看看他们十年前,也就是2013年的网站:

这个设计有什么问题吗?表面上看,它只是有点乏味和单调。没有什么让人视觉上吸引人的东西。

但是stripe进行了调整。它当前的配色方案使用了一种越来越受欢迎的技术——渐变。自己看看:

这个页面将活力四溢的彩虹色与明亮的白色混合在一起,为黑色文本提供了一个动态的背景。

通过使用渐变色,stripe将一个非常简单的蓝色与不同色调混合,为背景创造更多的纹理。

2013年和2023年的网站之间的区别就像天壤之别。即使你在不知道它们上线的年份的情况下看到了这两个首页,你也能够辨认出较新的那个。

如果你的网站目前过时,看起来更像2013年的stripe网站,那么尝试添加渐变色来赋予你的配色方案更现代的外观。

4. 复古的黄色和红色色调

复古的配色方案在2023年大放异彩。许多顶级品牌在他们的网站上使用了20世纪70年代、80年代和90年代的流行颜色。但是他们对其进行了现代化的改造。

通过将复古元素与现代品味结合起来,他们能够为旧潮流注入新生命。无论他们在什么时候长大,他们都能够唤起观众特定而熟悉的情感。

这有点自相矛盾。一件事怎么可能同时是复古和现代的呢?

让我们来看看circus incs.的主页。

这些温暖的橙色和红色调给人一种复古的感觉,但设计本身非常时尚,并使用渐变色来混合这些颜色。

您可以使用generational marketing来划分目标受众。确保您了解您试图以网站配色方案来定位的人群非常重要。这远远不止于为女性选择粉色设计和为男性选择蓝色设计。

circus inc选择这些颜色是因为他们知道他们的受众中包括一些在70年代和80年代成长的人。他们还知道年轻一代热衷于这些颜色。

5. 软贝壳色、白色和墨黑色

cowboy通过在现代化且略带米色的网站上销售电动自行车来区分其品牌。这个网站的时尚和潮流设计非常适合他们所销售的产品。

背景中的软贝壳色让墨黑色的自行车脱颖而出,成为焦点。通过在页面的一些细微位置添加更亮的白色点缀,cowboy bike完美地展示了时尚和现代的配色方案。

尽管贝壳色与女性有关联,但cowboy的目标用户是男女皆宜的。相反,贝壳色与黑色搭配时,会引发愉悦、时尚和社交热潮的情感。

6. 灰色、柔和的黄色和深蓝色

qed group是一家总部位于捷克共和国的组织发展公司,热衷于应用心理学和行为经济学的概念。

qed group了解公司文化和赋权,所以他们的网站采用了独特的配色组合。

乍一看,他们主页的配色方案可能比我们到目前为止看到的其他例子要繁杂一些。但他们仍然通过这个时尚的设计成功地展示出来。

通常情况下,黄色、蓝色和紫色的色调会很难阅读,对眼睛有一定的负担。通过在背景中使用较浅和暗淡的灰色调,他们能够在中间的轮廓中添加更亮的对比色。

如果您喜欢这些柔和的黄色调与灰色和深蓝色搭配的现代外观,请查看以下配色代码:

7. 浅淡的地球色调

konstantopoulos s.a.的“olymp”品牌销售希腊橄榄。因此,地球色调-尤其是接近橄榄颜色的绿色-对于它的网站来说是合乎情理的选择。

这个主页的布局和设计非常简单。主要的颜色选择当然是橄榄绿。但正如您所看到的,它的使用非常节制。

这是对经典但有效的配色方案的新颖诠释。与墙壁到墙壁的深绿饱和度过高相反,柔和的灰色背景帮助图像、文本和颜色凸显。

仔细观察,您会发现背景中有柔和的绿色叶子。这有助于突出绿色的文本和标识,并吸引您的目光。

对于从事健康食品、植物和农业的企业来说,地球色调的配色方案是一个很好的选择。请参考这些绿色、灰色和浅棕色的配色代码,以在您的网站上获得类似的外观。

如果您的产品具有可识别的颜色,您可以类似地做一些事情。从浅灰色背景和较暗的灰色文字颜色开始,适度地添加您的主色调。这是一个简单、不繁琐的配色方案的良好起点,只需一个可识别的主色调和一个补充的辅助色调即可快速改善外观。

8. 大量的红色,搭配柔和的色调

如果您回顾一下我们迄今为止所涵盖的所有流行网站配色方案,您会注意到一种很少使用的流行颜色-红色。

这是因为红色是在网站上使用最强大但最具挑战性的颜色之一。红色很容易吸引读者的注意力,因此可能会让人感到压倒。但是当正确使用时,它可以是为您的网站增添兴奋感的好方法。

有效使用红色的一种方法是轻轻地在文本中的几个关键词上添加一点颜色。另一种方法是将柔和的色调与红色搭配使用。这是一种比我们在“最佳恐怖场景”网站上看到的更高级的配色策略。

富有创意的品牌代理公司 five/four 大胆地在他们的网站上使用了明亮的红色,搭配白色、黑色和灰色。

这里的红色起到了很大的作用,白色和灰色作为辅助色来支持它。如果他们决定在这个红色之外再加上亮黄色、浅蓝色和鲜橙色,那将会太过于繁杂。

但是这些暗淡但清晰的颜色与红色完美搭配。这个红色对于品牌来说也非常适合。它明亮、大胆,能够吸引大量注意力,展现创造力的主题。

因此,对于那些想要在配色方案中走现代和大胆路线的人来说,考虑在您的网站上使用这些颜色代码与红色搭配。

只要确保不要过多地使用红色。您需要确保页面中有足够的柔和色调,让页面有透气感,同时保持时尚的外观。

9. 未来主义的柔和色调和原色

这个列表如果没有 anton & irene 的示例就不完整。他们是纽约的专业设计师,专门从事包括数字产品在内的各个方面的设计。

他们在柔和色调和原色上展示了绝对的大师级表现。

这个网站配色方案最好的一部分是它给人一种未来主义的感觉。anton和irene的着装选择非常前卫。这是一个大胆的选择-但有时,最大胆的选择最有回报。在这里,他们使用了引人注目的组合,而不会陷入华而不实。

虽然这个网站使用的颜色比我们之前看到的一些示例要多,但它们被节约地使用,因此页面不会杂乱或不吸引人。这也反映在他们使用的图片上:anton穿着对比鲜明的紫色和橙色,而irene穿着蓝色和黄色。它们是不完美的对立面(蓝色的对立面是橙色,紫色的对立面是黄色),但作为一个整体它们能很好地协调在一起。

如果您希望为您的网站配色方案添加一种艺术的风格,请尝试使用这些确切颜色的不同组合。

10. 黑色叠加黑色

迄今为止,我们看到的每个网站几乎都使用了一些黑色,但使用得相当节约。它通常用于文本,而不是作为主色调或背景色。

然而,这并不意味着您不能在网站颜色方案中广泛使用大面积的黑色。这样做有助于展示高贵、奢华和专业感,特别是如果您使用了不同的黑色调,如下所示:

查看jy bh首页。通过结合不同的黑色色调,您将获得渐变效果,就像我们之前展示的其他例子一样。浓重的黑色渐变赋予网站一种神秘而大胆的外观。

这家公司是一家法国服装制造商,销售男女装以及配饰。就像时尚界一样,黑色是网页设计中一种永恒的颜色。多年来它一直很受欢迎,并且在2023年及以后依然会受欢迎。

但是,如果您要在网站上使用黑色,请使用不同的色调来增加层次感和质感,就像上面的示例一样。只使用一种黑色看起来会很单调和基础。

更多关于网站设计的资源

当然,您的品牌远远不仅仅是您选择的配色方案。这些颜色与您整体网站的互动最终会影响到您的转化率、可信度和品牌的成功。

为了帮助您创建最好的网站,以下是我们最好的资源,可作为您设计之旅的指南:

  • 13个网站设计最佳实践。这是我们关于设计出色(以及具有转化能力)的网站所需了解的所有内容的清单。
  • 如何创建一个网站(逐步指南)。不知道从何处开始?阅读这篇关于如何从头开始创建一个出色的网站的文章。无需编码知识。
  • 4个步骤,20分钟的网站规划。您不能在没有先规划好路线的情况下进行一次公路旅行。您也不希望在没有规划好的情况下创建公司的网站。本指南将向您展示如何选择正确的内容类型,并为您的网站进行结构化。
  • 如何设计一个能转化的首页。首页是大部分访问者首次接触您品牌的地方,因此您希望给他们留下良好的第一印象。以下是如何在转化他们成为终身客户的同时做到这一点的方法。
  • 最佳网页设计服务。您不必自己来做这个。事实上,如果您有足够的预算,我们强烈建议您求助于经过验证的设计服务公司,帮助您构建您的网站。相信我们,这绝对物有所值。
  • 如何为您的电子商务店铺选择正确的配色方案。想要影响访问者成为付费客户的一个好方法吗?颜色心理学是一种微妙但有力的方法。以下是您可以开始的方法。
  • 颜色如何影响转化率。这是我们关于颜色如何影响您的收入的完整信息图。

结论

现在是2023年。这意味着是时候放弃您多年前使用的配色方案了。改变它非常重要,因为配色方案可能会影响您网站的销售情况

利用这些配色方案作为起点,您可以创建一个现代、时尚和独特的网站。您甚至可以使用我们展示的一些确切的颜色代码。

你可能会发现,选择合适的网站配色方案并不难。大多数cms工具,如hubspot的免费cms,只需点击几下就可以更改网站的配色方案。当你这样做时,你的品牌就会获得所需的推动力,吸引新访客并激发老访客的兴趣。

Written by 河小马

河小马是一位杰出的数字营销行业领袖,广告中国论坛的重要成员,其专业技能涵盖了PPC广告、域名停放、网站开发、联盟营销以及跨境电商咨询等多个领域。作为一位资深程序开发者,他不仅具备强大的技术能力,而且在出海网络营销方面拥有超过13年的经验。