了解网络设计中的相对颜色

在Web设计中，即使最简单的决策也可以乘。从单个设计选择开始的开始，很快就会扩展到数十种视觉变化，以进行交互，背景，边界等。您的构建可能会被不匹配的值和手动调整而没有一致的系统变得混乱。

CSS中的相对颜色语法提供了更智能，更可扩展的方法。它使您可以根据单个源来定义视觉变化，从而保持设计具有凝聚力和易于管理的视觉变化。通常，这需要编写自定义代码。但是使用Divi 5，您可以从一开始就可以在视觉上使用这些现代技术。让我们仔细看一下。

常见的颜色管理问题

您选择的一种完美的品牌颜色可以迅速繁殖到散布在您网站上的数十种变体。以下是一些促成此问题的问题：

管理一种颜色的变化

您从一个基本蓝色开始，很快需要数十种变体。您的页面构建器的颜色拾取器变成一团糟。浅蓝色，浅蓝色，深蓝色，深蓝色，褪色的蓝色 - 每种都被保存为单独的颜色。

您的蓝色品牌在您的网站上跨越了二十种不同的阴影。一些部分使用原始蓝色，另一些则使用您三周前制作的更轻版本，并且您的按钮使用您制作的较深的阴影以更好地对比。

这些颜色都没有连接到其他颜色。当您的客户想要紫色而不是蓝色时，您将面对手动更新每种颜色。您将花费数小时点击模块。您追捕每个阴影。您希望您不要错过任何人。

左侧许多类似的蓝色阴影的集合变成了右侧的零星，无关的紫色，因为一个一个一个一个一个一个乏味的，需要持续的一致性。更重要的是，这些颜色变化通常是盯着的，并且没有任何连接。

不透明度问题

许多页面构建器都包括透明度控件，这可能是颜色一致性的噩梦。您可以创建一个完美的蓝色覆盖层，具有60％的不透明度，但是以后，您需要与其他部分相同的透明红色。

您的页面构建器不记得确切的混合物，因此您将不透明的滑块射击，并试图匹配您以前的作品。

尝试1、2和3的阴影和透明度各不相同，因为即使有精确的控件，眼球也不会提供精确的结果。

一些页面构建器可让您保存透明的颜色。其他人没有。您最终会得到一堆外观相似的透明蓝色。

它们都略有不同。您的设计失去了一致性。您无法在各种模块上可靠地重新创建相同的透明颜色。每次需要透明度时，您都会从头开始。您猜测不透明度值。您希望它们与您现有的设计相匹配。

手动创建变量

大多数页面构建者都提供某种形式的彩色节省，但是它很快变得难以管理。您可以保存带有“黄色1”，“黄色2”和“黄光”的通用名称的颜色。

六个月后，您不知道哪个黄色可以做什么。您保存的调色板变成了一堆相似的颜色，名称毫无意义。您的颜色库在没有任何组织系统的情况下增长。您有三个不同的橙色看起来几乎相同，但它们具有各种目的。

许多颜色色板的网格，带有重叠的阴影和不一致的名称不一致的网格有助于混乱，令人困惑的调色板，难以组织或有效地组织或使用。

团队成员添加其颜色变化，创建具有不同名称的重复阴影。您的品牌橙色以“橙色”，“品牌橙色”，“主要橙色”和“橙色主”存在。没有人知道要使用哪一个。

一些开发人员试图通过编写自定义CSS变量来解决此问题。这使他们可以更好地控制颜色关系。

但是现在您已经创建了一个技术障碍。您的非技术团队成员无法再更新颜色，并且您的客户无法自行更改简单的颜色。您将对每种较小的颜色调整负责。

CSS中有什么相对颜色（以及为什么需要它们）

相对颜色解决了您的颜色问题。您选择一种品牌颜色。 CSS制作您需要的所有版本。背景的轻度。黑暗的边界。清晰的覆盖层。全部来自一种起始颜色。

CSS充当动态颜色工具。您告诉它，“使这个黄色的打火机。” CSS完成了工作。盘旋时，您的红色按钮需要褪色。 CSS增加了透明度。您的蓝色标头需要一个较暗的边界。 CSS立即创建它。

传统的工作流程需要更多的手动努力。设计师在Photoshop中制作了颜色套装。编码器使用了Sass等工具。网站建筑商不得不猜测匹配的颜色。 CSS现在自动处理此操作。

CSS如何从颜色创建颜色

“来自”一词告诉CSS将现有颜色用作其起点。您给CSS颜色，它可以将其变成可以使用的碎片。

您的起始颜色成为基础。 CSS将其分为部分。红色数量，绿色量，蓝色量。或色相，亮度和饱和度，如果您喜欢这些控件。

