色彩对于品牌视觉形象来说至关重要，对设计师来说掌控色彩也非常关键。在设计团队中构建色彩系统，建立属于产品的调色板，是每个团队必须做的一件事。现有的方法大都是按照公式计算，得到逻辑上严谨的色板，但却忽略了人眼才是色彩最终面向的对象，具备视觉感知均匀性的色彩，才是更好的选择。作者通过文章一步步地教给我们如何利用 HSLuv 来创建一个感知均匀地色彩系统，一起来学习一下吧！
众所周知，颜色是比较难以把握的。我们通过肉眼观察屏幕并使用数字设备，但在屏幕上的颜色体验常常很难把控。我们一直在使用工具作为辅助，但效果并不是很好，而且我们经常碰到一些未知的问题。例如，颜色的数值一样，但看起来却不一样，这会非常令人苦恼。因此，如果我们的色彩系统崩溃了，还能创造出色的体验吗？HSLuv，你好！
HSLuv 颜色模型是在我的认知中最好的解决方案。但是，要了解其全部潜力并不容易。尽管我们可以找到无数有关色彩理论、色轮和色彩搭配的文章资源，但与 HSLuv 相关的知识却很少（尤其是在设计方面的应用）。1. 简要了解颜色模型
首先，我们必须深入研究常用的颜色模型以及如何使用它们。尽管我们不需要精通色彩理论，但了解最常用的色彩模型及其在工作流中扮演的角色将有助于我们理解 HSLuv 为何会从其他颜色模型中脱颖而出。理想情况下，色彩工具应该是直观的、简单的，它可以提高我们的工作效率，并可以任意调整，使我们能够直观地了解改变数值与显示颜色之间的联系。1）RGB 和 HSL
RGB 模型有一个最大缺点：RGB 不仅不能反映真实的色彩空间，而且使用起来也不直观 —— 基于红、绿、蓝三个坐标混合来创建的颜色，并不能清楚地展示我们在做什么。你可能熟悉 HSL 颜色模型，该模型将色彩值转化为更易于理解的 色相、饱和度 和 亮度，解决了 RGB 缺乏直观性的问题。它 在一个简单易用的 360 度色轮上显示颜色（如果算上亮度这一维度，严格上来说是个圆柱体）。但是 HSL 只是简化了使用该颜色模型的过程，仍然忽略了颜色外观的整体复杂性，HSL 颜色模型的结果是否准确是存疑的。2）CIELUV 和 HSLuv
对我们来说幸运的是，在 1976 年，我们有了 CIELUV 色彩模型，它通过与人眼感知颜色的方式相匹配的 亮度成分 来设置颜色，解决了这个问题。除了亮度成分，U 和 V 代表颜色的色度坐标。但是由于输入值的原因，CIELUV 使用起来不是很直观。好消息是，Alexei Boronine 于 2012 年创建了 HSLuv 模型，该模型结合了两个方面的优点来解决了这些问题 —— 它 使用 CIELUV 的亮度成分，并将其与色相和饱和度配对，使其成为易使用、易理解的色彩工具。2. 真实颜色测试
在下面的图片中，我们可以看到第一列中 HSLuv 颜色的 感知均匀性[1]与第二列中 HSL 颜色的感知均匀性存在明显差异。（[1]感知均匀性：在感知均匀的色彩空间中相同的视觉间隔应该能够用相同的颜色差来表示，即更接近人眼的视觉效果。）HSL 的颜色在与 HSLuv 有相同的亮度值时，不仅在感知均匀方面有如此大的差异，而且观察右边的灰度范围时，很明显 HSL 在对比度上也严重不足。简而言之，使用 HSLuv，我们可以控制对比度，同时保证在整个调色板中颜色的外观和感觉一致。3. 设计你的调色板
我认为，任何强大的系统都需要一个好的设计方案。因此，在进入创造色彩系统之前，我们应该考虑要实现的三个重要目标。1）可接近性
在我们的案例中，目标是达到 WCAG[2] 标准中色彩对比度的 AA 级水平。这意味着对于指定的图形元素，其需要至少具备 3.0：1 的对比度，而对于文本，需要具备至 4.5：1 的对比度。（[2]Web内容无障碍指南（WCAG）涵盖范围广泛，涉及了一些建议，这些建议可使网站内容更容易访问。遵循这些原则，web内容更易为广大残疾人士所接受，这些包括盲人和低视患者、聋人和重听人、学习障碍、认知障碍、行动不便、言语残疾、光过敏患者和这些病症的复合患者。）提醒一下，上述对比度的数值是基于白色的背景色，但是 我们的颜色也应该在其他背景颜色上达到最小对比度的标准。2）灵活性
如果要考虑可访问性，就需要先考虑色彩范围的灵活性。灵活性意味着一种色彩变化的步骤数及其在设计系统中的应用。为了简化有关范围的概念，我们可以从传达信息和功能的角度来思考颜色，如下图所示。该图对于如何分配颜色仅提出了一个非常粗略的想法，即根据所需的对比度及其目的将元素放置在何处。可以将这些步骤想象成你的产品体验和层级结构的组成部分，例如按钮及其状态、UI 元素（辅助线、卡片轮廓、背景、图标），或者为文本提供所需的颜色范围（涵盖从标题到微文案的所有内容）。我们颜色的灵活性不仅限于组件，还可以是颜色的交叉组合，尤其是在你准备使用非白色或深色的主题时。3）统一生态性
请记住，色彩方案不仅对你的产品很重要。它们还可以用于插画或品牌创意，统一的颜色可以帮助你建立一个强大的生态系统，该生态系统具有相似的视觉样式，从而有助于加强品牌的形象识别。4. 了解色彩成分
1）色相
色相用 0 到 360 之间的数值表示颜色范围介于 0 到 360 之间。我们可以看到，除了颜色外观以外，色相不会影响其他内容。其他值是相似的，包括对比度。2）饱和度
饱和度是我们色彩的鲜艳度和强度 —— 它会使色彩变得明亮或暗淡。我们将使用 100％ 的饱和度进行工作，最终调整颜色以获得可感知的一致性。同样，饱和度不会影响任何值（在某些情况下，它会改变对比度，但变化非常小，如下所示）。3）亮度
亮度是直接影响对比度的关键组成部分 —— 它使颜色更浅或更深。我们将其作为创建色彩范围的第一步。5. 建立色阶
色阶是表示图像亮度强弱的指数标准，也就是我们说的色彩指数，指的是 灰度分辨率（又称为灰度级分辨率或者幅度分辨率）。图像的色彩丰满度和精细度是由色阶决定的，色阶指亮度，在黑色（ 0％ 亮度）和白色（ 100％ 亮度）之间按照亮度递进的组成颜色组合，这一步骤将帮助我们构建感知上统一且灵活的系统。每种颜色理想的色阶数是多少？大概是 10 阶，我将在本文后面对此进行解释。但是，为了演示，我将减少一个色阶，决定建立一个 9 阶的色彩范围。开始时，第一个应该建立的色阶是灰色，这不仅是因为我们通常在 UI 中使用灰色作为默认颜色，来创建可视层次结构和组件，还因为我们将进行一些调整，这些调整只在没有色相的情况下才可能实现。p.s.我不会在最终的调色板中加入纯黑色，因为其与白色形成强烈的对比色会造成视觉问题。1）线性色彩范围
我们知道亮度影响对比度，因此也会影响到每个色阶。我们采用一种简单的方法，用线性的方式定义色阶，使每一个色块亮度差距为 10％。6. 学习 IBM 的流程
IBM 是一个设计和可访问性很强的企业。他们要求在完全灵活的条件下测试色彩系统，基于 HSLuv 颜色模型创建的调色板反映了这一点。那么，我们可以从他们的经验中学到什么，并将其应用于我们创建的线性色阶？1）光能和人眼
我们面临的第一个问题是，与亮色调（高能量光）相比，人眼对暗色调（低能量光）之间的变化更敏感。简而言之，与深灰色之间的颜色相比，我们更容易区分浅灰色之间颜色的转变。但现在我们的线性色阶并不能反映这一点。2）与其他颜色结合
第二个问题来自人眼对色板对比度的需求。如果最终目的是足够灵活，那么我们必须寻求一个色阶，给我们足够的选择能与背景色相结合，线性色阶也没有满足这一点。3）让颜色讲故事
上面提到的两个问题都将揭示另一个重要点，驱动我们产品的品牌和视觉体验的元素（主要的 CTA、图标），都应该使用调色板色阶里中间的那个颜色。这是为什么？在色阶中间的颜色，接近达到所需的最低对比度的颜色，在视觉上它们具有足够的亮度，因此这些颜色脱颖而出，它们将推动构建产品的层次结构和品牌体验。7. 让色阶派上用场
根据上面的推理，我们必须开始尝试线性色阶内的所有亮度值。我认为要真正理解值之间的所有关系，应该花一些时间来创建属于自己的而不是采用已经众所周知的色彩范围。1）对比度钟形图
我发现 IBM 有一个工具在调整色阶过程中非常有用 —— 如下图网格，用于比较整个范围内每个颜色之间的对比度数值，以此我们可以优化此色阶。1 - 分析曲线
在网格上放下我们的色阶之间的对比度关系的值之后，我们可以发现一些问题：- 该范围在中间部分存在非常相似的对比度值，这不利于在彼此之间的色阶之间创建足够的对比度灵活性
2 - 手动调整曲线
我们必须 更新两端的曲线，使深灰色之间的对比度更高，同时保持浅灰色之间的对比度更低，从而实现两端的肉眼感知平衡。除此之外，我们还要 注意一下中间颜色的对比度，尝试让它比两边的颜色对比度更高，通过增加暗色之间的对比度即可达到这一效果。我发现从深灰色开始，沿峰顶建立曲线（颜色阶跃为 600、500），然后继续下降为白色，这样的曲线范围效果很好。- 随着亮度值的变化，我们不仅要改变周围色块之间的对比度，还要改变色彩与白色背景之间的对比度。这意味着，你有可能确实修复了曲线，但是颜色仍然不具有组合的灵活性。
- 每一个小变化都很重要。通常，我们不会将亮度值大幅度地从 80 移到 70，而是通过微小范围梯度（例如 69.5 vs 70）来实现，因为介于两者之间的两个十六进制代码可以轻松地改善或者破坏对比度曲线。
- 还记得我们的灵活性示意图吗，打算要在系统中使用一些主题 —— 使用非白色的背景。因此，我们并不是只通过最小的对比度建立峰值步幅（600，500），而是增加了一点对比度，因此可以与非白色背景（100）结合使用。
我个人是在 Figma 中完成的，纯粹使用 HEX 代码（忘记 HSL 吧！），在 HSLuve 插件上更改亮度，然后切换回 Contrast 插件以查看产生的变化。同时，我将这些新值放在关系网格上，这样我便知道要移动的位置。p.s. 我希望能够在 Figma 中同时运行两个插件。3 - 检查新色阶
现在，通过调整色阶，我们可以观察到平滑曲线的对比度变化，特别是在从白色开始以及中间色阶附近之间的变化。在此阶段，我还在中间步骤中添加了一个色相组件，表明这些颜色可以在视觉外观上有更多的可能，同时又保持在计划的最小可访问性之内。8. 灵活性才是力量
在灵活性方面，通过调整后的 9 阶色阶，我们获得了 4 种可以达到至少 4.5：1 对比度的眼啊色，可以用于白色背景。- 我们的 light and light II 主题使用相同的色阶，以帮助我们加强用户和品牌统一体验。
- 所有这三个主题都具有我们计划用于主要 CTA（主要行动按钮）和图标的相同的颜色
你可能会注意到，深色主题多了一个可用颜色。发生这种情况的原因是在 9 阶色阶中，基于浅色和深色背景无法获得相同数量的颜色。最后，一旦我们将这些颜色放入系统中，它们应用至与目的相匹配的位置，以在我们的产品中建立体验，就可以看到我们创建的色板发挥真正的灵活性。
9. 添加额外的色阶
如果你想知道 10 阶色阶和 9 阶色阶哪个更好，以及它是如何跨主题分配颜色的，我以 IBM 的色阶为依据创建了一个样本进行对比。色阶加入额外一阶后，我们可以将中间色的对比度调低一些，使中间色阶梯度更加突出，同时仍然满足所有最低的对比度要求。不仅如此，另一个步骤是可以通过 4.5：1 的对比度为文本提供一种额外的颜色，而且这一步可以使主题颜色板更多，这对于像 IBM 这样的拥有数百种产品和丰富经验的公司来说至关重要。
10. 更多颜色，更多调整
我还没有介绍流程的最后一步，因为这会使之前的部分变得更加复杂。但是，这一步很重要，因为它解释了为什么我们开始要向调色板中添加色相成分时，要对饱和度进行调整。下面，我使用原始线性色阶调色板中相同亮度数值而颜色，向其中添加了 100％ 饱和度的色相，对三种不同的颜色进行了采样。我们可以看到几种颜色的视觉峰值，主要分布在在较浅的地方或中间梯度处。这些不一致或多或少地取决于色调。这完全没问题，因为我们可以在对比度没有明显变化或为零的情况下解决此问题。尤其是紫色亮度为 600 时稍微有些偏离，类似于亮度为 300、200、100 的黄色和 300、200 中的绿色。我们将仅仅调整饱和度，而不调整其他数值。现在，颜色似乎更加整齐，但是，为了真正测试感知均匀性，我们必须将这些颜色翻转为灰度，以勘查整个调色板中的不一致的地方。最后的话
本文的目的是真正地展示 HSLuv 颜色模型的优势，不仅能制作与人眼感知一致的颜色，而且还提供了可以供我们舒适地使用的过程和组件。希望可以在你创建的过程中看到 HSLuv 的其他优势，从而我们不仅可以用它构建对人眼友好的产品体验，而且可以让这个过程更简单易操作。我会鼓励你从 0 色阶开始，就像我一开始所做的那样。通过不断尝试而探求合适的亮度值和组合，你将会学到很多知识，为你学习和了解颜色的其他重要方向的知识（例如可接近性或视觉层次结构）打开大门。原文：https://uxdesign.cc/creating-accessible-colors-for-human-eyes-66ed6a083230
作者：Frantisek Kusovsky
译者：刘昱倩
审核：吴鹏飞、李泽慧、张聿彤
编辑：李凯悦
本文翻译已获得作者的正式授权（授权截图如下）
PS：欢迎大家关注三分设，每天早上9点，准时充电。分享优质设计、创意灵感、新知新识，定期大咖老师直播分享，零距离连麦，答疑解惑。 添加小小虫微信号【 Lil_Bug 】，备注【 三分设 】加入！（只面向星标了公众号三分设的粉丝）
点开下方公众号 ➡️ 点击右上角【...】 ➡️ 设为星标