▲点击 "TCC翻译情报局" 关注，回复 "社群" 加入我们

本文共 5631 字，预计阅读 15 分钟

TCC 情报局的第 110 篇干货分享

2022 年的第 8 篇

色彩对于品牌视觉形象来说至关重要，对设计师来说掌控色彩也非常关键。在设计团队中构建色彩系统，建立属于产品的调色板，是每个团队必须做的一件事。现有的方法大都是按照公式计算，得到逻辑上严谨的色板，但却忽略了人眼才是色彩最终面向的对象，具备视觉感知均匀性的色彩，才是更好的选择。作者通过文章一步步地教给我们如何利用 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 ）结合使用。