一个便捷的 Sass 工具，用于创建平衡的调色板

对于那些可能没有设计背景的人来说，选择调色板通常基于个人喜好。选择颜色可以通过在线颜色工具、从图像中取样、“借用”喜欢的品牌，或者只是从色轮中随机选择，直到调色板“感觉合适”。

我们的目标是通过使用 Sass 颜色函数探索关键的颜色属性来更好地理解是什么让调色板“感觉合适”。最终，您将更加熟悉

绘制调色板的亮度、明度和饱和度图以帮助构建平衡调色板的价值
将可访问性对比度检查构建到您的工具中的重要性
高级 Sass 函数以扩展您自己的探索，包括您可以操作和复制的 CodePen

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

颜色图形化有什么用

您可能熟悉在样式表中声明颜色的一些方法，例如 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% 的饱和度会导致最纯的颜色（没有灰色存在）。

$color: rebeccapurple;

@debug lightness($color);
// 40%

@debug saturation($color);
// 50%;

但是，亮度可以说是最有用的颜色属性。在我们工具中表示的亮度是使用 WCAG 公式计算的，该公式假设 sRGB 颜色空间。亮度用于对比度计算，并且作为一个更广泛的概念，它也旨在更接近量化人类对相对亮度的感知，以评估颜色关系。这意味着调色板中更紧密的亮度值范围可能被人类眼睛感知为更平衡。但机器是易错的，在您操作调色板值时，您可能会遇到此规则的一些例外情况。有关亮度的更多详细信息，以及旨在更准确地表示人类对颜色均匀性感知的独特颜色空间 CIELAB，请参阅本文末尾的链接。

此外，颜色对比度对于可访问性至关重要，尤其是在易读性和区分 UI 元素方面，这可以通过编程方式计算。重要的是，这意味着工具可以测试通过的值。这也意味着算法可以例如在传递背景颜色时返回适当的文本颜色。因此，我们的工具将结合对比度检查作为衡量如何调整调色板的另一种方法。

此项目中演示的功能可以提取出来，以帮助规划对比度安全的 desain sistem调色板，或烘焙到允许定义自定义主题的 Sass 框架中。

Sass 作为调色板构建工具

Sass 提供了一些传统的编程功能，使其非常适合我们的需求，例如创建和迭代数组以及使用自定义函数操作值。当与 CodePen 这样的具有实时处理功能的在线 IDE 结合使用时，我们基本上可以创建一个 Web 应用程序来解决特定问题，例如构建调色板。

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

查看 Pen
Sass 调色板图形化工具由 Stephanie Eckles (@5t3ph)
在 CodePen 上。

Sass 调色板构建器的功能

它输出一个纵横比控制的响应式图形，用于准确的绘图点放置和值比较。
它利用 Sass 颜色函数和数学计算的结果在 0-100% 的范围内正确绘制点。
它生成渐变以提供更传统的“色板”视图。
它使用内置的 Sass 函数提取饱和度和明度值。
它创建亮度和对比度函数（除了链接到所需的预计算线性颜色通道值之外，还从 Material Web Components 中复制）。
它为给定的背景返回适当的文本颜色，并使用设置变量来更改使用的比率。
它提供函数在给定调色板中统一缩放饱和度和明度。

使用调色板构建器

首先，您可能希望在提供的示例调色板之间切换，以了解不同类型颜色范围的值如何变化。只需复制调色板变量名称，并将其替换为 $default 作为 $palette 变量的值，该变量可以在注释 SWAP THE PALETTE VARIABLE 下找到。

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

然后尝试调整 $palette-scale-lightness 或 $palette-scale-saturation 值。这些值馈送到 palette 函数，并在整个调色板中统一缩放这些测量值（直至各个颜色的限制）。

最后，尝试添加您自己的调色板，或在示例中替换一些颜色。该工具是探索 Sass 颜色函数以调整颜色的特定属性（其中一些在 $default 调色板中进行了演示）的好方法。

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

