26种值得借鉴学习的电商、登陆页面和个人网站配色方案
当某人第一次访问您的网站时，颜色在他们的想法中起着重要作用。研究表明，62-90%的消费者最初印象仅基于颜色选择。
选择与您的品牌相匹配的颜色 – 以及您希望消费者对您的公司和产品的看法 – 可以成为强大的品牌和营销工具。
在本文中，我们将介绍25多种用于登录页面、电商和个人网站的出色网站配色方案，以及如何快速选择适合自己的配色方案。
如何为您的网站选择配色方案
非有色人种的眼睛可以看到超过1,000,000种不同的颜色。您如何使用所有这些选项快速有效地选择正确的配色方案？这是所有试图从头开始为他们的设计创建配色方案或调色板的网页设计师所面临的挑战。
有了这么多选择，您无法单独评估所有色调和色调，并在没有参考点的情况下选择最合适的。你需要缩小你的选择范围。最好的开始方法是找到一种原色作为你的起点。
也许做到这一点的最好方法是按行业查看最受欢迎的选择。它可以帮助您了解色彩心理学以及哪些原色可能适合您的公司或产品。
行业颜色选择
不同的公司和产品选择不同的颜色来识别他们的品牌。但为什么？颜色不仅仅是吸引潜在客户和消费者注意力的更有效方式。这是一种在情感上，几乎是潜意识层面上与他们交流的方式。
从某种意义上说，这是在使用单个单词或句子之前在消费者心中建立品牌的一种方式。没有颜色向消费者讲述相同的故事，因此最流行的主品牌颜色取决于行业。
按行业划分的品牌颜色（图片来源：towergateinsurance.co.uk）
您希望潜在客户将哪种情感与您的品牌、产品或服务联系起来？
这是指导性问题，应该可以帮助您确定调色板的原色。
蓝色传递：
蓝色是值得信赖的颜色
在消费者信任比任何其他因素更重要的行业中，专业性和可靠性是关键卖点，蓝色通常用作主要的品牌色彩。
它不吸引自发性或情感。相反，它启动了一个冷静而合乎逻辑的决策过程。
最常见于以下行业：
- 银行业
- 航空公司
- 通讯
- 消费金融
- 电力公司
- 重型设备
- 家居装修
- 酒店
- 药品
红色传递：
红色传达关注和热情
依赖情绪和冲动决策的行业（如餐馆和快餐店）通常使用红色作为原色。红色被认为可以刺激饥饿感，因此是国际食品品牌的首选。
最常见于以下行业：
- 餐厅
- 饮料
- 食品零售
- 房地产
- 服饰
绿色传递：
绿色传达活力感
大多数人将绿色与自然、植物和充满活力的恢复环境联系起来。依赖于更好的福祉或全天然成分产品的行业通常选择绿色。
最常见于以下行业：
- 食品与饮料
- 百货商店
- 房地产
- 化学品
黑色：自信、成熟
虽然有些公司可能会默认使用黑色而不是选择专门的颜色，因为它让人感觉安全，但在消费者的信心或成熟度是关键因素的行业中，它也是一个领先的选择。
最常见于以下行业：
- 服饰
- 配件
- 互联网和移动服务提供商
- 百货商店
- 酒店
不要盲目跟随自己的品味和直觉，在做决定时要考虑色彩理论和色彩心理学。
一个网站应该使用多少种配色方案？
对于标准的网站配色方案，您可以在单个方案或调色板中挑选出三到七种不同的颜色。
但是您应该在一个网站上使用多少种不同的配色方案？
这取决于个人情况和您的网站目标。如果您的网站是专门针对单一品牌、产品或公司的公司网站或博客，则您希望坚持单一配色方案。
另一方面，如果你的网站是一个电商网站，你可以为不同的产品方案使用不同的配色方案，以针对不同的产品类别唤起不同的情感反应。
使用多个调色板的问题在于，您将使任何内部或外部内容创建者的事情变得复杂，从而增加人为错误和并发症的机会。
当您为您的网站选择配色方案时，必须避免过度使用并花费数周时间完成任务。当然，这是一个重要的选择，但选择正确的颜色并不能帮助您增加网站流量或提高产品页面的转化率。
如何在网站上获得准确的配色方案
ColorZilla
要识别网站上使用的每种颜色，精确到颜色和十六进制代码，您可以使用Google Chrome扩展程序或Firefox插件，如ColorZilla。
安装ColorZilla后，您只需将指针直接悬停在任何网站、徽标或图像上的任何设计元素上，它就会向您显示该像素的确切HTML十六进制或RGB颜色代码。如果您不想逐个识别使用的颜色，您还可以使用将使用图像的调色板生成器，例如Colormind的图像颜色提取工具。
然而，它并不像看起来那么完美。您必须截取网站的屏幕截图并上传，生成的调色板不一定100%准确于设计中使用的实际色调。例如，如果网站包含渐变或颜色超出主配色方案的图片，则生成的调色板往往不准确。
因此，就目前而言，识别网页设计中使用的确切颜色的最佳方法仍然是使用颜色识别插件或扩展程序，或者截取屏幕截图并在PhotoShop等照片编辑工具中手动操作。
26个最佳网站配色方案案例
我们在网上搜索了配色方案的绝佳案例，甚至按类别将网站分开，因此您可以轻松地从相关网站中找到灵感。
优秀电子商务网站配色方案
下面我们将介绍与其品牌和行业相匹配的配色方案的优秀电子商务示例。
1. 护肤品：明亮俏皮
Bliss网站配色方案：明亮俏皮
Bliss的品牌色彩选择非常重要。颜色明亮而俏皮，完美地伴随着公司传达的身体积极和内心快乐的信息。
2.服装品牌：清晰简洁
Le Bonnet网站配色方案：清晰简洁
Le Bonnet是一家服装公司，专注于网站调色板的清晰度。一些强烈的颜色，以及用于分隔产品的不透明米色背景色，有助于提升设计的简洁性。
3. 服装店：简约
Revise Concept网站配色方案：简约
Revise Concept 是一个服装品牌网站，它不依赖网站调色板中的颜色，而是使用简单的颜色和白色空间来突出衣服本身的颜色和设计。
对于希望让产品自己说话而不是创建有力的设计来讲述故事的电子商务网站，这种方法可能是一个很好的选择。
4.餐具：可靠性和专业性
My Tableware网站配色方案：可靠性和专业性
My Tableware 是一个德国电子商务网站，提供可定制的餐具和餐具。
该网站使用深蓝色、浅棕色和灰色的简单配色方案来传达专业和可靠的感觉，并带有精致的音符。
5.口香糖：自然和冲动
Neuro网站配色方案：自然和冲动
Neuro是一个咖啡因口香糖和薄荷糖品牌，旨在帮助人们集中注意力。它混合了绿松石色、浅蓝色和米色等较柔和的颜色，以灌输一种天然成分的感觉。
红色和橙色也能吸引情绪和冲动的决定，出色地使用强调色。
6. 手表：精致与奢华
Prime Ambassador网站配色方案：精致与奢华
Prime Ambassador是瑞典的钟表品牌，拥有一个旨在突出产品的优雅电子商务网站。深灰色背景上的近乎金黄色的浅棕色色调和图片中的木质装饰的颜色组合为参观者带来了精致和奢华的感觉。
这些颜色非常适合推广定制手表等高端产品，但如果您销售的是普通消费品，则会感觉不合适。
7.裤子：创意和无障碍
Alday网站配色方案：创意和无障碍
Alday 是一个舒适至上的裤子品牌，旨在比以较低价格出售的批量生产的牛仔裤和斜纹棉裤更合身。
该网站具有创意和趣味性，具有鲜艳的色彩组合，使访问者和潜在客户感到可以访问。
8. 水果零食：优雅而突出的色彩
Madies配色风格：优雅而突出的色彩
Madies是一系列冻干水果零食，与散装销售的无品牌干果相比，其目标客户是更注重时尚的消费者。
黑色背景和成熟芒果的黄色拟人化突出了设计的简单性，从而形成了优雅的最终产品。
9. 定制版型牛仔布：它还活着
Unspun网站配色风格：积极活力
Unspun使用鲜红色和橙色使网站栩栩如生。非常适合与引领积极和充满活力的生活方式的观众交流。
个人和旅游网站配色方案
下面，您可以找到我们为个人和旅游网站选择的最佳网站配色方案示例。
10.创意简单
Madeleine Dalla配色风格：简单创意
Madeleine Dalla是一位纽约摄影师，对网站设计（以及令人印象深刻的作品集）有着敏锐的洞察力。
通过将颜色排除在设计的其余部分之外，她真正突出了她从每个突出项目中精心挑选的特色照片的鲜艳色彩。她使用颜色的缺失和颜色本身一样多。
11. 带有飞溅的灰度
Ali Rifai是一位创意艺术总监，它体现在网站的概念中。通过使用只有少量颜色的灰度，您的注意力会被吸引到正确的关键字和设计的关键区域、“原创”一词和迷人的微笑上。
12. 与自然合一
iFly 50
iFly 50是荷航为庆祝其成立50周年而发行的在线杂志。
通过突出天空和水的蓝色，以及绿草和森林，它让任何游客都感觉与自然融为一体——对于任何自然或风景摄影师的网站来说都是完美的方法。
13.干净和专业
Benediktas Gylys
Benediktas Gylys的网站是干净设计的大师班。没有杂乱，这也适用于颜色选择。
主要的紫色突出了专业性，虽然只有少数颜色，但它们都有助于突出关键元素，即插图。
14.实用的颜色
BucketListly
BucketListly 实用地使用颜色，使用黄色突出显示关键字、CTA和迄今为止访问的国家。
它显示了当您将其与空白和正确的概念结合使用时，您可以从设计中的单一颜色中获得多少价值。
15.优雅简约
Lars Franzen
Lars Franzen网站的特色图片使用深色背景色来衬托肖像中人物的色彩和个性。
16.未来主义叠加
Dot Lung
Dot Lung的个人网站通过叠加和干净的背景图形最大限度地利用了简单的调色板。背景中的紫色创造了从页面到页面的凝聚力体验。
17.光明与黑暗
Love for Iceland
Love for Iceland是一个很好的例子，说明突出显示的图片中的颜色如何设置情绪。在阳光的照耀下，左上角是明亮的蓝色透明冰，底部是洞穴般的黑暗，为游客营造了一种不祥和冒险的氛围。
登陆页面配色方案
下面我们突出显示了具有独特或有效配色方案的不同着陆页。
18.鲜明的对比
Zenly
Zenly使用对比鲜明的颜色来突出实时地图应用程序的实际功能（顺便说一句，这就是您在WordPress网站上嵌入Google地图的方式）。空间背景使球状应用程序设计脱颖而出，并使其具有未来感。
19.颜色突出
Slack
Slack使用了一种久经考验的着陆页配色方案策略，其中颜色主要用于突出重要的号召性用语和其他基本元素。对于登录页面，您不必使设计过于复杂，这也适用于颜色。
20. 鲜艳的色彩激发情感
Spotify
Spotify在其极其简单的新登陆页面上使用鲜艳的色彩来激发观众的情感。颜色比CTA按钮之前的副标题更能说明故事。如果您正在考虑尽快推出播客，请查看我们的指南。
21.色彩对比在混乱中创造秩序
Autonomy
Autonomy使用颜色和对比度在原本混乱的动画设计中创造秩序。充满活力的黄色穿透并与背景和其他物体分开。
22.未来派色彩合奏
Bugsnag
Bugsnag使用多种颜色组合，通过其扁平设计赋予未来主义、高科技感。颜色和形状的组合让参观者感觉就像是2020年，他们可以相信这家公司是最前沿的。
23. 充满活力
Connect Homes
Connect Homes的登录页面以明亮而柔和的色彩变得生动起来。调色板达到了令人兴奋的平衡，传达了现代感。
24. 保守的色彩，俏皮的设计
Plink
Plink的登陆页面基于相对保守的深蓝色，但总体上以俏皮有趣的动画和设计来平衡它。
25.自然活力
Travelshift
Travelshift在很大程度上依赖于绿色来传达自然和活力的感觉。绿色不是用红色或橙色等引人注目的颜色突出CTA或关键内容，而是作为复兴的承诺。
26.希望的明亮色彩
Swab the World
Swab the World使用明亮、对比色的配色方案来传达希望的感觉。这与非营利组织的登录页面完美匹配。颜色冲突与形状一起突出了他们用来应对挑战的现代/未来主义方法。
网站配色方案生成器
如果您不想为您的方案或调色板手动挑选相邻的颜色、渐变或阴影，您可以使用在线工具来提供帮助。网上有许多免费的配色方案或调色板生成器。我们将仔细研究下面的一些最佳选择。
Colormind
Colormind
Colormind 是一款由AI驱动的颜色生成器，您可以使用它为网站、模板等即时生成颜色。唯一的问题是您无法设置原色来推断调色板，您必须每次随机生成它。它还可以从您想要的任何图像中提取调色板。
Coolors.co
Coolors.co
Coolors.co是一款网络和移动应用程序，可帮助您从头开始生成调色板。它具有每种颜色选项的阴影替代品和其他高级工具，可帮助您对配色方案做出有效决策。
Paletton
Paletton
Paletton不是生成随机方案，而是 让您完全控制您的调色板以及您想使用哪种颜色作为您的基色/原色。您可以选择所需的调色板类型，无论是相邻颜色、三色配色方案还是其他。您可以从色轮中选择任何颜色。
ColorSpace
ColorSpace
ColorSpace根据您输入的原色生成调色板。它提供了多种样式选项，为您提供更大的灵活性。
色盲：如何为您的网站选择适合色盲的调色板
创建网站配色方案时要考虑的最后一件事是不同的人会如何看到颜色。
不同类型的色盲
不是每个人都能看到“标准”的颜色范围。有三种不同的主要类型的色盲：deuteranopia、protanopia和tritanopia。
红绿色盲（deuteranopia 和 protanopia）是最常见的色盲形式。它影响大约12种北欧血统的人。受其影响的人口如此之多，在设计和/选择WordPress主题时值得考虑。
蓝黄色盲更为罕见，对男性和女性的影响相同。
如何为您的网站选择适合色盲的调色板
由于红绿色盲人的数量远高于任何其他形式的色盲，因此您的设计应该是您的首要任务。因为它们无法区分红色、绿色和紫色，而是将它们视为黄色和蓝色的不同色调，所以您要避免使用最终看起来过于相似的对比色。
- 不要将绿色与黄色对比，反之亦然。
- 不要将黄色与红色或橙色进行对比。
- 不要将紫色与类似深浅的蓝色进行对比。
在为您的标志或设计选择独立的原色时，您应该考虑它是否仍然适合色盲消费者的品牌。例如，紫色仍然是深蓝色到红绿色的色盲消费者，传达了可靠和值得信赖的信息。对我们来说，这是100%的品牌，因此我们的潜在客户心中没有潜在的冲突。
概括
人眼可能能够区分数百万种不同深浅的颜色，但您不必梳理所有选项来找到适合您网站的配色方案。
通过专注于您的品牌和理想客户，您可以缩小对原色的选择范围。一旦你有了选择，你可以依靠在线调色板生成器来完成你自己的调色板，或者根据示例和偏好选择匹配的颜色。
使用正确的方法，可以创建可用作设计过程起点的网站配色方案，但如果您想获得正确的专业外观和感觉，通常需要聘请合适的Web开发人员/设计师您的品牌需求。
评论留言