V6：颜色(2018)

在我的设计师工作中，色彩从来都不是我的强项。我经常试图避免完全处理它(就像在我的站点的前一个版本中看到的那样)。通过教育和经验，我学到了色彩理论的基础知识，基本上避免了灾难，但我的初级过程一点也不可靠。

我的V6重新设计似乎是一个很好的机会来改进我的配色游戏，因为我的网站是为了代表我，而且我喜欢认为我有多姿多彩的个性。为了真正让练习变得有价值，而不是创建一种配色方案，我想创建一个可以应用任意数量的配色方案的系统。这将给我一个不断尝试色彩的空间，理想情况下，它将容纳一系列的复杂性，让我有空间随着技能的提高而成长。

我的色彩处理的第一步是不变的：先用二进制黑白固化布局，然后再用灰度分层，形成更细微的对比度。

一旦我在一个好的位置有了对比度，我就可以推断出要在其上映射颜色的调色板。我的灰度对比度工作产生了以下六个值：

文本反转(白色)：调色板中最浅的颜色。目前，它一直是白色的，它的中立性使得它可以用来框住图像，将它们的颜色与我的颜色隔离开来。

背景(6%灰色)：调色板中第二亮的颜色。它足够暗，白色可以很容易地与它区分开来，但也足够亮，以至于它本身看起来几乎是白色的。

背景Alt(24%灰色)：比背景略暗。主要用于边框和其他非文本界面元素。

重点1(54%灰色)：与文本和背景形成明显对比的明亮色调。主要用于元数据。

重音2(30%灰色)：通常是调色板中最明显和最饱和的颜色，对于内联链接和其他需要真正弹出的部分使用得很少。

有两种方法可以开始为项目开发调色板：查找现有调色板或从头开始创建调色板。找到一个现有的只需睁大你的眼睛就可以了。我倾向于在绘画、雕塑、插图、摄影和其他视觉艺术中找到最多的灵感。庞然大物是我最可靠的资源之一。

在从头开始创建调色板时，我长期以来一直依赖历史上的RYB色轮，它假定红色、黄色和蓝色是所有其他基本颜色的原色。现代色彩理论更加复杂，我们很快就会讲到，但是RYB色轮在我很小的时候就已经进入我的大脑了，我仍然觉得它很有用。以下是在组合调色板时值得考虑的一些色轮概念：

次要颜色是任意两种原色的均匀组合：黄色加上红色等于橙色，红色加上蓝色等于紫色，蓝色加上黄色等于绿色。

第三种颜色是原色和相邻次色的均匀组合：黄橙色、橙红色、红紫罗兰色、紫罗兰色、蓝绿色、绿黄色。

理论上，最纯净的颜色对在轮子上是均匀分布的，例如互补色(轮子上彼此相对)和三色(一组三种颜色组成一个等边三角形)。

此外，由于基色在化妆中的比例，颜色与同类中的其他颜色搭配得很好：基色与基色(0：1)，次色与次要色(1：1)，三色与三色(2：1)。

找到调色板的基础是很容易的，但让基本调色板与设计一起工作很少仅仅是转移的问题，这也是我经常遇到麻烦的地方。对我来说，色彩最大的两个绊脚石一直是实施和调整。“我喜欢这个黄色，但它不适合做背景色。我怎么才能把它修好呢？“。使用滑块、拾色器和手工编码的十六进制值来数字调整颜色让我不知所措。我找不到疯狂的方法。而且，在更大的设计系统中实现和调整它们(无论是在模型中还是在代码中)往往是一项繁重的任务。

谢天谢地，有技术可以解决这些问题，我对颜色的新态度是由两种对我来说相对较新的技术使其成为可能的：HSL和Sass。对于颜色调整，HSL为过程带来了其他颜色系统所缺乏的粒度控制级别。对于实现，Sass允许我将颜色值赋给变量，这使得系统范围内的迭代变得快速而轻松。

