网页调色板

什么是网页调色板？

颜色对于网页设计师和平面设计师来说非常重要。设计师用#fff002、#426215等代码来描述我们在日常生活中描述为蓝色、红色和绿色的颜色。无论您从事哪种类型的编码项目，您都可能在某个时候开始使用颜色。如果您学习使用 HTML 进行编码，这将特别有用，就像许多人设计网页一样。

十六进制代码在颜色中的含义是什么？

十六进制代码是一种通过组合三个值以 RGB 格式表示颜色的方法。这些颜色代码是网页设计 HTML 不可或缺的一部分，并且仍然是数字化表示颜色格式的重要方式。

十六进制颜色代码以井号或井号 (#) 开头，后跟六个字母或数字。前两个字母/数字对应于红色，接下来的两个对应于绿色，最后两个对应于蓝色。颜色值定义在 00 到 FF 之间的值中。

当值为 1-9 时使用数字。当值大于 9 时使用字母。例如：

• A = 10
• 乙 = 11
• C = 12
• D = 13
• E = 14
• F = 15

十六进制颜色代码和 RGB 等效项

记住一些最常见的十六进制颜色代码可以帮助您更好地预测当您看到十六进制颜色代码时其他颜色是什么，而不仅仅是当您想要使用这些确切的颜色时。

• 红色 = #FF0000 = RGB (255, 0, 0)
• 绿色 = #008000 = RGB (1, 128, 0)v
• 蓝色 = #0000FF = RGB (0, 0, 255)
• 白色 = #FFFFFF = RGB (255,255,255)
• 象牙色 = #FFFFF0 = RGB (255, 255, 240)
• 黑色 = #000000 = RGB (0, 0, 0)
• 灰色 = #808080 = RGB（128、128、128）
• 银色 = #C0C0C0 = RGB（192、192、192）
• 黄色 = #FFFF00 = RGB (255, 255, 0)
• 紫色 = #800080 = RGB (128, 0, 128)
• 橙色 = #FFA500 = RGB (255, 165, 0)
• 勃艮第 = #800000 = RGB (128, 0, 0)
• 紫红色 = #FF00FF = RGB (255, 0, 255)
• 石灰 = #00FF00 = RGB (0, 255, 0)
• 水色 = #00FFFF = RGB (0, 255, 255)
• 青色 = #008080 = RGB (0, 128, 128)
• 橄榄色 = #808000 = RGB (128, 128, 0)
• 海军蓝 = #000080 = RGB (0, 0, 128)

为什么网站颜色很重要？

你可能认为你不受颜色的影响，但根据一项研究，85% 的人表示颜色对他们购买的产品有很大的影响。他还说，当一些公司改变他们的按钮颜色时，他们注意到他们的转化率急剧增加或减少。

例如，生产投影屏幕的公司 Beamax 发现，与蓝色链接相比，红色链接的点击量大幅增加了 53.1%。

颜色不仅对点击有巨大影响，而且对品牌认知度也有很大影响。一项关于颜色对心理影响的研究发现，颜色平均可将品牌认知度提高 80%。例如，当您想到可口可乐时，您可能会想到鲜艳的红色罐头。

如何为网站选择配色方案？

为了决定您应该在您的网站或 Web 应用程序上选择哪些颜色，您必须首先对您所销售的产品有一个很好的了解。例如，如果您想获得更高质量的高端图像，您应该选择的颜色是紫色。但是，如果您想接触更广泛的受众，蓝色；它是一种令人安心且柔和的颜色，非常适合更敏感的话题，例如健康或财务。

上面的例子已经被许多研究证明。但是您为网站选择的颜色取决于您设计的复杂性和颜色组合的类型。例如，如果您使用单色网页设计调色板，您可能需要七种或更多该颜色的色调才能在屏幕上获得足够的多样性。您需要为网站的某些部分设置颜色，例如文本、背景、链接、悬停颜色、CTA 按钮和标题。

现在“如何为网站和 Web 应用程序选择配色方案？” 让我们一步一步来看看：

1. 选择你的原色。

决定原色的最佳方法是检查与您的产品或服务的情绪相匹配的颜色。

下面我们为您列出了一些示例：

• 红色：表示兴奋或快乐。
• 橙色：表示友好、有趣的时光。
• 黄色代表乐观和幸福。
• 绿色：意味着新鲜和自然。
• 蓝色：代表可靠性和保证。
• 紫色：代表具有品质历史的杰出品牌。
• 布朗：意思是每个人都可以使用的可靠产品。
• 黑色意味着奢华或优雅。
• 白色：指时尚、人性化的产品。

2. 选择您的其他颜色。

选择一种或两种其他颜色来补充您的主要颜色。理想情况下，这些颜色应该使您的主色“令人惊叹”。

3. 选择背景颜色。

选择比原色更“激进”的背景颜色。

4. 选择字体颜色。

为您网站上的文本选择一种颜色。请注意，纯黑色字体很少见，不推荐使用。

适合设计师的最佳网页调色板

如果您在 Softmedal 网络调色板集合中找不到您正在寻找的颜色，您可以查看下面的替代颜色站点：

颜色选择是一个漫长的过程，通常需要大量微调才能找到合适的颜色。此时，您可以使用 100% 免费的 Web 应用程序从头开始创建相关配色方案，从而节省时间。

1. 帕莱顿

Paletton 是一个所有网页设计师都应该知道的网页应用程序。只需输入种子颜色，应用程序就会为您完成剩下的工作。对于那些对设计一无所知的人和初学者来说，Paletton 是一个可靠的选择和一个很棒的网络应用程序。

2. 颜色安全

如果 WCAG 在您的设计过程中有任何问题，Color Safe 是最好的工具。使用此 Web 应用程序，您可以根据 WCAG 指南创建完美融合并提供丰富对比度的配色方案。

通过使用 Color Safe 网络应用程序，您可以确保您的网站符合 WCAG 指南，并且每个人都可以完全访问。

3. Adob​​e Color CC

它是为公众使用而创建的免费 Adob​​e 工具之一。这是一个精致的网络应用程序，任何人都可以从头开始创建配色方案。它允许您从最适合您需求的许多不同颜色模型中进行选择。界面起初可能看起来有点混乱，但一旦你习惯了它，选择漂亮的颜色选项应该没有问题。

4. 氛围

Ambiance 是一个免费的网络应用程序，提供来自网络上其他颜色网站的预制网络调色板。它就像一个传统的网络应用程序，您可以在其中将颜色保存到您的个人资料并从头开始创建自己的方案。所有这些网络调色板都来自 Colorlovers。Ambiance 界面使浏览更容易，并且更加注重 UI 设计的颜色交互。

5. 0到255

0to255 并不完全是一个配色方案生成器，但它可以帮助您微调现有的配色方案。该网络应用程序向您显示所有不同的色调，以便您可以立即混合和匹配颜色。

如果您发现难以创建可用的配色方案，您可以查看上述一些应用程序。

最好的网络调色板

以下网站使用各种网络调色板效果很好。它们是根据它们唤起的情感和传达的情感而精心挑选的。

1. 鱼足类

Odopod 的设计采用了单调的调色板，但旨在避免其主页上的渐变看起来很无聊。大字体提供了很好的对比。很明显，访问者希望他们点击哪里。

2. 托里之眼

Tori's Eye 是单色配色方案的一个很好的例子。在这里，可以看到以绿色阴影为中心的简单而强大的调色板的效果。这种配色方案通常很容易实现，因为一种颜色的一种色调几乎总是与相同颜色的另一种色调配合使用。

3. 奶酪救生包

红色是网站调色板中非常流行的颜色。它可以传达丰富的情感组合，使其用途广泛。正如您在 Cheese Survival Kit 网站上看到的那样，它在小剂量使用时特别有效。红色被更中性的颜色柔化，蓝色有助于 CTA 和其他业务想要吸引访问者注意力的区域。

4. Ahrefs

Ahrefs 是一个自由使用调色板的网站示例。深蓝色作为主要颜色，但整个网站都存在变化。橙色、粉红色和绿松石色也是如此。

关于颜色的最常见问题

1. 网站的最佳颜色是什么？

蓝色绝对是最安全的选择，因为它是最受欢迎的颜色，占 35%。但是，如果您的竞争对手都使用蓝色，那么“区分”您的产品和品牌可能是有意义的。但是你需要确保你不会压倒访客。

2. 网站应该有多少种颜色？

考虑到 51% 的品牌有单色标志，39% 使用两种颜色，只有 19% 的公司更喜欢全彩色标志。从这里，您可以看到具有 1、2 和 3 种颜色的网站比尝试创建具有彩虹色的网站更有意义。然而，微软和谷歌等品牌相信使用更多颜色的优势，因为他们在设计中至少使用了 4 种纯色。

3. 我应该在哪里使用颜色？

醒目的颜色要少用，否则会失去作用。这种效果需要在“立即购买”按钮等转换点中。