什么是HSL以及为什么设计师应该掌握它

颜色是设计师工具包中最强大的工具之一，但是使用Hex和RGB等传统系统有时会感到有限。这些格式可行，但它们并不能反映我们实际看到或思考颜色的方式。需要较浅的阴影或想搭配不同色调的饱和度？你猜你还不是。

这就是色调，饱和度和轻度（HSL）的来源。它使颜色调整更具视觉和可预测性，而Divi 5现在由于其相对颜色和HSL功能发布而在本地支持它。让我们探索它的工作原理以及为什么要掌握它。

为什么大多数设计师都在努力选择颜色选择

彩色工具通常与我们自然如何看待颜色不符。您会看到自己喜欢的蓝色阴影，但是捕获它的唯一方法是通过＃4A90E2之类的十六进制代码。这些字母和数字对您的大脑无关。

十六进制颜色是通过混合红色，绿色和蓝色值制成的。每对（例如4A，90，E2）显示了每种颜色的使用，从0到255。一起创建了最终颜色＃4A90E2。

当您需要较轻的品牌蓝色版本时，您可能难以弄清楚要更改哪些数字。您是否应该平均增加所有RGB值？还是只调整一个RGB通道（红色，绿色或蓝色）？这些数字与您的眼睛期望不符，因此您调整并预览直到感觉正确。

传统的颜色系统在您跨不同情况下工作时会产生更大的问题。创建颜色变化成为纯粹的猜测。您需要五种共同使用的阴影，但是没有系统。闪电＃4A90E2至＃6ba3e8看起来正确，或者看起来可能被洗净。直到看到它，您才知道。

通过更改十六进制代码获得阴影并不简单。新的十六进制值（＃6BA3E8）在左侧仔细选择，以创建＃4A90E2的较浅阴影。在右边，仅进行名义更改（＃3B99E5）不会减轻颜色，而是完全改变了颜色。

这个缓慢的手动工作流程需要几个小时才能完成。您调整值，检查预览，然后再次调整，与工具进行战斗而不是设计。当您应该关注颜色如何使人们的感觉时，您的注意力就会吸引到技术细节中。

许多设计师最终避免了颜色实验，因为该过程感觉如此笨拙。您坚持安全的选择或从其他站点复制调色板。应帮助您探索颜色创造力的工具实际上限制了它。

静态RGB值的问题

RGB值并不总是表现出您的期望。在同一设置下，绿色比蓝色显着，但是系统同样对待它们。 RGB（128，128，128）是一种理想的中等灰色，但其外观可能会因屏幕，照明或所使用的颜色配置文件而异。

想要更轻的品牌颜色吗？您可以尝试提高RGB值，有时，您会得到您的预期。其他时候，您会得到一些看起来被洗净而怪异的东西。没有办法事先告诉。

RGB值的品牌蓝色同等增加+50，从而导致掉落的阴影，这不是预期的平滑浅色。这表明，在每个RGB通道中添加相同的数量并不总是会产生可预测或平衡的色调。

RGB颜色在不同程序之间也会改变。这是由于颜色配置文件，渲染引擎以及浏览器如何解释这些值的差异而发生的。在Photoshop中选择一个完美的阴影，将十六进制代码复制到您的网站，并且看起来仍然略有不同。当相同的颜色代码在浏览器和设计工具之间看起来略有不同时，品牌准则就变得更加难以执行。

当您尝试减轻或变暗时，每种颜色都会以自己的方式变化。由于RGB不会均匀调整颜色，因此某些色调更快地淡入或以意想不到的方式转移。随着轻度的增加，有些色调比其他色调更快。当红色保持生机勃勃的同时，您的蓝色变灰色。当橙色保持干净时，您的紫色会变得泥泞。

颜色工作变成反复试验，而不是故意的设计。

什么是色调，饱和度和轻度（HSL）系统？