我们之前介绍的RYB色轮是用来混合油漆、墨水、染料等的。它是一种减色模型，这意味着它的颜色是通过从光中减去波长而变得可见的。现代色彩理论发现，在减法模型中，颜色的光谱更广，基色略有不同：青色、洋红和黄色。这些是CMYK(K代表黑色)的基础，这是您看到的大多数全色打印材料背后的过程。与之相反的是相加颜色模型RGB，其基色为红色、绿色和蓝色。这是投射在光中的颜色的基础，就像我们在电视、电脑和移动设备的屏幕上看到的那样。

HSL是RGB颜色模型的表示形式。它是在1938年发明的，当时人们期待着彩色电视的出现，但直到2011年，它才进入CSS-在那里它最终对我最有用。HSL代表色调、饱和度、亮度，这些都是颜色的基本属性，直到最近我才真正理解。(类似的系统HSB在大多数设计软件中已经存在很长时间了，但遗憾的是，我从来没有考虑过它是如何工作的，或者它可能会提供什么。)。下面简要介绍一下HSL的具体细节：

色调定义基本颜色。“浅绿”、“深绿”、“亮绿”、“暗绿”都是绿色的变体，对吧？所以在所有这些颜色中，绿色是色调。在HSL中，色调是由0到360之间的数字定义的，因此将色调光谱想象为径向是很有用的。HSL使用如上所示的RGB色轮。

饱和度定义颜色的鲜艳程度。零%为灰色，100%为完全饱和。

亮度定义颜色中有多少黑色(阴影)或白色(色调)。50%没有阴影或色调，0%是全黑的，100%是全白的。

下面是CSS中的HSL语法(这是绿松石，具有175度的色调、100%的饱和度和25%的亮度)：

我发现HSL极大地解放了我。历史上的色轮概念直接映射到360度色调系统，HSL的三个基本属性让我能够以前所未有的方式在代码中直接创建和微调颜色。让我们来看看我是如何与Sass一起使用它的。

实现的第一步是将Sass变量从我先前确定的站点的6个灰度值中提取出来。我将只使用Sass内置的darken()函数，而不是进行计算这些特定灰度如何用十六进制或RGB表示的脑力体操：

$Text-COLOR：深色(白色，70%)；//70%灰色$Text-COLOR-反转：白色；//0%灰色$BG-COLOR：深色(白色，6%)；//6%灰色$BG-COLOR-ALT：深色(白色，24%)；//24%灰色$ACCENT-COLOR 1：深色(白色，54%)；//54%灰色$ACCENT-COLOR 2：深色(白色，30%)；//30%灰色。

如果我每次在Css…中指定颜色时都使用这六个变量中的一个。

…。只需调整这六个变量，我就可以轻松地更改整个站点的配色方案！

让我们用在野外发现的调色板来检验一下。为了轻松处理，我选择了一个调色板，它看起来可以适应我的系统，而不需要太多的调整。

我将使用Photoshop或Illustrator中的吸管工具捕捉主色。不过，这些应用程序本身并不支持HSL，因此我将使用Convert a Color将颜色的十六进制值转换为HSL，然后将它们插入到我的变量中：

$text-color：hsl(321，14%，44%)；//浅紫色$text-color反转：白色；//白色$bg-color：hsl(45，50%，89%)；//浅棕色$bg-color-alt：hsl(31，24%，63%)；//浅棕色$accent-color 1：$bg-color-alt；//浅棕色$accent-color 2：hsl(348，68%，58%)；//淡红色。

这是一个相当好的开始！马上，我就知道$BG-COLOR和$BG-COLOR-ALT需要更轻一些。此外，$accent-color-1需要更暗，因为它基于另一个变量，所以我可以通过再次使用darken()函数来实现这一点。(请注意，darken()所做的全部工作就是将HSL的亮度属性向零移动指定量。)。不需要太多的调整就能把东西放到我想要的地方：

$Text-COLOR：HSL(321，14%，44%)；$Text-COLOR-INVERSE：白色；$BG-COLOR：HSL(45，50%，94%)；//+05%亮度$BG-COLOR-ALT：HSL(31，24%，88%)；//+25%亮度$ACCENT-COLOR 1：深色($BG-COLOR-ALT，25%)；$ACCENT-COLOR 2：HSL(348，78%，68%)；//+10%饱和度，+10%亮度。

