在这篇文章中,我们将了解如何使用 Paletton 来选择您的 WordPress 网站的调色板。 Paletton 是一款易于使用的在线调色板生成器,可为您节省大量时间。 并非每个网页设计客户都会有品牌配色方案,您需要为他们的网站选择颜色。 这就是 Paletton 派上用场的地方。
在所有可用的在线选项中,Paletton 是最受欢迎的选项之一,因为它具有实时示例功能。 该应用程序在几年内没有更新,但幸运的是仍然可以很好地满足您的需求。 您可以在 Paletton.com 上找到该应用程序。 忽略它周围的谷歌广告,你很高兴。
为什么为您的网站选择正确的颜色很重要
在深入了解如何使用 Paletton 应用程序之前,让我们快速回顾一下为什么在网站上拥有正确的调色板很重要。 如您所知,颜色带有潜意识信息,影响观众的情绪并最终影响他们的决定。 颜色还必须代表网站的公司品牌。
为网站选择调色板的最佳方法是考虑您希望它描绘的情绪。 就像室内设计师选择颜色来赋予空间特定的氛围一样,您也可以为网站做同样的事情。 想想第一印象; 当有人登陆一个色彩鲜艳、充满活力的网站时,他们会感到满足,甚至会微笑。 具有中性柔和色调的网站可以使人平静下来并灌输一种舒适感。
当然,您选择的颜色也必须与品牌相匹配。 它是您作为网页设计师占据中心舞台的组合和音调。 选择调色板中颜色的最佳用途对于网站的氛围也很重要。
这就是为什么 Paletton 是最受欢迎的调色板生成器之一。 您可以预览如何在网站上以不同组合应用调色板。 这有助于您对所选颜色做出更好的决定。 将深色作为背景而不是浅色将对最终设计产生很大影响。
所有调色板都以基色开始
对于您在 Paletton 上创建的每个调色板,您都需要使用基色。 但是你怎么知道使用什么基色呢?
查看客户提供给您的内容、他们的品牌以及您提供的任何图像。
- 如果您的客户有彩色徽标,请将其用作您的基色。
- 使用吸管工具从客户给您的一张图像中提取一两种颜色。
- 向您的客户询问他们公司的氛围和品牌故事。
- 如果您正在创建网页设计以作为模板或子主题销售,或者为您的作品集销售,请根据您想要的设计情绪选择一种颜色。
在 Paletton 上创建调色板时,您可以在视觉上选择基色或在基色十六进制选项卡中选择十六进制代码。
了解 Paletton 应用程序 UI
现在是时候开始创建调色板了。 让我们来看看它是如何设置的。 该应用程序有两个主要部分; 左侧是关于选择颜色的,右侧是关于查看预览的。
我们先来看看左边的颜色选择工具。 无论您在这一侧进行什么更改,都会改变右侧的结果,但最好先了解每一方的能力。
左侧 – 颜色选择器
当您进入 Paletton 应用程序时,您首先注意到的是色轮。 默认视图的基色为单色(1 色)调色板中的中性红色。
您将在色环内的一条线上看到一组 5 个点。 中间的点是基色,两个点增加亮度和去饱和度,另外两个增加对比度和饱和度。
颜色组合
色环上方是五个组合按钮。 选项从左到右:
- 单色 – 1 种颜色 + 可选互补色
- 相邻 – 3 种颜色 + 可选互补色
- 三色 – 3 种颜色 + 可选互补色
- Tetrad – 4 种颜色
- 自由款式 – 4 种颜色
基本颜色
要更改基色,您可以执行以下任一操作:
- 将主色点拖动到外圈的任意位置。
- 拖动圆圈内的中间点以选择外圈所选主色的不同色调
- 在左下选项卡上输入十六进制代码。
- 要将辅助颜色转换为基色,您必须在屏幕的预览侧执行此操作。 稍后再谈。
当您在圆圈内拖动基色点时,所有其他点都会随之移动,显示色调变体。
您还可以通过在拖动前单击 shift 来选择单个颜色。
微调
圆圈左上角的按钮可让您手动输入色调度数以进行微调。 右下角的按钮还有更多微调功能。 在这里,您可以微调有关您选择的颜色的所有内容:
- 色调
- 饱和
- 亮度
- 对比
只需单击按钮即可将每个效果增加或减少 1、5 或 10 度。
根据基色预设
颜色选择区域有两个主要的选择选项; 颜色和预设。 我们查看了上面的颜色部分。 现在,让我们访问预设选项卡。 根据您选择的基色和组合,预设将显示各种变量。 如果您不想自己弄乱色调、饱和度、亮度和对比度,这些会很有帮助。
这些预设可以让您很好地了解您选择的颜色的可能性,以及是否有可能的辅助调色板来补充第一个调色板。
右侧 – 调色板预览
在 Paletton 的右侧,您可以看到所有实时预览。 主要区域分为四个部分,以便能够以两种、三种或四种颜色显示单色调色板或其他调色板。 每个颜色部分显示较大区域中的基色及其周围的四种变体。
在下图中,您将看到颜色选择器和预览如何协同工作。
预览方块下方是一个选项卡,您可以在其中更改预览的外观。 默认视图绝对是最好的,但如果你想改变事物的外观,那个按钮就在那里。
切换基色
在预览部分中,您可以单击其中一种辅助色或补色并将它们转换为基色。 将鼠标悬停在任何颜色上,然后单击“更多信息”。 除了查看该颜色的所有信息外,您还会看到一个按钮,上面写着“应用为基色”。 当你点击它时,调色板中的所有颜色都会改变。
使用 Paletton 的视觉模拟功能
Paletton 的最大特点之一是能够评估您的颜色在意外情况下的外观。 该功能称为“视觉模拟”,您会在预览方块下方找到它。 这些是可用的模拟:
- 色盲模拟
- 去饱和
- 伽马模拟
- Web 颜色(旧版 216 色调色板)
如果您正在为网站创建调色板,这是一个很棒的工具。 您可以查看您的调色板在所有这些情况下是否看起来都不错。 最有用的是色盲模拟。 最好确保所有颜色相互区分!
查看您的调色板的实时示例
Paletton 中的另一个实用工具是显示调色板在示例网站和其他设计样式上的外观的选项卡。 您可以在“示例…”选项卡中找到这些模拟。 第一个选择是页面布局,它有几个选项:
- 白页
- 暗页
- 正面设计
- 负片设计
该应用程序可以使用您选择的调色板向您展示艺术设计的其他模拟。 有一些静态和动画示例。 这些是实用的,可以很好地了解您的调色板有多少潜力。
此外,在这个阶段,您可以通过几种不同的方式随机化您的调色板:
- 相似的颜色,不同的风格
- 不像
- 相似的
- 不同的颜色,相似的风格
确保在随机化之前获得调色板的副本! 回不去了。
导出和复制调色板
现在您已经调整并预览了您的调色板,是时候从 Paletton 导出它并为您的网站做好准备了。
有几种不同的方法可以复制或导出您的调色板。 窗口的右上角是一个按钮,上面写着“共享调色板”,但似乎不久前就坏了。 只需忽略该按钮,因为它什么都不做。
以任何其他方式复制您的调色板:
- 通过悬停查看并单击以打开信息窗口,复制单个颜色的十六进制代码。
- 单击“表格/导出”以查看不同格式的调色板。
- 在 TABLES/EXPORT’ 选项卡中,以下列任何格式导出:
- 颜色列表
- HTML
- 较少的
- CSS
- SASS
- XML
- 文本
- 色板
- PNG图像
- ACO (Photoshop)
- GPL (Gimp)
- 颜色列表
- 您还可以查看所选调色板中的颜色组合。
将颜色添加到您的 WordPress 网站
现在是时候将颜色实际添加到您的网站了!
由于 Paletton 应用程序已经 6 年多没有更新了,您最好下载简单的文本版本并手动在样式表中输入颜色。 导出功能可能不适用于您网站的 HTML 或 CSS 样式表。
要将颜色添加到您的 Divi 主题,请导航到您的主题选项,然后输入每种颜色及其相应的十六进制代码。
那是彩色包装!
我们已经完成了使用 Paletton 创建调色板的步骤。 该应用程序的基本功能与其他调色板应用程序相似,但使其与众不同的是能够在网页设计和其他艺术设计的实时示例中查看颜色。 遗憾的是,该应用程序已超过 6 年没有更新。 值得庆幸的是,它似乎通过那些谷歌广告保持活力!
您最喜欢的调色板生成器应用程序是什么? 你试过Paletton吗? 让我们在评论中知道!
特色图片来自 DaGaAl / shutterstock.com