您可以从任何颜色格式开始。使用＃E91E63之类的十六进制颜色。告诉CSS作为HSL使用它，以便于亮度更改。如果您的代码需要，将其输出为RGB。 CSS自动转换所有内容。

该代码遵循一个简单的模式。首先，您说要从哪里获得颜色，然后说出对它的改变。您可以保持所有相同的内容，但可以增加透明度，或更改色调，但要保持亮度。两者都以相同的方式工作。

将颜色分为部分

不同的颜色格式为您提供不同的工具。 RGB可让您分别更换红色，绿色和蓝色。 HSL为您提供色调，饱和度和轻度控制。

这是它的工作方式。您编写RGB（来自＃FF4081 RGB）。 CSS采用了粉红色的十六进制代码，并将其分成红色，绿色和蓝色数字。然后，您可以根据需要使用这些数字。该图案保持不变：颜色功能（来自您的彩色通道1 Channel2 Channel3）。

因此，您没有从头开始编写颜色，而是建立在现有颜色上，而仅更改要更改的零件。

每个部分都会转换以匹配您选择的内容。转换粉红色的六角形给您r = 255，g = 64，b = 129。将它们按原样使用或使用calc（）更改它们。

您也可以混合并匹配频道。想要所有红色像素一样吗？使用RGB（来自VAR（–Color）GGG）。这将采用绿色值并将其用于红色，绿色和蓝色，从而从原始颜色产生了灰色音调。

浏览器支持和其他注意事项

大型网站不能忽略访客，因为他们需要容纳所有人。野生动物园的旧版本的工作方式不同。 Chrome版本以自己的方式处理一些事情。 Firefox，它是自己的。您最终将编写三个不同的代码版本，以实现一种颜色效果。

所有这些额外的工作要花时间远离更好的事情。您可以提高网站的功能并添加人们想要的功能。

许多开发人员选择性地使用相对颜色。由于您控制浏览器，因此内部工具和个人项目运行良好。营销网站和客户工作需要更仔细的计划。

该技术在支持的地方效果很好。问题是额外的复杂性是否适合您的项目时间表和团队或客户的技术能力。但是在大多数情况下，对于大多数团队成员来说，这将是过度杀伤和开销。

这就是Divi团队介入的原因。我们看到Web设计师在浏览器兼容性方面挣扎，同时错过了强大的色彩工具。我们在Divi 5中的解决方案采用了相对颜色的最佳部分，并将它们包裹在各处可用且不需要编码的系统中。

Divi 5如何使相对颜色变得容易

现在，您知道相对色彩的力量；但是，您可能已经意识到它并不容易实施。 Divi 5采用了不同的方法，并将其构建在其视觉界面中。但是，让我们找出哪个Divi是什么。

什么是Divi？

Divi是最受欢迎的WordPress页面构建器。它优先考虑视觉设计，并使您完全控制设计。

您可以观察更改现场，调整字体大小或线间距，并立即在页面上查看结果。您可以访问200多个您想要的模块。文本块，标题和内容作品作为团队工作。没有将您的想法挤入尴尬形状的刚性模板。

这是使Divi与众不同的原因：在2000年为真实企业建立的现成布局。这些不是基本的入门模板。每个设计都针对特定行业。您会发现讲述听众语言并符合您业务需求的布局。

使用Divi快速站点跳过空白页蓝调

Divi快速站点修复了使空的画布吓倒在项目开始之前杀死项目的空白。您将获得具有扎实设计的专业入门网站，我们的设计团队使用您在其他任何地方找不到的原始图像和艺术品来构建。

如果您想要更个性化的东西，Divi快速站点与Divi AI合作，根据您的业务详细信息构建自定义布局。描述您的咨询公司或餐厅，并生产具有特定于行业内容的相关页面。

这些不是基本的线框：您会收到适合您业务类型的实际标题，书面内容和图像。它甚至为您设计了标题和页脚，产品页面和博客文章模板。

您可以从一开始就设置品牌字体和颜色，也可以让AI为您选择它们。 AI在这些准则中起作用。之后，所有内容都保持完全可编辑，因此您可以调整排版，直到它符合您的确切需求为止。

现在可以完全控制网站的设计

主题构建器使您在整个网站上负责设计。创建自定义标题以反映您的品牌个性。构建博客布局，使读者涉及长篇文章。您的404页可以与匹配的字体和样式保持在品牌上。

如前所述，Divi AI将AI放在您的设计工作流程中。创建听起来像您写的头条新闻和捕捉您品牌声音的产品描述。

可以在构建器内完成照片编辑。告诉AI您在图像中需要什么变化，并处理编辑。