色相，饱和度和轻度（HSL）将颜色分为三个部分，使您的大脑实际对颜色的看法相匹配。色调从360个选件的轮子中挑选基本颜色。饱和控制该颜色的充满活力或灰色。轻度决定是黑暗，明亮还是之间的某个地方。

当您认为“我想要一个深绿色”时，您已经在考虑HSL术语。您知道您想要绿色（色调），可能相当丰富（饱和），并且在较暗的一面（轻度）。

三个组件如何一起工作

色相就像从可见光光谱中切出的色轮一样工作。末端将红色连接到洋红色，从而形成每种可能颜色的平滑环路。想要完美的橙色吗？从红色（0度）开始，然后向黄色移动约30度。

饱和度将颜色纯度视为百分比。零百分比去除所有颜色，留下灰色。百分之一百给了最生动的版本。将饱和度视为霓虹灯标志和柔和的水彩之间的差异。

HSL颜色的工作方式，灵感来自Wikipedia上有关同一主题的图形

轻度范围从0％（纯黑）到50％（中性）到100％（纯白色）。大多数可用的颜色的亮度在20％至80％之间。这与您自然考虑使颜色更浅或更暗的方式相匹配。

为什么页面构建者通常避免HSL

大多数页面构建者出于实际原因坚持使用十六进制代码和RGB，而不是因为这些系统效果更好。建筑商开发人员面临着真正的技术障碍。用户已经知道Photoshop和其他设计工具的HEX代码。在颜色系统之间转换需要额外的处理。

支持HSL意味着建立新的接口，并教育用户有关陌生概念的知识，除非将HSL彩色选择器完美地钉住。从业务角度来看，这种保守的方法也有意义，即使它限制了创造性的可能性。

使用Divi 5的新HSL控件创建完美的色彩变化

HSL从理论上讲听起来很棒，但是理论不能建立网站。您需要支持这种方法的工具。大多数页面构建者都会迫使您回到十六进制代码和RGB猜测中。 Divi 5改变了有关您如何使用颜色的一切。但首先：

什么是Divi？

Divi是一个页面构建器，其工作原理与其他WordPress页面构建器不同。您将获得视觉设计工具与严重的排版控件混合在一起。实时编辑器立即显示您的更改。调整字体尺寸，调整线间距，然后在此处观看页面更新。

您可以在任何地方丢弃200多个模块。文本块，标题和特殊内容作品都可以很好地播放。

这是使Divi与众不同的原因：为真实企业建造的2000多个现成的布局。我们正在谈论实际设计，而不是基本的入门模板。需要您的餐厅吗？有一个布局。经营摄影工作室？我们已经覆盖了你。顾问和科技初创公司也拥有自己的设计。

每个布局都知道您的行业。颜色，间距和内容流都可以对客户的思考和浏览方式有意义。

全场控制

主题构建器将您网站的每一部分都放在您的手中。构建可以说您品牌语言的自定义标题。设计博客页面，使长篇文章易于阅读。您的404错误页面可以保留与网站其余部分相同的字体和样式。

Divi AI将人工智能直接带入您的工作流程中。产生的头条听起来像您写的。创建一个与您的品牌声音完全匹配的产品副本。

它构建了了解您业务的整个页面。

在需要时写代码片段。

Divi AI也可以与您的图像一起在构建器内部使用。描述任何图像中的需求解决方案以及如何进行这些更改。

甚至按需生成全新的图片。

跳过Divi快速站点的空白页问题

Divi快速站点修复了空白页问题，该问题会在启动之前停止许多项目。专业入门网站附带已经设置的排版。我们的设计团队通过独特的图像和艺术品来构建这些模板，您将在其他任何地方看到。

Divi快速站点带有Divi AI也可以根据您的业务描述构建自定义布局。告诉它有关您的咨询业务或餐厅的信息，它可以为您的行业创建相关页面。

这不仅仅是线框。您会获得对您业务有意义的真实头条，身体副本和图像。您可以预先设置品牌字体和颜色，也可以让AI为您选择。

