如何在4步中选择一个网站配色方案(+例子)
正确的网站颜色可以提高易读性、网站访问者体验和品牌认知度。虽然选择一个网站的配色方案可能看起来很直观,但它背后有一个策略,包括理解颜色概念,确定你的品牌身份,探索调色板工具。有了这些信息,你就可以自信地为你的网站选择最好的配色方案。
如果你在一个严格的截止日期下工作,或者想要在不做繁重工作的情况下找出你的网站配色方案,你可以找到网站调色板服务Fiverr.只需5美元,一位专业的色彩专家就可以为你的品牌和网站定制调色板。
1.了解基本色彩概念
最终,当制作一个小型商业网乐鱼游戏app下载站,设计的成功植根于理解人们如何看待它。学习色彩概念,如色彩理论、配色方案和色彩心理学,可以让你选择最好的选择来传达你想要的品牌形象。
三个必不可少的色彩概念包括色彩理论、配色方案和色彩心理学。我们将在下面详细介绍它们。
色彩理论
色彩理论是一套指导色彩使用的原则。色彩理论经常被设计师使用,它提供了一个逻辑结构,可以用来创造和谐而有意义的设计。虽然色彩理论的应用在今天很普遍,但你可能会惊讶地发现,色彩理论是基于一种系统而科学的人类感知方法,这种方法可以追溯到17世纪。
根据牛顿的理论,可见光谱是基于波长的
(来源:Vecteezy)
色彩理论是由艾萨克·牛顿爵士提出的。他是第一个通过实验棱镜和阳光来研究颜色科学的人。从那里,他能够将颜色定义为人类对波长的感知,这导致了可见光谱的颜色。
牛顿将这些可见的颜色分为三组:
- 主要颜色:红色,蓝色和黄色
- 次要的颜色:绿色,橙色和紫色
- 三级颜色:红橙色,黄橙色,黄绿色,蓝绿色,蓝紫色和红紫色
这些颜色组成了色轮。原色不能通过混合任何其他色调而产生。副色是由原色混合而成的,而三色是由原色和副色混合而成的。艺术家、设计师和其他创意人员使用色轮来开发调色板。
通过将色轮分成两半,你可以看到暖色和冷色之间的分离。两者都与特定的感觉、影响或文化有关,这将在下面的色彩心理学中进一步讨论。
配色方案
配色方案是来自色轮的颜色组合。就像单个颜色如何传达意义和个性一样,每种颜色之间的关系也传达了一种信息。虽然在设计中使用了几种网站配色方案,但这四种配色方案值得讨论,以帮助激发您的网站色彩。
单色配色方案使用多种单一颜色。它创造了强烈的视觉凝聚力,让内容自己发光。使用单色配色方案对设计师来说也更容易,出错的空间更小。
不同深浅、色调和色调的单色(来源:帆布)
单色调色板通常由三到七种不同的基色组成。这种变化来自于不同的色调(基色用白色变亮)、阴影(基色用黑色变暗)和色调(基色用灰色变暗)。
Heresto伏特加单色网站示例(来源:Heresto伏特加)
互补色方案使用的是色轮两端的颜色。它通过使用两种互补色调之间的强烈对比或将观众的注意力集中在特定的主题上来吸引注意力。
色轮上的互补色(来源:Copic Marker教程)
因为使用互补色方案会导致暖色和冷色的组合,所以在设计中避免视觉冲突是很有挑战性的。为了解决这个问题,选择一个主要的颜色,并使用其他色调的口音。同时,要探索不同的色调、色调和强度。
A Short Journey的互补配色方案网站(来源:短途旅行)
类似的配色方案使用在色轮上彼此相邻的颜色。这通常用于创造一种视觉进展感,使用颜色来指导观众在哪里以及如何采取行动。类似的颜色也被用来创造平静,吸引人的设计,最小的对比。
色轮上的类似配色方案示例(来源:用户体验的星球)
类似的配色方案使用轮盘上三个相邻的颜色。这通常会导致低张力调色板,这在自然界中很常见。在选择的三种颜色中,选择一种颜色来主导设计,一种颜色来支持主色,一种作为你的强调色。
Clerksy网站类似配色方案(来源:Clerksy)
三色配色方案使用三种在色轮上彼此距离相等的颜色,形成一个三角形。作为最具活力的配色方案之一,三色具有强烈的对比度,最适合明亮和动态的内容。
色轮上的三色配色方案(来源:ColorsExplained)
三色可以压倒观众,所以重要的是要通过实验的活力,色调和阴影来制服其他两种颜色。三色配色方案的视觉对比可以让你的网站流行,只要你能找到合适的和谐。
Todoist网站的三色配色方案(来源:Todoist)
色彩心理学
色彩心理学的基础是色彩在情感层面上影响人类。色彩心理学研究的是使用某些颜色所引起的感觉、情绪和想法。当人们看到颜色时,他们会有意无意地将它们与不同的含义联系起来,从而影响他们的行为。
下面是一些颜色的例子,以及与它们相关的一般联想:
- 黄色:青春,幸福,创造力,乐观
- 蓝色:信任、和平、信心和安全
- 红色:激情、能量、爱和力量
- 格林:健康、自然、财富和富足
- 橙色:舒适、有趣、温暖和积极
- 紫色:救济、奢华、精致和皇室
- 粉色:温柔、女性气质、甜美和顽皮
- 黑色:神秘、权力、优雅和奢华
- 怀特:清洁、成熟、纯洁和简单
2.确定你的品牌形象
颜色是品牌识别的重要视觉组成部分。事实上,颜色本身就占了高达90%的消费者的第一印象.因为你的商业网站将是你的品牌在网上的家,它应该有效地传达你的品牌身份。
一旦你很好地掌握了不同的颜色概念,现在将是一个很好的时间来努力你希望你的品牌如何被感知。第一个问题是,你的公司是否已经有了固定的配色方案。如果是,这些颜色必须纳入您的网站配色方案。
接下来,看看你的企业提供的产品或服务,或者你的企业所属的行业。它有助于找到大公司在同一利基市场中最常用的颜色,因为他们已经投入了资源来寻找有效的网站设计配色方案。你可以将此作为如何选择适合你品牌的网站配色方案的指南。
不同行业前20名公司使用的品牌颜色(来源:视觉的资本主义)
3.探索相关颜色工具
即使有了所有关于颜色和品牌的科学信息,人们仍然会发现很难为他们的网站确定颜色。使用颜色工具可以使这个过程更快更容易。如果没有颜色工具,你可能需要在不同的配色方案之间进行几次尝试,直到你找到一个适合你的品牌特征的配色方案,并以你想要的方式在网站上实现。
许多颜色工具都被设计用来为网站创建配色方案,但这三个工具提供了一个很好的功能和易用性的组合。
使用Adobe颜色工具生成网站配色方案(来源:Adobe的颜色)
Adobe的颜色可以说是在线选择网站配色方案最流行的颜色工具。它与Adobe Creative Cloud同步,并允许用户免费共享或创建配色方案。您可以设置配色方案或配色和谐规则,以确保生成的颜色具有视觉吸引力。
这个工具有一个强大的创意社区,他们分享调色板的灵感和趋势。它的最佳功能包括计算配色方案示例的自动色轮,从图像生成颜色主题或渐变的提取工具,色盲安全检查和对比度检查器。
使用Coolors作为您的网站的随机调色板生成器(来源:Coolors)
Coolors是一个同样令人印象深刻的颜色工具,虽然它的功能不同。当你点击空格键时,这个网站会生成随机的调色板,你可以锁定你想要包含在调色板中的颜色。
与Adobe Color类似,您也可以从上传的图像中提取调色板,或者简单地在颜色检查器中选择您已经决定的颜色。Coolors的其他值得注意的功能包括调色板的温暖和饱和度的调整工具,一个导出选项,允许您与链接或其他格式共享您选择的配色方案,以及一个拼贴工具,从您的照片和调色板创建拼贴。
通过查看不同网站的实时布局,探索不同的网站颜色。Colorspire)
虽然Colorspire不会根据颜色理论自动生成网站配色方案,它的与众不同之处在于它可以实时显示网页布局中选择的颜色。不幸的是,当前的浏览器不再支持Flash内容,因此它的色轮不再可用。
尽管如此,Colorspire使选择网站颜色更有效,即使没有色轮。您可以使用颜色选择器向配色方案设计器添加颜色,或者使用随机选项浏览不同的颜色选择。然后,配色方案设计师将自动实时预览您的颜色,以查看您的配色方案效果如何。
4.选择主要,次要和强调颜色
这一步标志着你决定阶段的开始。有了颜色概念、品牌和工具,你现在可以把它们付诸实践,为你的企业创建一个网站配色方案。这样你就有足够的选择,使你的网站设计在视觉上脱颖而出,同时保持凝聚力,至少选择三种颜色:主色,辅助色和强调色。
ColorSpace网站展示了如何使用三色渐变配色方案。(来源:色彩)
主色调通常占网站设计的60%左右。选择主色很大程度上依赖于上面讨论的色彩概念。什么颜色最能传达你的品牌个性?当人们登陆你的网站时,你想唤起什么样的感觉?是否有一种颜色最能体现与你的业务相关的含义?
ColorSpace使用蓝绿色渐变作为其网站的主要颜色。
次要颜色通常占网站的30%。以上讨论的配色方案是选择副色的最佳依据。每种配色方案都可以用于不同的目的,从展示动态内容到创造平静感。找出最适合你的业务,或者使用颜色工具将这些配色方案与你的主色调进行比较。
从ColorSpace的网站上取样二次色
强调色通常占网站设计的10%。它通常限于小的设计元素,如分隔符,文本中的副标题(例如,H3, H4等),以及面向动作的组件,如按钮。
ColorSpace使用亮粉色强调色作为指示符。
网站配色方案的例子
在把你新发现的色彩知识付诸实践之前,探索一下这些现有的网站配色方案,并找出竞争对手来帮助你完善这个过程。我们确保从实际的小企业网站中编译最好的网站配色方案示例。乐鱼游戏app下载利用这个列表来找到你品牌的理想配色方案。
一个蓝色的网站配色方案是最通用的选择之一,因为它可以代表一系列积极的联想。它主要用于激发信任感,所以我们可以在不同的利基中找到这种配色方案——最明显的是,社交网络、食品、医疗保健和其他服务。
绿色配色方案是健康和可持续品牌的首选。绿色与自然和富足有着强烈的联系,因此将其作为品牌围绕这些理念的网站的主要颜色是有意义的。因为绿色是金钱的颜色,所以它也被用于想要向金融稳定的形象倾斜的企业。
由于这些原因,品牌通常使用绿色配色方案,从食品或饮料业务、健康和保健服务到银行、法律或金融服务。
红色配色方案通常创建大胆、引人注目和个性化的网站。红色能激发强烈的感觉,比如激情、能量和力量,所以对于想要在网站上产生影响的品牌来说,红色是一个很好的选择。红色配色方案普遍用于创意产业的企业或像可口可乐这样的高能量品牌。
黄色是青春和乐观的颜色。使用黄色配色方案的网站设计通常与俏皮的能量相搭配,比如明亮或活泼的图形。由于黄色可以刺激人的感觉,它经常被休闲品牌和快节奏的行业使用,比如麦当劳或百思买。
使用橙色配色方案的网站往往会给用户带来温暖和舒适的感觉。从食品和补充剂到创意服务等广泛的行业都可以从利用这些协会中受益。橙色也经常被用来给人一种负担得起的印象,使其成为大众友好型产品的好选择。
另一种选择网站配色方案的方法是不要专注于单一的主色。这可以让品牌在使用颜色上更灵活,以促进更适合其业务的想法。同时,一个多色的网站配色方案可以使你的设计与其他网站区别开来。这种配色方案经常用于艺术和创意产业,给人留下持久的印象。
试试这些小公司用来提升他们网站设计的鲜艳的颜色组合吧。乐鱼游戏app下载你可以在自己的设计中使用这些配色方案,或者选择与你的品牌产生共鸣的颜色,并将缺失的部分组合在一起,使它们更适合你的品牌标识。喜欢使用鲜艳的配色方案和对比鲜明的色调的企业通常有更具体的目标受众。
常见问题(FAQs)
一个网站应该有多少种颜色?
理想的做法是在网站配色方案中使用三种颜色,这样可以在网站设计中有策略地使用它们。60/30/10规则是一个流行的创作指南一个好的商业网站.从本质上讲,它在网站设计中使用了60%的原色,30%的副色,10%的强调色。如果三种颜色似乎不够,试着用相同的色调来尝试不同的变化。
选择颜色主题的好工具是什么?
Adobe的颜色是创建和分享颜色主题的最流行和有效的网站工具之一。它有各种工具,打破色彩理论,指导用户创造完美的色彩和谐。有一个丰富的设计师和创意社区,他们与Adobe color分享网站配色方案和灵感,所有这些都是免费的,不需要订阅。
什么是网站最好的背景色?
白色是最流行的网站背景色。它与你在网站上使用的任何其他颜色都能很好地配合,使阅读页面上的内容更容易,而且通常不会分心。考虑到这一点,也有很多中性色可以作为网站背景色的好选择。
底线
颜色是网页设计和品牌的一个重要方面,所以选择一个网站的配色方案需要意图和策略。通过理解色彩的复杂性,你可以做出明智的决定来传达你想要传达的品牌信息和网站访问者的看法。
为你的网站选择合适的颜色,求助于平面设计、品牌和网页设计专家Fiverr.起价低至5美元,你可以得到专家的帮助,为你的网站、品牌和所有小企业的营销材料建立一个配色方案。乐鱼游戏app下载