需要新的图像吗？它也创造了这些。

完整的页面部分非常适合您的业务。

加上代码片段时，您需要它们。

Divi 5：下一个进化

Divi 5以明确的任务进入Alpha测试：提高网页设计过程的性能。我们听了真正的反馈，内容涉及什么让您放慢脚步以及什么对您有所帮助。

您喜欢当前的Divi持续的所有内容。我们只是使它工作得更好。该界面看起来更干净。页面的加载速度比以前快。单击它们时，控件响应正确。

我们使用当今的网络标准重建了基金会。这意味着更少的怪异错误，整体上的性能更平滑。

您花更少的时间与建造者战斗和更多的时间设计。您的网站看起来更专业，因为一致性会自动发生。客户获得更好的网站，因为您可以专注于他们的需求而不是技术问题。

Alpha版本可以在新网站上使用，尽管我们不建议将您现有的Divi 4网站转换为Divi 5。

Divi 5中的新功能

Divi 5为您构建网站的方式带来了重大更改。公共Alpha版本现在非常适合新项目。我们的开发团队每两周运送新功能，自Alpha开始以来已经发布了几次重大更新。

这是一些关键更新：

• 现代代码库通过仅加载您实际需要的模块来加快速度，从而删除了减慢Divi 4的代码膨胀。
• 现在，一个完整的Flexbox布局系统包括新的行模板，自动垂直中心，内容包装和通过视觉控制的间距分布。
• 一个崭新的循环构建器，可重复具有动态内容的模块，组或部分，并支持用于复杂数据结构的嵌套循环。
• 带有HSL的相对颜色基于色调，饱和度和轻度值提供动态色彩控制。
• 基于HTML-5的系统完全替代了短代码，这意味着更少的错误和更好的WordPress兼容性。
• Visual Builder接口进行了完整的改头换面，带有浅色和深色模式，可停靠面板，标签窗户，键盘快捷键以及带有面包屑的改进图层。
• 可自定义的响应式断点替换了Divi 4的三个固定的断点，从而为您提供了帆布缩放的更多控制权，以确切地查看设计如何查看不同的屏幕尺寸。
• 模块组的工作方式就像将相关元素捆绑在一起的多功能容器，因此您可以将它们作为单位进行样式或移动它们而不会失去关系。
• 设计变量可让您在整个网站上设置全球范围的颜色，字体，数字，图像，文本和URL。
• 选项组预设保存特定的设计属性，例如排版或在不同模块类型上工作的阴影。
• 现在，高级CSS单元支持Clamp（），calc（），min（）和max（）通过视觉界面函数而无需编写代码。
• 交互系统会创建弹出窗口，切换，滚动效果和鼠标移动效果，而无需外部插件。

要发生什么...

• WooCommerce模块使用具有完整预设和可变兼容性的Divi 5体系结构从头开始重建。
• 元素检查员将为高级用户提供新的调试和开发工具。
• 同样，组旋转木马模块可以帮助您创建由组组成的旋转木马，然后通过利用Divi的完整元素来设计您想要的任何型号的旋转木马，从而为每张幻灯片组成。

建立通过Divi 5扩展自己的调色板

当您需要数十种品牌颜色变化时，您的颜色拾取器就会变得一团糟。 Divi 5通过将每个阴影连接到一种基本颜色来解决此问题。下面的步骤向您展示了如何构建可扩展且可维护的颜色系统。

1。设置您的主要颜色基础

打开视觉构建器，并在左侧栏中找到变量管理器图标。单击它以查看您网站的颜色基础。 Divi 5带有已经等待您的预设颜色变量：主要，次要，标题和身体颜色。

您无法删除这些预设变量，但是可以更改其值。这是完美的选择，因为这四种颜色处理大多数网站。单击主要颜色变量并输入品牌的主要颜色。这成为您网站上其他所有颜色变化的基础。

您的主要颜色变量应反映品牌颜色的最饱和版本。在创建较轻的背景或添加透明效果之前，将其视为纯，未稀释的版本。稍后建立变化时，这为您提供最大的范围。

次要颜色非常适合需要在主要品牌颜色中脱颖而出的重音，按钮或亮点。将标题颜色设置为在您的背景上读取良好的东西。身体颜色通常保持深灰色或黑色，以获得可读性。

这四个预设变量连接到Divi的整个系统。当您构建模块时，这些颜色将显示为快速选项。在此处更改您的主要变量更新的每个模块在此处更改为蓝色，并在您的网站上立即更新。

避免在早期创建过多的自定义变量。相反，以这四个预设开始。大多数网站可能只需要这些基本颜色，并通过Divi 5的相对颜色控件创建了变化。但是，当然，如果需要的话，可以添加尽可能多的变量。