之后，一切都可以完全编辑，因此您可以完善排版以匹配您的视野。

Divi 5中有什么新功能？

Divi 5是Page Builder的下一个版本，目前正在Alpha测试中，并准备用于新的网站项目。我们专注于实践改进，以加快您的日常工作，并使建筑工地更加愉快。

当前Divi的最佳零件在我们重建其他所有内容时都保持不变。新鲜的界面设计符合引擎盖下的性能。现代编码实践现在为整个系统提供动力。
页面的加载速度比以前快。单击它们时，控制响应更快。在没有额外的手动工作的情况下，排版在整个网站上保持一致。

以下是一些亮点：

• 完整的框架重建转储旧的短码系统。一切都在现代基于块的体系结构上运行，该体系结构的处理能力更好。
• Divi 5的Flexbox系统可直接控制建立现代响应式布局，轻松管理对齐，间距和包装，而无需自定义代码。
• HSL颜色系统带来了与设计师思维方式相匹配的颜色控制。调整色调，饱和度和轻度，而不是使用十六进制代码进行猜测。
• 七个自定义断点取代了旧的三尺度限制。您的版式在访问者使用的每个设备上看起来都很完美。
• CSS函数内置表示Calc（），clamp（），min（）和max（）在视觉编辑器中工作。构建响应迅速的文本，该文本自然而然地缩放了没有代码。
• 全球设计变量将字体，颜色和间距存储在一个地方。更改您的主字体一次。网站上的每个H1都会自动更新。
• 基于预设的设计系统包括单个模块的元素预设以及用于完整版式样式的选项组预设。为了保持一致，请在不同的模块中使用它们。
• 一个新的Visual Builder界面可以使用可停靠面板，标签窗口，键盘快捷键以及带有面包屑的更好的图层视图。导航变得容易得多。
• 嵌套行将行放入其他行内，以进行复杂的布局。建立高级布局安排，而没有特殊的部分类型。
• 模块组将不同的元素组合为单个单元。这使得管理复杂的文本布局更加容易，您还可以构建自定义模块。
• 多面板工作区将面板移动到最佳的位置。在调整其他设计内容的同时保持排版控件的打开状态。
• 属性管理副本，粘贴和重置元素之间的排版样式。选择特定的属性进行传输而不是复制所有内容。
• 长/深色界面模式在长时间的设计过程中减少了眼睛劳损。
• 画布缩放显示了在不同屏幕尺寸上的版式在不留下编辑器的情况下看起来如何。

发现所有Divi 5功能版本

如何使用Divi 5创建HSL颜色

如前所述，Divi 5从头开始重建彩色选择器。新界面删除了HSL控件的十六进制代码，这些控制能像大脑对颜色一样工作。三个滑块处理工作：

• 色相接受0–360度，负值围绕（例如-60变为300）。色轮两端连接。零，360和负360都给您相同的红色。需要互补的颜色吗？将色调从您的起点设置为180度。
• 饱和度从0％到100％，并控制您的颜色看起来多么生动。零百分比剥离所有颜色强度，留下灰色。百分之一百给出了全面的颜色。
• 轻度在相同的百分比范围内工作。零使黑色，100％创造白色，50％显示您选择的任何色调的纯形式。

拖动时控件更新现场。应用按钮或刷新延迟不会中断您的工作流程。

1。从全球颜色中构建相对颜色

相对颜色可让您通过调整单个HSL组件来基于现有的全球颜色创建新颜色。通过添加新颜色开始在设计变量管理器中开始。

使用颜色选择器，将基本颜色（可能是品牌颜色）设置为匹配现有的主要全局颜色。

让我们使用您的主要色调转移来创建互补的颜色来设置次要颜色。采用您的原色，轻度设置为25％。

您甚至可以使用色调或饱和度来创建新的颜色作为辅助颜色。

颜色色板一目了然地向您显示重要的信息。您可以判断某些东西是否使用设计变量，并查看HSL过滤器如何修改基本颜色。这种视觉反馈可以帮助您了解颜色关系发生了什么。

