Date 2026-01-04 22:31:07
Hi，我是彩云。许多人想尝试在项目中应用年度最流行的潘通色。也许这些颜色可以激发更多人的创造力。然而，当这些颜色在界面中使用时，可能会出现一些问题。本文将进行分析，使您的颜色匹配更合适。
（彩云注：当你阅读英文原文时，你会发现外国老板对颜色的研究已经达到了这种程度。你觉得你可以学到很多工具和知识。你必须仔细阅读。最好试试。彩云本人基本上是根据老板的文章内容仔细研究了文章中提到的这些研究工具，学到了很多。）
在我之前写的文章《关于颜色易用性的神话》中，我试图定义易用性的原则如下:
在我们的生活中，“可访问性”意味着尽可能多的人使用网站或手机应用程序。我们通常认为它只适用于残疾人，但这只是根据定义，但在某些特定情况或背景下，它也有利于其他普通人。“用户体验”倾向于满足目标用户，而“易用性”倾向于在共同的良好体验中包含尽可能多的人，但两者并不相互排斥。
有些还没跟上 2021 年配色趋势的人，以下是 2 一定要知道潘通色。
就其技术定义和命名而言，这两种颜色可以简单地称之为“极致灰”和“亮黄”。
极致灰: — sRBG: 147, 149, 151 — Lab: 62, 0, -1 — Hex.: #939597亮丽黄: — sRGB: 245, 223, 77 — Lab: 89, -3, 70 — Hex.: #F5DF4D基本介绍了两种颜色。接下来，我想向你展示如何从这里开始 2 在潘通色中建立一个好的配色方案。有两个目标：1、共享配色工具和过程 ；2、告诉你，即使你不是艺术家，配色也可以很理想。
有很多方法可以确定颜色是否被用户感知，内容是否可读。但今天最有效的方法之一是测量两种颜色之间的对比度：背景色和前景色。
参考以下内容和图片 WCAG 2.1 本指南致力于无障碍访问。A、AA 和 AAA 评级是这个参考框架的三个等级。建议潘通色至少要达到 AA 等级。对比度的大小取决于文本的大小:对于大文本(24px 普通或 19px 加粗应至少有“3.0”:对比度，对于小文本，应该有“4.5”:一、对比度。
潘通为我们提供了 2 所以我决定先把它们和经典的黑白结合起来，从技术上检查它们的兼容性，以获得最佳的对比度。
图片中的可读性指标如下
AAA (L): 符合 AAA 标准大文本AA (S): 符合 AA 小文本Faill标准 (N): 不符合要求通常，我们会尝试获得目标尺寸 AA（基于 WCAG 2.1 标准）
从结果中，我们可以看到黑色是最容易使用的，因为它允许所有文本大小达到 AAA 等级，黄色对比度为 15.5：1.灰色的对比度为 6.9：1（也符合了 AA 级）
出于好奇，我试着把这两种颜色结合起来，看看它们是否可以混合使用。
两种颜色混搭，产生的对比度不符合标准。所以，如果涉及到文字，就不能一起使用这两种颜色。
(彩云注:这些对比度值是怎么来的？我还帮忙找到了一个可以方便查看的网站。地址是 https://webaim.org/)
当我们作为设计师创建色卡时，我们将引入对比色、强调色和主色的相邻色。在这里，我将使用它 2021 年的 2 以流行潘通色为主色。
潘通的优势在于他们专注于颜色。他们的网站提供了一个特殊的年度颜色趋势页面，其中有非常详细的颜色使用介绍（ https://connect.pantone.com），可以分析颜色和各种最佳颜色的搭配。这是配色的例子之一。
对于本文的剩余部分，我将简单地使用这个调色板并将其分解为一个 web 中间使用的调色板，使其能更好地应用于大多数实际项目。
假如你没有现成的配色，或者没有从参考中找到灵感，我建议你可以使用这些配色工具，非常好用：
网站采用随机生成的优质配色方案 https://coolors.co使用锁定颜色和智能配色工具进行配色。工具地址是 http://colormind.io使用bootstrap Adobe 你自己的配色网站，通过算法优化你的配色，地址是 https://color.adobe.com/create/color-wheel
回到潘通提供的色卡，该品牌甚至为您提供了一些更深入的配色分析工具，包括可视化您的选择。即使不完整，这对可访问性概念的实施也非常有用。
“分析”按钮会给您带来灵感或帮助您更好地调整配色的工具列表。
亮度图非常方便，不需要颜色本身就可以显示每种颜色的性质。但我个人会用其他工具来建造我自己的色卡。
现在我们有了一张色卡，检查每种颜色和白色的对比度很有趣。为什么是白色的？作为参考，它通常是我们界面的基础。更重要的是，它是基于一个颜色工具 https://leonardocolor.io
为什么会有这样的数字？首先，它们让我意识到只有蓝色和白色形成了足够的自然对比，其他的都在 3.0 除了黄色和奶灰色，左右，所以还不错。
然后我在 Leonardo 中将这 6 一个接一个地添加颜色以获得基本的调色板。在“对比度”字段中，你会注意到有一个由逗号分开的 10 个值列表。这使我能够自动生成 10 颜色，通过 10 对比度不同，通常约为：1.05， 1.1, 1.3, 2, 3.1, 3.75, 4.8, 6, 7.25, 9
(彩云注:这个网站很容易创建一系列配色，形成科学的调色板。建议试试。但是第一次用的时候会有一些理解问题，翻译这篇文章的时候研究了很久。)
Leonardo 默认从 3.0 和 4.5 开始，这是 WCAG 符合 AA 标准的两个值。我向你推荐的列表涵盖了相当大的亮度范围，从同一颜色的最亮到最暗。一般来说，高于 9 对比度已经很高了，几乎没有区别。
对于每种颜色，我将稍微调整这个列表，以放置我以前获得的比较值。目标是在工具生成的变体列表中找到我的原始颜色。你不能这样做，但请注意，这将失去色卡基色的参考。
例如，对于我颜色列表中的蓝色，我将有这个对比列表：1.05， 1.1, 1.3, 2, 3.1, 3.75, 4.8, 6, 7.32, 9
一旦建立了这个颜色列表，检查每个颜色线与相邻颜色线之间的接近度是非常重要的。这可以通过 Leonardo 通过在每个模拟选项上传输，完成“色板”模式 CVD(色觉缺陷)模拟字段。(彩云注:这一步是 Leonardo 本工具中的操作可能有点难以理解，实际操作可以理解，实际上是几种选项模式）
以下是我在“极端”版本中模拟的不同调色板(色盲完全缺失色谱的一部分)，向你展示它是什么样子的。
这样做的目的是意识到，如果你想在界面中并置颜色来区分元素，它们可能太接近色盲了。这是创建界面时需要注意的问题。
你会注意到，在无色版本中，使用每种颜色的紧密对比值使颜色在调色板中难以区分：每行似乎完全相同。
并非所有这些颜色都很容易使用，只有对比度在 3.0 以上颜色可与白色结合使用。
为了节省时间，生成一个兼容性表的好工具是可访问的品牌颜色 UseAllFive（ https://abc.useallfive.com/ ）。在这个链接中，我放了上面的链接 6 以黑色和白色为例，向您展示工具生成的内容。
所有的橙色都要避免 x 背景上的颜色组合。大文本可以是黄色的✔️使用带绿色的颜色组合✔️一切都可以。
你可以通过这个工具检查你在产品中的颜色组合是否有问题 。
我不会在这里给你基于这些颜色的东西 UI 设计课程不是重点。但是，一旦你在那里 Leonardo 如果工具中有这些颜色，您可以直接从“生成的颜色”面板中复制颜色。
我使用 Figma 以文本格式复制这些颜色，然后在工具中制作颜色块，方便我选择颜色，最后将其保存在工具样式面板中。虽然有点耗时，但 [Color Import] (https://www.figma.com/community/plugin )通过在简单的副本中创建所有这些插件来解决这个问题，复制粘贴后一键生成色板。
接下来的设计取决于你的设计能力，可以通过这些颜色快速匹配颜色。
如何充分利用这些颜色完全取决于你自己。这张照片只是一个远未完成的初稿。
还有很多其他的方法我有时会用。[Colorbox.io]（https://colorbox.io/)工具优化一些颜色比例，确保我有与纯白色或黑色兼容的颜色，有点像（Lyft 的方法）(https://design.lyft.com/)颜色系统。
作为一名设计师，我们的工作不仅是寻找我们喜欢的颜色，而且知道如何从非常准确的约束或特殊的组合，有时使用从一开始就无法获得的品牌颜色，并学习如何让每个人都能接受。作为一名设计师，无障碍和包容性是我们日常生活的一部分。
但是需要注意的是，并不是一切都那么严格，我们通常都有自己的品味。在这个过程中，调色板可能会改变，以调整一些“你认为合适”的颜色。只有通过调整它们，我们才能更清楚地使用颜色，并在未来增强我们对颜色的感知。
有时候 4 或 5 精确的色彩组合(背景+文本)足以满足设计师和用户的需求。
最后，如果你认为这太难了，试着把目标锁定在大文本上 AA 在标准上，这总比什么都不做好。比昨天做得更好很重要。
（彩云注：本文注重使用工具对颜色进行科学严谨的分析，特别是对可用性的研究非常深入。中国对这一领域的研究不多，但国外已经非常重视产品设计。我建议你可以收集这篇文章，然后找时间用文章中提到的工具再次操作它。彩云花了大约几个小时，感觉很有收获！）
一觉醒来，2020 年潘通年度色就这样发布了。
阅读文章 >欢迎关注作者微信微信官方账号:「彩云译设计」
