Hi，我是彩云。很多人都想嘗試在項目中應用年度最流行的潘通色，也許這些顏色能激發更多人的創造力。不過，這些配色在界面中使用時，可能會存在一些問題，本文將做分析并讓你的配色用的更為恰當。

（彩云注：閱讀英文原文時會發現，國外大佬對顏色的研究已經細致到這種程度，感覺能學到很多工具和知識，一定要認真閱讀，最好動手試試看，彩云自己基本上就是跟著大佬的文章內容仔細研究了一遍文中提到的這些研究工具，學到很多。）

在我之前寫的文章《關于顏色易用性的神話》一文中，我試圖定義易用性原則如下：

在我們的生活中，“可訪問性”是指讓網站或手機應用被盡可能多的人使用。我們通常認為它只適用于殘疾人，但這只是根據定義的情況，但在某些特定情況或背景下，它也有利于其他普通人群使用。“用戶體驗”傾向于滿足目標用戶，“易用性”則傾向于將盡可能多的人包含在共同的良好體驗中，但兩者也并非相互排斥。

2021 最流行的配色

對于一些還沒跟上 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:1”的對比度，對于小文本，應該有“4.5:1”的對比度。

潘通為我們提供了 2 種顏色，所以我決定先將它們與經典的黑白結合起來，從技術上檢查它們的兼容性，以獲得最佳對比度。

圖片中的可讀性指標如下

• AAA (L): 符合 AAA 標準的大文本
• AA (S): 符合 AA 標準的小文本
• Fail (N): 不符合要求

通常我們會嘗試獲取目標尺寸的 AA（基于 WCAG 2.1 標準）

從結果中，我們可以看到黑色是最容易使用的，因為它允許所有文本大小都達到了 AAA 級，在黃色的對比度為 15.5：1，在灰色中的對比度為 6.9：1（也符合了 AA 級）

出于好奇，我嘗試將這兩種顏色組合起來，看看它們是否可以混合使用。

兩種顏色混搭，產生的對比度都是不符合標準的。因此，如果涉及到文字，就不能把這兩種顏色用到一起。

(彩云注：以上這些對比度數值怎么來的？我也幫忙找到一個可以方便查看的網站，地址是 https://webaim.org/)

創建基于潘通 2021 的色卡

當我們作為設計師創建色卡時，我們會為主色引入對比色、強調色和鄰近色。在這里，我將采用 2021 年的 2 個流行潘通色作為主色。

潘通公司的優勢在于他們專注于色彩。他們的網站提供了一個專門的年度色彩趨勢頁面，里面還有非常詳細的顏色使用介紹（ https://connect.pantone.com），可以分析顏色和各種最佳顏色搭配。這是其中一個配色示例。

對于本文的剩下部分內容，我將簡單地使用這個調色板并將其分解為一個可以在 web 中使用的調色板，讓它可以更好的用于大多數實際的項目。

如果你沒有現成的配色，或者沒有從參考找到靈感，我建議你可以使用這些配色工具，非常好用：

• 使用隨機生成的優質配色，網站是 https://coolors.co
• 使用鎖定顏色，智能配色工具來進行配色，工具地址是 http://colormind.io/bootstrap
• 使用 Adobe 自家的配色網站，通過算法優化你的配色，地址是 https://color.adobe.com/create/color-wheel

回到我們由潘通提供的色卡，這個品牌甚至為你提供了一些工具更深層次的配色分析，包括可視化你的選擇。這對于可訪問性概念的落地很有用，即使它還不完整。

“分析”按鈕將會給你帶來可以激發靈感或幫助你更好調整配色的工具列表。

亮度圖非常方便，可以顯示每種顏色的性質，而不需要顏色本身。但我個人會使用其他工具來構建我自己的色卡。

基于潘通 2021 的界面配色

現在我們已經有了色卡，檢查每種顏色與白色的對比度很有趣。為什么是白色？作為參考，它經常是我們界面組成的基礎。更特別的是，它是基于一個顏色工具來的 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 標準上，這總比什么都不做要好。重要的是要比昨天做得更好。

（彩云注：本文注重使用工具來對顏色進行科學嚴謹的分析，尤其是對于可用性這塊的研究非常深入，在國內對于這塊的研究還不多，但國外在產品設計這塊已經非常重視。我建議大家可以收藏這篇文章，然后找時間自己用文中提到的工具動手操作一遍，彩云是大概花了幾個小時，覺得很有收獲！）

歡迎關注作者的微信公眾號：「彩云譯設計」