一个方便的武力工具，用于制作平衡调色板

对于那些可能不是来自设计背景的人，选择调色板通常是基于个人喜好。选择颜色可以通过在线彩色工具，从图像中取样，从最喜欢的品牌中借来的“借用”，或者只是从色轮随机挑选，直到调色板“ Just See Fight感到正确”。

我们的目标是通过探索具有SASS颜色功能的关键颜色属性来更好地了解使调色板“感觉正确”的原因。最后，您将变得更加熟悉：

• 绘制调色板的亮度，轻巧和饱和度以帮助建立平衡调色板的价值
• 构建可访问对比度检查到工具中的重要性
• 高级SASS功能以扩展您自己的探索，包括可以操纵和分叉的代码epen

但是，您最终发现的是网络上的颜色是一场硬件与人类感知之战。

是什么使颜色图有用

您可能熟悉样式表中声明颜色的方式，例如RGB和RGBA值，HSL和HSLA值以及十六进制代码。

 RBG（102,51,153）
RBGA（102,51,153，0.6）
HSL（270，50％，40％）
HSLA（270、50％，40％，0.6）
＃663399

这些值给出了有关如何呈现颜色的设备说明。颜色的更深层属性可以通过编程性地暴露并利用以了解颜色与更广泛的调色板的关系。

图形颜色属性的价值在于，我们可以更完整地了解颜色之间的关系。这揭示了为什么颜色的集合可能会或可能不会在一起。绘制多种颜色属性有助于暗示可以进行哪些调整以创建更和谐的调色板。我们将研究如何确定以后部分的更改的示例。

我们可以使用内置的Sass颜色功能很容易获得两个有用的测量值是轻度和饱和。

• 轻度是指白色或黑色与颜色的混合物。
• 饱和度是指颜色的强度，100％饱和度导致最纯净的颜色（不存在灰色）。

 $颜色：rebeccapurple;

@debug Lightness（$ color）;
// 40％

@debug饱和（$ color）;
// 50％;

但是，亮度可以说是最有用的颜色属性。如我们工具中所示，亮度是使用假定SRGB颜色空间的WCAG公式计算得出的。亮度用于对比计算，作为一个更宏伟的概念，还旨在越来越近地量化人类对相对亮度的看法以评估颜色关系。这意味着调色板之间的亮度值范围更紧密，可能会被认为是对人眼的平衡。但是机器是容易造成的，并且在操纵调色板值时可能会遇到此规则的例外。有关亮度的更广泛的信息，以及一个名为Cielab的独特色彩空间，旨在更准确地代表人类对颜色均匀性的看法，请参见本文末尾的链接。

此外，颜色对比对于可访问性非常重要，尤其是在可读性和区分UI元素方面，可以通过程序进行计算。这很重要，这意味着工具可以测试通过值。这也意味着算法可以在背景颜色中传递时返回适当的文本颜色。因此，我们的工具将包含对比度检查，作为评估如何调整调色板的另一种方法。

可以提取该项目中所示的功能，以帮助计划对比度安全设计系统调色板，或者在允许定义自定义主题的SASS框架中烘烤。

Sass作为调色板建筑工具

Sass提供了几种传统的编程功能，使其非常适合我们的需求，例如通过阵列创建和迭代，并通过自定义功能来操纵值。当与具有实时处理的Codepen这样的在线IDE加上时，我们可以从本质上创建一个Web应用程序来解决特定的问题，例如构建调色板。

这是我们将要使用的工具的预览：

Sass Paletter Builder的功能

• 它输出纵横比控制的响应图，以进行准确的绘图点位置和值比较。
• 它利用SASS颜色函数和数学计算的结果以0–100％的比例正确绘制点。
• 它产生了一个提供更传统的“色板”视图的梯度。
• 它使用内置的SASS功能来提取饱和度和亮度值。
• 它创建亮度和对比功能（除了在所需的预定的线性颜色通道值中链接外，还从材料Web组件分叉）。
• 它为给定背景返回适当的文本颜色，设置变量可更改所使用的比率。
• 它提供了在给定调色板上均匀缩放饱和度和轻度的功能。

使用调色板构建器

首先，您可能希望从提供的示例调色板中交换，以感觉到图形值如何改变不同类型的颜色范围。只需复制一个调色板变量名称，然后将其交换为$默认值，为$调色板变量的值，可以在评论交换调色板变量下找到。

