8个简单的规则来创建最好的网站配色方案网站制作, 网站设计, 网页UI设计厦门网站建设

1.从你想表达的情绪开始

当你为你的网站选择一个调色板时，你不能只考虑事物的外观，你也必须考虑他们的感受。颜色会激起情绪是一个众所周知的事实。这些含义将直接影响您的用户感知您的产品的方式。因此，找出你想传达的感受。

“当你为你的网站选择一个调色板时，你不能只考虑事物的外观，你也必须考虑他们的感受。”

问问自己：我希望我的访问者与本网站关联什么样的情绪或感受？

为了让你开始，我编写了一个快速的参考指南，涵盖了每种颜色（在西方世界）的基本关联：

红色（激情，强大，危险，重要）：红色是一种非常刺激的颜色。它给人速度和力量的印象，传达重要意义或通知危险。已经证明了增加血液循环和提高新陈代谢的生理效果。
橙色（俏皮，充满活力，有吸引力，便宜）：橙色是温暖而鲜明的颜色。它有一个充满活力的光环，并能够为您的访客创造一个欢迎的感觉。
黄色（开朗，友善，刺激，注意力）：黄色可以是一种非常多才多艺的颜色，取决于你选择的颜色。淡黄色往往与太阳相关，因此传达积极性和温暖。黄色深色给人古老和年龄的印象。
绿色（自然，安全，新鲜）：绿色反映了环保和亲近自然的感觉。这也意味着增长，这就是为什么它往往与一个有利可图的业务。
蓝色（信任，平静，可靠）：蓝色往往与平静和放松的情绪相关。蓝色发出内心安全感。这就是为什么你会看到银行和技术企业使用这种颜色。
紫色（豪华，神秘，浪漫，精神）：从历史上来看，紫色暗示产品是高端的。
粉红色（女性，无罪，青春）：粉红色以其与女性的联想而闻名（许多人认为它是“女孩的颜色”）。尽管如此，粉红色并不是女性中最流行的颜色（根据Joe Hallock的研究）。粉红色经常用于浪漫的主题。
黑色（功能强大，复杂，神秘，锋利）：黑色是光谱中最强大的颜色 – 它比其他颜色（包括红色）更能吸引注意力。这就是为什么它最常用于文本和口音。黑色作为背景等配色方案的主要成分使用时，能够产生动力或奢华的感觉。
白色（纯度，健康，清洁，无辜）：白色配以其他颜色，使其成为次要颜色的流行选择。当用作主要颜色时，白色能够提供“干净”的感觉，并将访客的注意力集中在重要元素（例如对比号召性用语按钮）上。
灰色（中性，正式，高雅，不育）：灰色往往与中立性相关。以灰色作为主要色彩的色彩搭配，营造出形式感，这也是灰色在商业世界中如此受欢迎的原因。

2.限制颜色的数量

将颜色应用于设计项目与平衡有很大关系。你使用的颜色越多，达到这种平衡就越困难。

在设计中使用太多颜色就像试图一次传达一百万个感觉和信息。这只会混淆你网站的访问者。

如果限制设计中使用的颜色数量，将会得到更好的结果。根据经验，在您的配色方案中最多可以使用三种原色。事实证明，大多数用户喜欢简单的配色方案：根据多伦多大学关于人们如何使用Adobe Color CC的研究，大多数人表示，他们喜欢简单的颜色组合，只依靠两种或三种颜色。

提示：如果除了在调色板中定义的颜色之外，还需要其他颜色，请使用阴影和色调。

3.避免使用纯黑色

当我们看到现实生活中的黑暗事物时，我们经常认为它们是黑色的东西。事实上，纯黑几乎不存在。我们周围的所有“黑色”物体都有一些光线反射，这意味着它们并不是真正的黑色，它们是深灰色的。

当您将纯黑色放置在一组挑选的颜色旁边时，黑色将压倒一切。它脱颖而出，因为它不自然。我们使用的许多应用程序和我们每天访问的网站都有黑色，而不是真正的黑色，而是黑色的灰色。例如，苹果顶栏上最黑的颜色不是＃000000，是＃333333。所以要记得总是给你的颜色添加一点饱和度。

苹果公司的顶部酒吧使用接近黑色的颜色 – 稍微有点淡静，所以它不会压倒页面上的其他元素。

4.尽量遵循60-30-10规则

这是一个永恒的装饰规则，可以帮助你轻松地把一个配色方案。60％+ 30％+ 10％的比例是为了平衡任何空间的颜色。

这个概念使用起来非常简单：60％是主色，30％是次色，10％是重音色。这个想法是第二种颜色支持原色，但不同的是它们分开。你的10％是你的口音颜色。它可以是CTA或其他元素的颜色。

5.先设计灰度

玩颜色很有趣。这就是为什么选择配色方案通常是我们在开始一个新项目时首先要做的事情之一。从一开始就使用不同的颜色组合真的很诱人，但我强烈建议您避免这种诱惑，而是首先关注灰度级设计。在添加颜色之前在灰度级中进行设计，强制您将重点放在页面结构和布局元素上。

因此，首先找出层次结构：

只有在那个颜色的实验之后：

6.使用颜色对比度设置重要性

对比度是两种颜色之间变化的量度。这是一个强大的工具，可以帮助引导眼睛。一般来说，高对比度是重要内容或关键要素的最佳选择。你想要脱颖而出的东西越多，就越需要依靠不同的颜色。

CTA按钮“Get Evernote，It’s Free”和背景都有相似的颜色。这使得很难看到CTA的按钮。

考虑下面的例子。在第一个例子中，由于背景和按钮的颜色几乎相同，因此几乎看不到主要呼叫操作按钮“Get Evernote，It’s Free”。

在第二个例子中，您可以轻松地找到CTA按钮。

Mozilla Firefox网站使用对比鲜明的绿色将用户的注意力引导至CTA按钮。

遵循连续性的规则

考虑整个网站的颜色连续性。连续性并不意味着在每个页面上使用相同的颜色 – 这将是无聊的！但是，它意味着使用颜色从一个页面到另一个页面进行平滑的颜色转换。当访问者浏览您的网站时，这将会产生一种熟悉感。在大多数情况下，仅使用一种连接颜色就可能产生这种效果。例如，当访问者从主页移动到产品页面时，可以使用品牌颜色作为标题，以创造一致体验的感觉。