使用 Paletton 帮助选择您的 WordPress 网站的调色板

已发表: 2020-07-31

在这篇文章中，我们将看看如何使用 Paletton 来选择您的 WordPress 网站的调色板。 Paletton 是一个易于使用的在线调色板生成器，可为您节省大量时间。并非每个网页设计客户都有品牌配色方案，您可以为他们的网站选择颜色。这就是帕莱顿派上用场的地方。

在所有可用的在线选项中，Paletton 是最受欢迎的选项之一，因为它具有实时示例功能。该应用程序已经几年没有更新了，但值得庆幸的是，它仍然可以很好地满足您的需求。您可以在 Paletton.com 上找到该应用程序。忽略周围的 Google 广告，一切顺利。

为什么为您的网站选择正确的颜色很重要

在我们深入了解如何使用 Paletton 应用程序之前，让我们快速回顾一下为什么在网站上拥有正确的调色板很重要。如您所知，颜色带有潜意识信息，会影响观看者的情绪并最终影响他们的决定。颜色还必须代表网站的公司品牌。

为网站选择调色板的最佳方法是考虑您希望它描绘的心情。就像室内设计师选择颜色来赋予空间特定的氛围一样，您也可以为网站做同样的事情。想想第一印象；当有人登陆一个色彩鲜艳的网站时，他们会感到满足，甚至可能会微笑。具有中性柔和色调的网站可以使人平静下来并灌输一种舒适感。

当然，您选择的颜色也必须与品牌相匹配。在组合和调性中，您作为网页设计师占据中心位置。选择调色板中颜色的最佳用途对于网站的氛围也很重要。

这就是为什么 Paletton 是最受欢迎的调色板生成器之一。您可以预览如何在网站上以不同组合应用调色板。这有助于您对选择的颜色做出更好的决定。将深色作为背景而不是浅色会对最终设计产生很大的影响。

所有调色板都以基色开始

对于您在 Paletton 上创建的每个调色板，您都需要使用一种基色。但是你怎么知道使用什么基色呢？

查看客户提供给您的内容、他们的品牌以及您提供的任何图像。

如果您的客户有彩色徽标，请将其用作基色。
使用吸管工具从客户给您的其中一张图像中提取一两种颜色。
向您的客户询问他们公司的氛围和品牌故事。
如果您正在创建网页设计以作为模板或子主题出售，或用于您的投资组合，请根据您想要的设计氛围选择颜色。

在 Paletton 上创建调色板时，您可以在视觉上选择基色或在基色十六进制选项卡中选择十六进制代码。

了解 Paletton 应用程序 UI

现在是时候开始创建调色板了。让我们来看看它是如何设置的。该应用程序有两个主要部分；左侧用于选择颜色，右侧用于查看预览。

我们先来看看左边的颜色选择工具。无论你在这一边改变什么，都会改变右边的结果，但最好先了解每一方的能力。

左侧 - 颜色选择器

当您进入 Paletton 应用程序时，您首先注意到的是色轮。默认视图的基色为单色（1 色）调色板中的中性红色。

您会在色环内的一条线上看到一组 5 个点。中间的点是基色，两个点增加亮度和饱和度，而另外两个增加对比度和饱和度。

颜色组合

色环上方是五个组合按钮。选项从左到右：

单色 – 1 种颜色 + 可选互补色
相邻 – 3 种颜色 + 可选互补色
三色 – 3 种颜色 + 可选互补色
四色 – 4 种颜色
自由风格 – 4 种颜色

底色

要更改基色，您可以执行以下任一操作：

将主色点拖动到外圆的任意位置。
拖动圆圈内的中间点以选择外圆圈中所选主色的不同色调
在左下角的选项卡上输入十六进制代码。
要将辅助颜色转换为基色，您必须在屏幕的预览侧执行此操作。稍后再谈。

当您在圆圈内拖动基色点时，所有其他点都会随之移动，显示色调变体。

您还可以通过在拖动前单击 shift 来选择单个颜色。

微调

圆圈左上角的按钮可让您手动输入色调度数以进行微调。右下角的按钮有更多微调功能。在这里，您可以微调您选择的颜色的所有内容：

色调
饱和
亮度
对比

只需单击按钮即可将每种效果增加或减少 1、5 或 10 度。