2。使用HSL控件创建颜色阴影

现在，添加另一个颜色变量。这次，您将从主颜色建立阴影，而不是设置新的基本颜色。在颜色选择器中，从列表中选择您的主要颜色变量。

现在，您看到了三个滑块：色调，饱和度和轻巧。这些控制您的基本颜色如何变化。

色相从0度移动到360度。在制作相同颜色的阴影时，请不要独自留下。饱和度从0％到100％，并控制您的颜色看起来多么生动。在0％时，任何颜色变为灰色。以100％的速度，您会获得全强度。

轻度从0％到100％。此滑块会创建您的实际阴影。在0，您会得到颜色的纯形式。将其移动到50％以获得较浅的阴影。将其降低到-20％，以使阴影较深。

您可以将这些HSL颜色混合并匹配，以根据需要构建新的颜色和变化。

让我们创建两种主颜色的变体。添加一个变量，并将您的新阴影命名，例如“主灯”或“主要黑暗”。重复此过程以创建多种阴影。典型的设置将您的基本主要光在30％的光线下用于背景之类的，并以-15％的轻度为黑暗。

您也可以为次要颜色添加如此浅和深色的阴影。

3。建造嵌套的颜色变量

您在步骤2中制作了一级光线和初级深色。现在，您可以从这些阴影中构建更多颜色。

制作一个称为“卡背景阴影”的新变量。从列表中选择您的主要光。将不透明度降至50％。这给您带来了卡片背景的几乎没有色彩。接下来，创建“按钮悬停”。选择主要黑暗。降低亮度又使其变得更黑。现在，当人们悬停在纽扣上时，您的按钮可能会变成深色。

您也可以从阴影中构建自定义颜色。通过选择按钮悬停来制作“文本阴影”。将不透明度设置为15％。现在，您的文本阴影连接到悬停的按钮悬停，后者连接到主要黑暗，后者连接到主。

尝试使用原发光的“边框口音”。颠簸饱和至100％，以使其更加流行。这为您提供了与您的品牌相匹配的明亮边界。每个链都会更长。所有五种颜色都追溯到一个主要选择。

为您的次要颜色添加类似的阴影，以选择各种颜色。

4。将相对颜色应用于您的网站

您建立了颜色粉底并创建了所有这些阴影。现在是实际的部分：在您的网站上实施它们。

打开视觉构建器中的任何模块。单击背景，文本或边框的颜色选项。您保存的颜色变量出现在颜色选择器内。您不需要记住名称或十六进制代码。

选择主按钮的主要颜色。选择部分背景的主灯。使用主要的黑暗进行边界和CTA按钮等微妙的口音。每个选择都可以回到您的基本色系统。

您的颜色变量到处都是：标题，页脚，博客布局和产品页面。您的团队成员和客户可以在不猜测的情况下选择颜色。他们在选择器中看到“主灯”，而不是随机的十六进制代码。清晰的名字意味着更少的错误和更快的设计工作。每个人都知道哪种颜色有其目的。

这种基于变量的系统可防止视觉上的不一致。您不必节省数十个类似的蓝色，也不需要想知道要用于悬停效果的哪种阴影。您的变量为您提供了结构，同时保持设计灵活性。

5。在需要时更新颜色

您的客户决定他们想要午夜蓝色，而不是蓝色。借助传统的颜色管理，这意味着要筛选模块并手动更新每个阴影或一次更新一堆全球颜色的数小时。有了Divi 5的相对颜色，您可以更改一个变量，并且其他所有内容都随之而来。

您的主要光背景变为浅绿色。主要的黑暗边界转向深绿色。按钮悬停的颜色可以调整为深蓝色。您建立的所有嵌套关系保持完整。

您的卡背景阴影具有15％的原发光性。它变成了新的绿色主要光的15％不透明度，而无需触摸它。您的文本阴影连接到悬停的按钮，该按钮连接到主要黑暗，后者连接到主。

旧的方式意味着每次都从头开始重新创建色彩和谐。您可以在改变基础的同时保留关系，并且您的设计保持平衡。

您的颜色，规则

不一致的颜色使用破坏了良好的设计。您一直在保存毫无意义的名称，通过模块进行更新的随机阴影，并每次客户改变主意时从头开始重建调色板。

Divi 5的相对颜色结束了这场工作流的噩梦。从基本颜色构建一次，并自动观看网站上的每个变化更新。该系统处理浏览器的兼容性，保持关系并保持颜色拾取器的井井有条，因此您无需使用CSS。

您的下一个项目应该得到更好的颜色管理。下载Divi 5，看看有组织的设计的感觉。