图形化工具默认为显示亮度，因为正如我们之前讨论的那样，它是平衡调色板最可靠的指标。根据您的需要，饱和度和明度本身可能是有用的指标，但大多数情况下，它们是信号，可以帮助指出需要进行哪些调整才能使调色板的亮度更一致。一个例外可能是基于您已建立的调色板中的每个值创建明度刻度。您可以切换到 $stripeBlue 示例来实现这一点。

$default 调色板实际上需要调整才能更接近平衡的亮度

显示良好平衡亮度的调色板是 Stripe 的示例（$stripe）

这就是工具促使思维转变的地方。它不是操纵色轮，而是利用 Sass 函数以编程方式调整颜色属性。

检查饱和度图以查看您是否有空间来调整颜色的强度。我推荐的调整是将您的颜色值包装在 scale-color 函数中并传递一个调整后的 $saturation 值，例如示例：scale-color(#41b880, $saturation: 60%)。scale-color 的优点是它根据给定的百分比流畅地调整值。

明度可以通过将值分配给相对于与白色或黑色混合测量的亮度来帮助解释为什么两种颜色感觉不同。在 $default 调色板中，change-color 函数用于 purple 以使其相对 $lightness 值与用于 red 的值的计算 lightness() 对齐。

scale-color 函数还允许捆绑调整后的 $saturation 和 $lightness 值，这通常是最有用的。请注意，提供的百分比可以为负数。

通过使用 Sass 函数并检查饱和度和明度图，$defaultBalancedLuminance 实现了平衡的亮度。此调色板还使用 map-get 函数从 $default 调色板中复制值并应用进一步的调整，而不是覆盖它们，这对于测试多种变体（例如，调色板上的色调变化）非常方便。

花点时间探索其他可用的颜色函数。

http://jackiebalzer.com/color 提供了一个优秀的 Web 应用程序，用于查看 Sass 和 Compass 颜色函数的效果。

在考虑调色板颜色如何在 UI 中实际使用时，对比度就发挥作用了。该工具默认使用最适合所有文本的 AA 对比度：4.5。如果您正在构建一个浅色 UI，那么请考虑在调整亮度时，用于文本的任何颜色都应与白色达到适当的对比度，这由数据点中心的颜色表示。

提示：该图表设置了透明背景，因此，如果您正在开发更暗的 UI，可以在 body 上添加 background 规则。

进一步阅读

颜色是一个广泛的话题，本文仅涉及与 Sass 函数相关的方面。但要真正理解如何创建和谐的色彩系统，我建议参考以下资源

色彩空间 – 一篇非常棒的深度文章，包含了各种色彩空间及其计算方式的交互式模型。
理解颜色和亮度 – 来自 MDN 的一篇针对初学者的关于颜色和亮度及其与可访问性关系的概述。
感知均匀色彩空间 – 关于感知均匀色彩系统的更多信息，介绍了 HSLuv 工具，该工具将值从更常见的 HSL 色彩空间转换为亮度调整的 CIELUV 色彩空间。
可访问的色彩系统 – Stripe 关于其通过创建自定义工具构建可访问色彩系统的经验案例研究（激发了本次探索和文章的创作）。
网络颜色的极客指南 – 这篇精彩的文章探讨了网络上颜色的机制，可在 CSS-Tricks 上获取。
Tanaguru 对比度查找器 – 如果您难以调整颜色以达到可访问的对比度，这是一个非常有用的工具。
ColorBox – Lyft 的一个 Web 应用，通过图表进一步探索颜色比例。
设计系统化颜色 – 描述了 Mineral UI 为创建颜色渐变以通过亮度调整的调色板支持一致的主题而做出的杰出努力。
我们在 Tableau 10 中如何设计新的颜色调色板 – Tableau 公开了其自定义工具的功能，这些功能帮助他们基于 CIELAB 创建了一个更新的调色板，包括对该色彩空间的易于理解的概述。