根据基色预设

颜色选择区域有两个主要选择选项；颜色和预设。我们查看了上面的颜色部分。现在，让我们访问预设选项卡。根据您选择的基色和组合，预设将显示各种变量。如果您不想自己弄乱色调、饱和度、亮度和对比度，这些会很有帮助。

这些预设可以让您很好地了解您选择的颜色的可能性，以及是否有可能的辅助调色板来补充第一个。

右侧 – 调色板预览

在 Paletton 的右侧，您可以看到所有实时预览。主要区域分为四个部分，以便能够将单色调色板或其他具有两种、三种或四种颜色的调色板可视化。每个颜色部分显示较大区域中的基色及其周围的四种变化。

在下图中，您将看到颜色选择器和预览如何协同工作。

预览方块下方是一个选项卡，您可以在其中更改预览的外观。默认视图绝对是最好的，但如果您想更改外观，该按钮就在您身边。

切换基色

在预览部分，您可以单击次要或互补色之一并将它们转换为基色。将鼠标悬停在任何颜色上，然后单击“更多信息”。除了查看该颜色的所有信息外，您还会看到一个按钮，上面写着“作为基色应用”。当你点击它时，调色板中的所有颜色都会改变。

使用 Paletton 的视觉模拟功能

Paletton 的最大特点之一是能够评估您的颜色在意外情况下的外观。该功能称为“视觉模拟”，您可以在预览方块下方找到它。这些是可用的模拟：

色盲模拟
去饱和
伽玛模拟
网页颜色（传统的 216 色调色板）

如果您正在为网站创建调色板，这是一个很好的工具。您可以查看您的调色板在所有这些情况下是否正常。最有用的是色盲模拟。确保所有颜色相互区分是很好的！

查看您的调色板的实时示例

Paletton 中的另一个实用工具是选项卡，它向您展示调色板在示例网站和其他设计样式上的外观。您可以在“示例...”选项卡中找到这些模拟。第一个选择是页面布局，它有几个选项：

白页
暗页
正面设计
负片设计

该应用程序可以使用您选择的调色板向您展示艺术设计的其他模拟。有一些静态和动画示例。这些很实用，可以很好地了解您的调色板有多少潜力。

此外，在此阶段，您可以通过几种不同的方式随机化您的调色板：

相似的颜色，不同的风格
不像
相似的
不一样的颜色，相似的风格

在随机化之前，请确保获得调色板的副本！回不去了。

导出和复制调色板

现在您已经调整并预览了调色板，是时候将其从 Paletton 导出并为您的网站做好准备了。

有几种不同的方法可以复制或导出您的调色板。在窗口的右上角是一个按钮，上面写着“共享调色板”，但似乎已经坏了一段时间。只需忽略该按钮，因为它什么也不做。

以任何其他方式复制您的调色板：

通过悬停查看并单击打开信息窗口来复制单个颜色的十六进制代码。
单击“表格/导出”以查看不同格式的调色板。
在 TABLES/EXPORT' 选项卡中，以以下任何格式导出：
- 颜色列表
  - HTML
  - 较少的
  - CSS
  - SASS
  - XML
  - 文本
- 色板
  - PNG图片
  - ACO (Photoshop)
  - GPL (Gimp)
您还可以查看所选调色板中的颜色组合。

为您的 WordPress 网站添加颜色

现在是时候为您的网站添加颜色了！

由于 Paletton 应用程序已经 6 年多没有更新，您最好下载简单的文本版本并手动在样式表中输入颜色。导出功能可能不适用于您网站的 HTML 或 CSS 样式表。

要为您的 Divi 主题添加颜色，请导航到您的主题选项，然后输入每种颜色及其相应的十六进制代码。

那是彩色包装！

我们已经完成了使用 Paletton 创建调色板的步骤。该应用程序的基本功能类似于其他调色板应用程序，但使其与众不同的是能够查看网页设计和其他艺术设计的实时示例中的颜色。遗憾的是，该应用程序已经 6 年多没有更新了。谢天谢地，它似乎通过那些谷歌广告保持活力！。

您最喜欢的调色板生成器应用程序是什么？你试过帕莱顿了吗？让我们在评论中知道！

精选图片来自 DaGaAl/shutterstock.com