如何将调色板应用于您的 Divi 网站（20 个示例！）
已发表: 2017-08-10在今天的 Divi 教程中，我们将分享一些令人惊叹的调色板，您可以在使用 Divi 构建的下一个网站上使用它们。 为您的网站使用正确的颜色是决定您的网站整体外观和感觉的主要因素之一。
除了与您分享一些令人惊叹的调色板之外，我们还将向您展示将这些调色板添加到您的网站的可靠方法。 如有疑问，您可以随时遵循这些基本步骤，以帮助您创造美丽的结果。
一般提示
1.决定使用深色或浅色网站
在您将使用的调色板中，您无疑将拥有浅色和深色。 调色板中的对比度是强制性的，因此书面内容不会丢失。
现在，这让我们立即想到了在您的网站上应用调色板时必须问自己的第一个问题； 你想创建一个深色或浅色的网站吗？ 仅仅因为您选择了一个并不意味着您不能将它们组合起来，但是做出选择可以帮助您更轻松地选择您的调色板。
2. 颜色选择
理论上，您可以自行确定您希望调色板具有多少种颜色。 没有应用或确定调色板的标准方法。 但是，要在 Divi 中创建良好的颜色平衡，我们建议使用五种颜色。
为了帮助您将具有五种颜色的调色板应用于您的网站，我们选择了一种方法，在展示不同的调色板时，我们将始终将其应用于相同的布局。 但在我们深入研究之前，如果您想遵循我们的方法，让我们看看您的调色板中需要具有的不同类型的颜色。
2 种背景颜色
确保您选择的背景颜色相互匹配。 您将使用这些彼此接近的背景颜色并获得漂亮的效果； 他们必须有某种和谐。
1 字体颜色
您需要选择的下一件事是字体颜色。 从逻辑上讲，字体颜色取决于您选择的背景颜色。 如果您选择了浅色背景颜色，请确保您的字体颜色为深色，反之亦然。
1 超链接和 CTA 颜色
您选择的超链接颜色是使您的网站栩栩如生的颜色之一。 确保此颜色与调色板中的其他颜色不同，因为您将使用它来调用您网站上包含的号召性用语。
最后润色的 1 种颜色
最后但并非最不重要的一点是，您可以选择另一种开箱即用的颜色，为您的网站带来色彩。 尽管此颜色不如超链接颜色重要，但它会帮助您完成网站上的色彩平衡。
3. 确保有足够的对比度
正如先前所说; 在您的调色板中提供某些颜色之间的对比是必不可少的。 如果您为网站使用调色板，这种对比将主要帮助您使您共享的书面内容具有可读性。 因为; 如果您的内容不易阅读； 它的目的到底是什么？
4. 找到合适的色彩使用平衡
有多种方法可以确定您希望在调色板中使用特定颜色的频率。 如果您不想让他们对您在网站上使用的颜色感到不知所措，那么创建良好的色彩平衡是必要的。
确保大部分时间在调色板中使用更中性的颜色，并使用其他颜色来突出您提供的内容。
演练：将调色板添加到您的网站
在本文的下一部分中，我们将引导您将调色板应用到您的网站。 我们将处理将颜色添加到网站布局时所采取的不同步骤。 在本演练之后，您将进入我们共享调色板的部分。 我们不仅共享了颜色，而且还在 Divi 布局中使用了它们，以将演练付诸实践。
不用多说，让我们来看看这个过程的不同步骤。
1. 决定如何添加颜色
您可以通过两种方式添加调色板：
- 逐节添加所有颜色
- 按颜色完成您的网站颜色
尽管您可能会将这两种方法相互混合，但我们建议您首先按颜色完成您的网站。 这样，您就不必连续复制和粘贴不同的颜色代码。 您复制每种颜色一次，然后继续复制另一种颜色。
2. 添加背景颜色
一旦决定了如何插入颜色，就可以从背景颜色开始。 从背景颜色开始是一个好主意的原因之一是因为您会立即看到结果。 您正在为您在网站上使用的颜色奠定基础。
如果您选择创建浅色网站； 首先将最亮的颜色添加到第二部分的背景中，然后在第三部分中添加第二亮的颜色。
3. 添加文字颜色
为网站添加背景颜色后，您可以开始向网站添加文本颜色。 您网站上的所有书面内容都需要具有这种颜色（除了超链接和号召性用语）。
4. 为您的网站添加超链接和 CTA 颜色
接下来，您可以做的是使您网站上的超链接和号召性用语脱颖而出。 它们会引起人们的注意，并使他们好奇链接或号召性用语是关于什么的。
确保您网站上所有可点击的内容都包含这种颜色。 通过保持这种一致性，您的访问者将轻松识别他们可以点击的位置以继续留在您的网站上。
5. 添加最终触感颜色
您需要做的最后一件事是为网站添加最后的触感颜色。 在我们制作的示例和调色板中，我们在三个地方使用了这种最终触感颜色：模糊圆圈颜色、人物模块的标题文本和主菜单栏。
虽然最后的触感颜色不是您将在网站上使用的主要颜色，但它可以让您带来网站所需的额外颜色。 毕竟，您不希望您的网站看起来单调或令人讨厌。
调色板
现在我们已经分析了将调色板应用到您的网站所需的步骤，是时候开始探索一些令人惊叹的调色板了。 除了向您展示我们制作的示例布局的结果之外，我们还将分享我们用来达到该结果的颜色代码。
1. 几天的瓷砖
我们选择的第一个调色板主要包含较柔和（略带柔和）的颜色。 由于我们选择了一个浅色网站，调色板中较浅的颜色占据了网站的大部分。 但是，我们调色板中较深的颜色可确保网站包含所需的色彩平衡。
本示例中使用的颜色如下（从左到右）：
- #EBE8E2
- #768A95
- #B98077
- #007193
- #E2D7D7
2.沙漠
列表中的下一个调色板称为沙漠。 此调色板的色彩平衡略微倾向于深色网站。 在这个例子中占主导地位的颜色是蓝色。 但是还有一种非常浅的文本颜色，可以确保所需的对比度存在。
此调色板中使用的颜色如下（从左到右）：
- #507782
- #7C8E93
- #D89C79
- #443F3C
- #FFE8D8
3. 节日
下一个调色板不是您经常会看到的调色板。 这些颜色通常不会出现在同一个调色板中，但它们非常有趣。 如果您希望您的网站看起来独一无二，那么这个调色板就是您要走的路。
此调色板中使用的颜色是（从左到右）：
- #E6EBD1
- #A59E4C
- #544C4D
- #AF3D4B
- #CED3BC
4. 小指承诺
如果您想制作深色网站，该行中的下一个调色板是一个很好的选择。 众所周知，黑色色调和粉红色色调是一个很好的组合。 它们为网站增添了俏皮的额外触感，同时又不会显得过于女性化。 黑色阴影确保您网站的外观和感觉仍然包含所需的深度。
此调色板中使用的颜色是（从左到右）：
- #33383A
- #ECC9C8
- #E2566D
- #4F575A
- #D3D8DA
5. 圣托里尼
在下一个调色板中，您可以清楚地注意到蓝色在其他颜色中占主导地位。 使用此调色板，您会立即获得轻松和积极的感觉。 众所周知，蓝色是人们在建立网站时喜欢的颜色之一。 这是一种体现专业精神的标准颜色。 然而，这个调色板中使用的蓝色阴影也显示出俏皮的一面。
我们在这个例子中使用的调色板是（从左到右）：
- #1198EA
- #0A5785
- #A85A4D
- #F1F5FA
- #C5DFF8
6.紫悦
这个调色板中的主导颜色显然是紫色。 尽管它通常被认为是一种令人沮丧的颜色，但这种调色板及其在网站上的使用却有所不同。 当它与更亮的颜色相结合时，紫色可以提供令人惊叹的效果。
此调色板中使用的颜色如下：
- #D7D7ED
- #52517B
- #737172
- #FCFCFC
- #F0F1A
7. 微妙
我们要分享的下一个调色板非常中性，与节日调色板的风格相同。 你也不会经常看到，但它看起来很干净。
本例中使用的颜色是（从左到右）：
- #DAE2D5
- #4B7263
- #A8A461
- #494949
- #中交建
8. 企业
我们要分享的下一个调色板非常适合各种商业网站。 正在使用的颜色反映了一定的积极性和青春。 浅色背景使黄色和绿松石色为网站带来附加值。
此调色板中使用的颜色是（从左到右）：
- #181242
- #4ABDAC
- #DBDBDB
- #F7B733
- #FCFCFC
9. 玫瑰
谁不喜欢玫瑰色？ 下一个调色板为您的网站带来了女性化的因素。 浅色在网站上占主导地位，但它们也确保了深色也能被赋予权力。
此调色板中使用的颜色是（从左到右）：
- #152038
- #DDA199
- #FF614C
- #F5F5F5
- #E2E2E2
10. 巧克力
我们要放在聚光灯下的下一个调色板是巧克力色。 这个调色板的好处是背景颜色和文本颜色属于同一颜色类别。 这为其他两种颜色提供了与这些颜色区分开来并引起注意的空间。
此调色板中使用的颜色是（从左到右）：
- #FFF4E8
- #FFE2C4
- #822317
- #935B3B
- #346E70
11. 精致
下一种颜色组合是您一见钟情的东西。 紫色和黄绿色并不经常一起使用，但正如您在结果中看到的那样； 他们很匹配。 为了保持对这两种颜色的关注，背景颜色和文本颜色相当中性。
此调色板中使用的颜色是（从左到右）：
- #88D317
- #4F2649
- #FCFCFC
- #EFEFEF
- #080816
12. 奥利维亚
奥利维亚是一个不需要太多解释的调色板。 橄榄色和黄色的颜色结合得非常好。 保持较浅的颜色更中性可以让这些颜色抢占风头。
此调色板中使用的颜色是（从左到右）：
- #778E3B
- #FFD902
- #132819
- #EFEFEF
- #FCFCFC
13. 金门
柔和的米色可以让您的网站反映出一种排他性。 虽然调色板看起来很清醒，但这个调色板中的紫色绿松石色设法带来了网站所需的温暖。
此调色板中使用的颜色是（从左到右）：
- #373737
- #F3F4E8
- #ADA075
- #EDE4C9
- #A685BC
14.船长
这个调色板可能是列表中最专业的调色板。 这个调色板中的两种深蓝色是主要原因。 然而，红色在打破僵局和为网站增加一些多样性方面做得很好。
这篇文章中使用的颜色是（从左到右）：
- #3B578E
- #DB2323
- #D7DEED
- #F7F9FF
- #201C44
15. 环保
我们要分享的下一个调色板是环境。 这个名字表明绿色在这个调色板中占主导地位。 这些柔和的绿色与此调色板中提供的柔和的绿松石色完美契合。
此调色板中的颜色是（从左到右）：
- #C2D3DO
- #56776A
- #42B7A7
- #EDF4
- #26423E
16.软丰富
在下一个调色板中，我们可以清楚地看到米色和红色的完美组合。 他们给任何类型的网站一种成熟感。 通过添加另一种引人注目的绿色，您网站的外观和感觉也会有一些年轻化。
此调色板中的颜色是（从左到右）：
- #984B43
- #233237
- #B7A97C
- #F9F0D4
- #527C40
17. 迷人
行中的下一个调色板是另一个深色网站。 主要颜色是深紫色和灰色。 然而，较浅的颜色设法给网站带来了一些温暖。
此调色板中的颜色是（从左到右）：
- #D0B6D6
- #3CC203D
- #898989
- #F2F2F2
- #F9AEBD
18. 薄荷
薄荷色调为您的网站带来新鲜感。 虽然乍一看非常清醒，但橙色和紫色确实给网站带来了新鲜和重生的感觉。
此调色板中使用的颜色是（从左到右）：
- #31190A
- #B4BCA7
- #F99A53
- #54468E
- #E3EDE5
19. 柔和的黄色
这种独特的调色板主要包含暖色。 虽然我们有深色和浅色作为背景色，但整体感觉更倾向于浅色网站。
此调色板中的颜色是（从左到右）：
- #DDCF30
- #437468
- #F1FFD1
- #4A4C49
- #FCFAD9
20. 神秘
该行中的最后一个调色板是另一个可用于您的网站的深色调色板。 这个调色板中使用的背景颜色是清醒的，并允许调色板中的其他更亮的颜色出现。
此调色板中的颜色是：
- #131517
- #13828A
- #35363A
- #EEF5F7
- #AF8300
最后的想法
在这篇文章中，我们分享了一些关于如何将您选择的调色板应用到您的网站的技巧。 除此之外，我们还向您展示了 20 种漂亮的调色板，可以帮助您为您的网站带来优雅。 如果您有任何问题或建议，请随时在下面的评论部分发表评论。
当你在那里时，让我们知道； 你最喜欢这些调色板中的哪一种？
特色图片由 EDGOR_21/shutterstock.com 提供