颜色

    有效使用色彩对于任何设计项目的成功至关重要。想象一下黄色的可口可乐徽标或饱和的粉红色画的《蒙娜丽莎》，您可能会意识到颜色的选择对任何设计都产生了巨大的影响。这并不意味着颜色始终具有明确的符号目的。虽然很明显为什么停车标志会涂成红色（警惕，危险，如果您忽略此标志，将会流血）），因此大多数配色方案都很难直接解释。这就给我们留下了一种艺术形式，就像一般的图形设计一样，它既客观又主观。在白色背景上使用黄色文本从客观上来说是个坏主意，因为缺乏对比度会导致文本难以阅读。同样，当全世界约有 8％的人患有红绿色盲时，在数据可视化中不应使用红色和绿色作为原色。1 个。在使用颜色时了解这些规则很重要，因为它们使设计人员能够创建大多数用户可以访问的图形。但是，要掌握色彩组合的艺术，设计师还必须知道如何在不同的文化和背景下使用色彩，观察当前的艺术趋势，并在此基础上发展个人风格。因此，许多作者都在努力创造出好的方法来教设计师如何思考配色问题。

    一种流行的方法是创建以每个方案中颜色的色相之间的关系命名的配色方案的类别。这些类别中给出的名称，如互补（两种颜色具有相反色调），三元（三种颜色横跨色谱均匀隔开），并且tetradic（四种颜色在整个色谱上均匀分布）。作者还为颜色方案提供了一组更加混合的类别，这些类别不适用于任何以前的类别。这种方法流行的一种解释可能是，教师可以通过将形状放在色环上来可视化类别，而学生可以更改这些形状的尺寸以创建配色方案。许多关于图形设计的书中都描述了这种技术，您在设计评论中经常会遇到这些术语。

    具有三组均匀分布的色相的三重配色方案。

    一种四色配色方案，具有四个均匀间隔的色相。

    即使这种系统的方法似乎很适合本书，但我认为该方法存在很大问题。一个问题是，单个类别内的配色方案没有任何连贯的视觉效果。如果略微调整色相之间的间距，则三色和四色配色方案可能看起来非常相似，甚至相同。同样，纯三元组配色方案在 sRGB 色彩空间中的视觉效果与 CIELUV 中的相同配色方案有很大差异。最糟糕的是，这种方法往往会忽略饱和度和亮度尺寸，这些尺寸留给设计师自己解决。下面的三种配色方案都具有相同的色相值，但是通过更改其饱和度和亮度值会产生截然不同的视觉效果。

    这三种三色配色方案具有相同的色相值，并且绘制在色环上时看起来相同。“三合一” 一词无助于描述其独特的视觉效果。

    相反，本章将介绍围绕 HSL 颜色模型的三个维度建立的颜色理论。通过专注于颜色的色相，饱和度和亮度以及这些尺寸之间的相互作用，设计人员可以了解代码更改如何在视觉上反映出来，并根据这些知识组成有趣的颜色组合。在下文中，我们将使用HSLuv 库以相反的顺序浏览这些维度，以确保代码中的更改反映实际的颜色感知变化。

    颜色的明暗度决定了将多少黑色混合到该颜色中（请参见 “颜色模型” 和 “颜色空间”）。明暗对比是很重要的，即使我们可以通过操纵任何 HSL 尺寸在颜色之间建立对比，术语 “对比” 大多数情况下还是指亮度的变化。下面的示例演示了低对比度和高对比度配色方案的效果。第一个示例显得柔和而明亮，这是由于较高的亮度值以及每种颜色之间的亮度差异较小的结果。第二个示例显示为较粗体，并且由于相邻颜色的亮度差异较大，因此具有明显的正 / 负效果。

    Muriel Cooper 是一位极有影响力的图形设计师，在早期的数字设计和用户界面设计方面做了重要的工作。作为麻省理工学院媒体实验室的共同创始人和麻省理工学院出版社的设计总监，她监督了 500 多本书的制作，并且她以黑白设计而闻名。以下是她两个比较著名的设计，它们仅依赖于亮度尺寸。

    选择适当的对比度在处理文本时尤为重要，因为可读性取决于文本和背景之间的对比度。万维网联盟在其Web 内容可访问性指南中建议，正文文本的对比度应至少为4.5:1（或低于0.222分数），并且它们提供以下公式来计算两个明度值的对比度。

    1. const contrastRatio = (l1 + 0.05) / (l2 + 0.05);

    该公式要求以相对亮度提供两个亮度值，该亮度是指 CIEXYZ 颜色空间中的 Y 维度。因此，要计算 HSLuv 颜色的 W3C 对比度，我们首先需要将亮度值转换为 CIEXYZ 颜色空间，然后使用上面的公式来计算对比度。在下面的代码示例中对此进行了演示，其中该contrastRatio()函数可以基于两个 HSLuv 亮度值来计算此对比度。

    在可及性和美观性方面，亮度在任何配色方案中都起着重要作用。像本书以前的练习一样，建议有抱负的设计师仅练习黑白设计，以学习如何在设计中建立适当的对比。“设计看起来像是混乱的”是一个很好的问题，“它看起来像是黑白的”，因为它可以揭示出设计中形状之间缺乏对比。

    颜色的饱和度可以控制从灰度级到全色的颜色纯度（请参见 “颜色模型” 和 “色彩空间”）。您可以使用此尺寸创建从非常柔和到极亮的颜色组合。下面的两个示例使用相同的亮度和色度值，只是它们的饱和度值不同。

    在用户界面设计中，饱和度通常用于区分被动和主动界面组件。Apple 的 iOS 操作系统对常规的界面元素使用了不饱和的颜色方案，但是完全饱和的颜色用于诸如激活的切换按钮和应用程序通知之类的关键操作。这使用户可以快速解释界面的状态，并在发生新的应用程序事件时发出通知，例如旧配电板上的 LED 亮起。

    配色方案-编程设计系统 - 图1

    iOS 11 中的控制中心使用单色配色方案，但对活动按钮使用完全饱和的颜色。 ©。

    在处理色彩饱和度时可以考虑使用的一个很好的类比方法是，许多国家 / 地区在其城市中采用不同的方式粉刷房屋。这些油漆的饱和度可以有很大的不同，尽管这些颜色没有任何内在的含义，但它们确实说明了时间，地点和人。想象一下日本的一个小村庄，其色彩柔和，不饱和，然后将其与像墨西哥这样的地方进行比较，那里的房屋被漆成非常纯净，饱和的颜色。这些颜色反映了周围的文化，您应该以相同的方式考虑内容：它是否需要生动的颜色或柔和的现代主义方案？颜色的饱和度是实现此目的的关键。

    色调尺寸确定要显示的实际颜色，以颜色名称表示，例如红色，绿色和蓝色（请参阅颜色模型和颜色空间）。如上一章所述，没有任何相干理论可以使色调组合产生谐波结果。尽管许多人已经尝试过，但是不可能对这种事情做出广义的理论。2 个 但是，从色相组合在现实世界中的存在方式得出一些结论可能是有益的。

    在自然界中，我们经常看到色谱中红绿色部分的色相差异很小。在春季，树木和植物将采用几乎单色的明亮绿色配色方案，但是随着季节的临近，这些颜色将略微散布成多种绿色，黄色和红色。您经常会在设计产品中找到这种色调组合，以唤起宁静或和平的感觉，例如瑜伽馆，有机食品和结婚请柬。在外层空间的照片中可以找到不同类型的类似配色方案，其中光谱的蓝 / 绿部分中较亮的颜色几乎产生了异乎寻常的效果。这些颜色通常用于希望简化和故意制造的技术或软件产品中。苹果和微软的商店看起来就像飞船的内部并非巧合：它们旨在让顾客感觉就像他们进入了最先进的科学实验室，因为这使他们接受了更高的价格。这是两种配色方案，它们的颜色在光谱上彼此接近，但视觉效果却大不相同。

    当色调之间的距离增加时，会产生更深远的影响。但是，此声明可能具有欺骗性。尽管彼此靠近的颜色具有不错的相似效果，但是色环相对两侧的颜色不一定具有最明显的色相对比。不能通过简单的公式来计算两种色调的视觉效果，这取决于所选择的实际色调，它们在设计中的使用方式以及它们的饱和度和亮度值。尽管如此，还是要像设计过程中的其他任何关系一样考虑色相的间距：我的内容是否需要平坦，单色的颜色或调色板的变化？

    。

    我们不能不讨论色相维数，而不必提及导致许多人难以区分某些色相的各种色盲。最普遍的色盲是红绿色，这使得很难区分红色和绿色。如果绿色的视网膜锥严重受损，则某些人只能看到蓝色。色盲更常见的类型是蓝黄色，而蓝色，黄色和绿色是无法区分的。另外，在极少数情况下，有些人会具有完全的单色视力。全球多达 8％的男性和 0.5％的女性患有色盲3。这意味着一种配色方案，尤其是教学用途所需的一种配色方案，不应仅依赖于色调来创建色彩对比。应当始终考虑亮度，因为几乎没有视力障碍的人都有通过对比来区分颜色的能力。

    颜色的这三个维度可以激发颜色组合实验的生命。虽然某些配色方案仅由一维变化的颜色组成（例如某些单色设计），但大多数配色方案结合了色相，饱和度和亮度的变化以实现调色板。总部位于布鲁克林的巧克力生产商 Mast Brothers 以其色彩鲜艳的包装设计而闻名，该产品采用彩色图案表示巧克力的风味特征。这些模式为如何处理颜色的三个维度以创建不同的表达式提供了一个很好的案例研究。

    第一种模式是用烟熏豆制成的黑巧克力，设计师选择了具有高对比度的单色配色方案（波形形状）来表示烟在空中漂浮。请注意，这些颜色本身看起来似乎不是 “天然” 的，而是被选择用来传达产品的味道。第二种模式是用薄荷叶制成的黑巧克力，其色相和亮度从深绿色到亮黄色，在 50 年代保持恒定的饱和度，变化的颜色是渐变的。渐变提供了一种有趣的方式来可视化两种不同的口味，尽管它们的不同特性很好地融合在一起。最终的图案在较浅的背景上具有四色方案，其中使用具有较大色相对比度的饱和色来为类似油漆的形状上色。

    到目前为止，我们已经手动对颜色值进行了硬编码以创建配色方案。要真正利用我们正在使用代码生成这些设计这一事实，我们应该研究如何以程序方式生成这些颜色。也就是说，使用循环只需几行代码即可创建许多颜色。这意味着要查看color()功能以及如何通过循环动态创建颜色对象。

    color()P5.js 中的函数可用于创建可重复使用的颜色对象，该对象可在fill()和stroke()函数中一次又一次地使用。这意味着，与在整个代码中散布相同的颜色值不同，我们可以将单个颜色对象分配给代码顶部的变量，并在需要使用颜色时引用该变量。考虑以下代码，其中多次使用相同的红色。

    可以使用color()函数重写此示例，因此颜色值在代码中仅出现一次。

    1. const red = color(225, 35, 35);

    要将color()函数与HSLuv 值一起使用，我们需要创建一个小的函数，该函数在创建颜色对象之前执行从 HSLuv 到 RGB 的转换。除了使用该color()功能外，该功能与上一章中的fillHSluv()和strokeHsluv()功能相同。请记住，您必须包括 HSLuv JavaScript 文件才能使它起作用。

    1. function colorHsluv(h, s, l) {
    2.   const rgb = hsluv.hsluvToRgb([h, s, l]);
    3.   return color(rgb[0] * 255, rgb[1] * 255, rgb[2] * 255);
    4. }
    5. const red = colorHsluv(225, 35, 35);
    6. fill(red);

    现在，如果我们想在设计中使用多种颜色怎么办？只需在上面的代码中添加更多变量即可。尽管这对于仅几种颜色来说是完全可以的，但对于大量颜色而言却没有任何意义。在这种情况下，使用允许在不引入新变量的情况下添加和删除颜色的数组更为明智。下面的代码将三种颜色存储在一个数组中，并使用它们绘制配色方案。

    最后，我们可以使用循环来动态创建颜色对象。为此，我们使用一个空数组，并在每次循环迭代时将一个新的颜色对象推入该数组。本示例使用该random()函数来确保循环的每次运行之间的颜色都不同。

    1.   colors.push(
    2.     colorHsluv(
    3.       random(360),
    4.       random(100),
    5.       random(100)
    6.     )
    7.   )

    有了所有这些概念之后，我们就可以按照程序生成颜色方案了。一种策略（可能也是最简单的方法）是坚持使用random()，并通过更改传递给random()函数的值来创建不同类型的配色方案。

    但是，该random()函数很有可能会选择彼此接近的数字，从而产生非常相似的颜色。一种更强大的策略是使用循环的递增i变量来计算传递给color()函数的值。该技术是相同的东西是在展示程序形状章，但这次我们使用它的颜色值，而不是x和y位置。下面使用的示例i创建具有的亮度值的单色配色方案20，50和80，同时保持色调和饱和度恒定。

    下面，在所有维度上都使用相同的技术。注意，饱和度和明度值递减时，色相值是如何递增的。最终结果是一种配色方案，其中背景为浅色和饱和度，但前部颜色较暗且饱和度较低。

    通过添加一些变量来存储初始颜色值以及它们在循环的每次迭代之间应该改变多少，该代码将变得更加令人兴奋。无需对这些变量进行硬编码，而是可以在random()每次代码运行时使用该函数选择不同的值。下面是同一代码运行三次，以根据同一算法产生三种不同的配色方案。通过更改传递给random()函数的值，此代码可以产生大量不同的输出。

    我们在结束本章之前就不会讨论用于过程颜色生成的另一种有用技术 -lerp()函数 - 该函数可用于计算从一种颜色到另一种颜色的过渡。lerp（）函数与颜色无关，因为它可用于计算两个数字之间的任何数字。除了两个范围数字外，该函数还需要一个用于计算结果数字的内插量。的插值量0将返回第一个数字，0.5将返回两个数字之间的中间数字，1并将返回第二个数字。

    1. lerp(0, 100, 0.2) 
    2. lerp(0, 50, 0.5) 
    3. lerp(0, 360, 0.8)

    由于数字颜色由三个数值组成，因此我们可以使用此函数三次来计算两种颜色之间的任何颜色。重要的是要注意，P5.js 具有colorLerp()仅在一行代码中执行此计算的功能。但是，它仅适用于内置颜色模式，不适用于 HSLuv 库。下面的示例查找介于深色饱和绿色和较淡的不饱和蓝色之间的颜色。

    当与循环结合使用时，该技术甚至更强大。在循环中，可以通过将插值除i以其最大可能值来计算插值量。由于此计算是使用递增i值一遍又一遍地执行的，因此它将在之间产生插值量，0并且1步数等于循环运行的次数。当绘制从一种颜色变为另一种颜色的渐变时，此方法非常有用，例如下面的示例，其中重新创建了 Google 的Material Design文档中的色样。

    配色方案-编程设计系统 - 图2

    Material Design 的色板 ©使用该lerp()函数在一个循环中重新创建。

    本章介绍了一些技术，可帮助设计人员通过 HSL 颜色模型的色相，饱和度和亮度维度探索色谱。使用这些技术，设计人员可以远离拾色器已知的 2D 颜色实体，并通过关注 3D 空间中颜色之间的关系来实现颜色组合。无论这些技术是用于快速测试不同的色彩组合，还是直接内置于数字设计产品中，对于希望将设计视为系统艺术的设计师而言，它们都是另一重要工具。
    https://programmingdesignsystems.com/color/color-schemes/index.html#color-schemes-dV9Rf6L