语言无法表达能够如此直观地在代码中进行这种颜色调整是多么令人兴奋。但是等等，事情变得更好了。让我们试试更具冒险精神的东西吧。

如果你读过本系列上一篇关于排版和比例的文章，你就会知道我喜欢设计决策有一个合理的基础，我喜欢系统的组件以特定的方式相互联系。正如我的排版刻度是建立在数字间隔上一样，我们前面看到的色轮原理也是如此。就像我的字体大小都是相对于一个基值一样，我的颜色也可以是这样的。

因此，我将使用三色系从头开始构建一个调色板，这是色轮上的三个等距离色调。在HSL中，这意味着三种颜色的色调属性将彼此相距120度。由于这是一个可预测的间隔，我将选择一个基本色调，并让Sass计算出其他两个色调应该是什么。还记得darken()如何调整颜色的亮度吗？Adjust-hue()对色调执行相同的操作。我已经决定将$accent-Color2作为我的基色，因此它将移到变量列表的顶部。我将为其赋予橙红色调(19度)，并使用adjust-hue()为其他变量指定适当的颜色距离：

$accent-color 2：hsl(19,100%，50%)；$text-color：调整色调($accent-color 2，-120deg)；$text-color反转：白色；$bg-color：调整色调($accent-color 2,120度)；$bg-color-alt：深色($bg-color，15%)；$accent-color 1：$bg-color-alt；

这个调色板显然需要比前一个调色板做更多的工作，但是我有一些很好的工具可供我使用。Darken()和adjust-hue()对于调整单个颜色属性非常有用，但如果我想一次调整多个属性，则可以使用adjust-color()：

$accent-color 2：hsl(19，95%，60%)；$text-color：adjust-color($accent-color 2，$hue：-120deg，$饱和度：-82，$lightness：-18)；$text-color反转：白色；$bg-color：adjut-color($accent-color 2，$饱和度：-84，$亮度：35)；$bg-color-alt：深色($bg-color，$饱和度：12，$亮度：-35)；$accent-color：调整颜色($bg-color，$饱和度：12，$亮度：-35)；

由于这个调色板中的所有颜色都设置为相对于$accent-Color2，我现在可以通过调整那个变量来改变整个配色方案。下面是几种变化，每种变化都将先前的色调旋转90度。最后的演示使用主页，这使得示例之间的颜色差异更加明显。

所有这些都需要单独的调整(如果它们可以工作的话)，但希望这能表明，相当简单的HSL和SASS组合在颜色实验和迭代中可以有很大的帮助。

现在我已经有了一个很好的颜色实验系统，我不想将我的站点限制为只有一种配色方案。所以我把一个名为“color-override.scss”的文件放在一起，它复制了我的主SCSS文件中指定颜色的每个规则-记住，所有这些规则都使用调色板的Sass变量。然后，当我想要为站点创建新的配色方案时，我使用以下模板：

然后，导出的CSS文件(覆盖主CSS文件颜色的新鲜配色方案)被添加到我的文档头中此内联脚本的ColorSchemes数组中：

<；script>；//加载随机配色方案var ColorSchemes=Array('；Colors1.css'；，'；Colors2.css'；，'；Colors3.css'；)；var ColorScheme=ColorSchemes[Math.Floor(Math.Random()*ColorSchemes.Length)]；Document.Write('；<；link rel="；style heet&34；href="；http://v6.robweychert.com/assets/css/'；+ColorScheme+'；&34；>；'；)；<；/script>；

启用JavaScript的用户现在每次加载或刷新页面时都会得到一个随机配色方案！

还有很多东西需要学习。我还有很长的路要走，然后我会觉得我真的知道我在做什么颜色，但作为一个几十年来一直在与之斗争的人来说，这篇文章中描述的方法感觉像是一次巨大的飞跃。不管这对你来说是不是一次飞跃，我希望你能从中找到一些有价值的东西。

这是关于我的网站2017年重新设计的系列文章中的最后一篇。如果你还没有，看看本系列的其他帖子，这些帖子讨论了设计的档案哲学以及排版和布局的方法。