接下来，尝试在预定义比率之间切换$对比度的变量值，尤其是如果您不熟悉确保对比度通过WCAG指南时。

然后尝试调整$调色板尺度的光度或$调色板规模的饱和值。这些馈送到调色板功能中，并均匀地扩展这些测量在整个调色板上（直至单个颜色的极限）。

最后，要添加自己的调色板，或在示例中交换一些颜色。该工具是探索SASS颜色功能以调整颜色的特定属性的好方法，其中一些在$默认调色板中进行了证明。

解释图形并创建平衡，可访问的调色板

正如我们之前讨论的那样，由于它是平衡调色板的最可靠指标，因此显示亮度的图形工具默认值。根据您的需求，饱和度和轻度可以单独是有用的指标，但是大多数是信号器，可以帮助指出需要调整的内容以使调色板的亮度更加对齐。一个例外可能是根据您已建立的调色板中的每个值创建轻度量表。您可以将其交换为$ StripeBlue示例。

$默认调色板实际上需要调整以使其接近均衡亮度：

一种表现出均衡亮度的调色板是条纹（$ stripe）的样本：

这是该工具邀请思想转移的地方。它没有操纵色轮，而是利用SASS功能来编程调整颜色属性。

检查饱和图，以查看您是否有颜色强度播放的空间。我建议的调整是通过比例色功能将您的颜色值包裹起来，并传递调整后的$饱和值，例如：比例色（＃41B880，$饱和：60％）。比例色的优点在于，它基于给定百分比会流体调整值。

轻度可以帮助解释为什么两种颜色通过为它们的亮度分配一个值，而不是将它们与白色或黑色混合在一起，从而有所不同。在$默认调色板中，使用更改颜色函数用于紫色将其相对$ lightness值与红色使用值的计算轻度（）对齐。

比例颜色功能还允许捆绑调整后的$饱和度和$ Lightness值，这通常是最有用的。请注意，提供的percents可能为负。

通过利用SASS功能并检查饱和度和轻度图，$ defaultbalencenceLuminance可以达到平衡的亮度。该调色板还使用MAP-GET函数从$默认调色板复制值，并应用进一步的调整而不是覆盖它们，这很方便测试多种变化，例如可能在调色板上进行色相移动。

花一分钟来探索其他可用的颜色功能。

当考虑如何在UI中使用调色板颜色时，对比就会发挥作用。该工具默认为AA对比度最适合所有文本：4.5。如果您要为轻型UI构建，则考虑到文本上使用的任何颜色都应在适应亮度时与白色进行适当的对比度，这是由情节点的中心颜色指示的。

提示：该图设置为具有透明背景，因此，如果您要为深色UI开发，则可以在身体上添加背景规则。

进一步阅读

颜色是一个广泛的主题，本文只能达到与SASS功能相关的方面。但是，为了真正了解如何创建和谐的色彩系统，我建议使用以下资源：

• 颜色空间 - 是一种超级令人印象深刻的深度，具有各种颜色空间的交互模型以及如何计算它们。
• 了解颜色和亮度 - 从MDN概述的颜色和亮度及其与可访问性的关系。
• 永久均匀的颜色空间 - 有关感知均匀颜色系统的更多信息，并带有一个介绍的工具HSLUV，该工具将值从更熟悉的HSL色彩空间转换为亮度调节的Cieluv Color Space。
• 可访问的颜色系统 - 从Stripe中进行的案例研究，讲述他们的经验通过创建自定义工具来构建可访问的颜色系统（这启发了此探索和文章）。
• 网络上的书呆子指南 - 这是对网络上有色机制的绝妙探索，可在CSS-Tricks上提供。
• Tanaguru对比Finder - 如果您正在努力调整颜色以实现可访问的对比度，则可以帮助您提供帮助。
• Colorbox - Lyft的Web应用程序，通过图形进一步探讨了颜色尺度。
• 设计系统的颜色 - 描述了矿物UI的杰出努力，以创建颜色坡道，以通过亮度调色板来支持一致的主题。
• 我们如何在Tableau 10 - Tableau裸露的定制工具的Tableau Pableaut功能中设计新的调色板，该功能帮助他们创建了基于Cielab的刷新调色板，包括对该颜色空间的平易近人概述。

以上是一个方便的武力工具，用于制作平衡调色板的详细内容。更多信息请关注PHP中文网其他相关文章！