同样，使用主颜色作为基础，为标题文本颜色和字体颜色全局颜色创建深色阴影。

当然，您可以在这里创建更多的装饰色，并且仍然可以输入十六进制，RGB或手动命名颜色值。

2。管理多层设计变量关系

设计变量可以彼此堆叠以进行复杂的颜色系统。根据您的初级，您可以创建其他装饰颜色，例如Burnt Moss。然后，减少燃烧的苔藓的不透明性建立阴影颜色。

这些嵌套的关系显示了Divi 5如何处理复杂的颜色层次结构。调整主颜色时，烧毁的苔藓颜色会首先更新，从而触发阴影颜色进行更新。整个链保持连接。

这种方法将颜色管理从随机猜测变成可预测的系统。您网站的调色板保持和谐，而无需在每个元素上进行手动调整。

3。将HSL颜色应用于您的网站

点击任何文本模块，然后打开彩色选择器。您保存的变量带有指示器。单击“辅助颜色”，它将填写部分的背景。相同的颜色适合按钮，背景和边界。

当您坚持一种色调时，排版起作用，但会改变轻巧。头条新闻可以使用-25％的轻度使用原色。正文文字以-15％的比例更轻。链接位于-45％。一切都相关，但保持清晰。

背景需要您的品牌色彩调低。将轻度提高到95％。将饱和度降至15％。现在，您拥有不打击内容的品牌背景。按钮可充分饱和。悬停的声明轻度降低了一个凹口。相同的颜色，强度不同。

轻型文字需要黑暗的背景。轻度数字告诉您什么有效。在50％的亮度配对上发短信，背景低于-30％的亮度。

在光背景上带有深色文本的部分反转了值。相同的色调，相同的饱和度。交换轻度值，您就完成了。当然，所有这些颜色即使在应用后仍保持其链接。更改一个变量，所有内容都适应。那样容易！

4。将HSL颜色保存为可重复使用的预设

创建模块并应用了颜色设计变量后，将这些颜色预设为可重复使用的样式。 Divi 5提供两种共同工作的预设类型：

选项组预设控制所有模块的特定设计方面。使用标题文本颜色设计变量为您的标题设计。使用Burnt Moss和50％的不透明度添加阴影。悬停在任何模块中的选项组模块图标上，适当标记并保存。

背景，间距，动画和文本相同的作品。通过数字设计变量添加边框半径，并设置引用此数字变量的预设。每个选项组都处理自己的设计区域，并且可以进行交叉应用，即，可以将列的边框半径应用于您的呼声。

要申请，请转到适当的选项并选择预设。

元素预设保存完整的模块样式。风格A按钮模块，其辅助颜色在80％的轻度上。单击模块设置右上角的预设选择器。创建一个称为“品牌颜色按钮”的新预设。这样可以节省所有按钮的设置，包括您的HSL颜色。

现在，当您添加一个新按钮时，应用此预设并继承了整个样式。要为您削减工作，请使用您创建的任何自定义预设（选项组或元素），然后单击其旁边的星图。该预设成为该元素或选项组的所有新实例的默认值。

您的HSL关系在预设中保持完整。当您更新颜色时，每个模块也会使用该颜色更新。建立预设图书馆，用于光线，黑暗部分和特殊品牌时刻。 HSL值与每个预设一起传播，使您的颜色系统在项目中保持一致。

使用Divi 5为您的网站构建颜色系统

颜色工作过去需要几天。您会使用十六进制代码，在程序之间复制价值，祈祷某些东西看起来不错。

HSL使颜色工作再次变得有趣。您会看到自己喜欢的阴影，并确切地知道如何重新创建它。色调选择颜色，饱和度控制它的生动程度，轻度使其更亮或更暗。现在，品牌刷新需要几分钟而不是数小时。

这是真正的设计控制。 Divi 5使它今天发生。