今天和大家聊聊顏色系統(tǒng)，在做一套新產品的色彩體系時，大家常常需要解決一個問題，那就是顏色梯度，也就是色卡制作。如何從品牌色開始建立一套科學的調色板？這篇文章嘗試解決這個問題。

無論你是一位需要從 0-1 制定色彩系統(tǒng)的品牌設計師，還是在一個已有設計系統(tǒng)的產品設計師，都需要掌握如何更加專業(yè)的創(chuàng)建設計系統(tǒng)中的顏色梯度。

一、什么是色彩梯度?

一個色彩梯度，可以理解為一個色彩范圍，指的是顏色如何以平滑和連續(xù)的方式從亮過渡到暗的視覺表現(xiàn)。

在設計系統(tǒng)中會用色彩梯度來創(chuàng)建顏色目錄，然后用這些不同的色彩值應用到不同的設計元素，交互狀態(tài)，插圖以及其他一些品牌設計資產。

以單色紫色以及它的色彩梯度為例，500 標記的是它的品牌主紫色

1. 從品牌色開始

一旦你確定了你的品牌色板，就可以開始創(chuàng)建色彩梯度了。這個目標一般不會改變定義好的品牌色值，但有時，這可能是必要的，得考慮到足夠的對比度之間的可訪問性（品牌色可被微調）。在最后確認之前，要養(yǎng)成查證對比度的習慣。

值得注意的是，系統(tǒng)消息和操作最好包含綠色、黃色、橙色和紅色。例如，成功、警告和錯誤消息。

如果你已經在定義的調色板中使用其中一種顏色，則無需再制作一種顏色。產品還得有一系列輔助顏色。因此當一切完成后，你可能會得到非常豐富的顏色。

以 HSL 顏色類型表示的品牌顏色

根據(jù)上面幾種顏色，我們需要設計 3 個顏色梯度。如果不查看顏色的具體數(shù)值，我本來會認為只需要兩組顏色梯度，一組是綠色的，另一組是紫色的。但深青色的色調與它們都有明顯區(qū)別，因此需要另外準備一個藍色的顏色梯度。

2. 調整色彩明度

我發(fā)現(xiàn)每種顏色有 8 個梯度對于大多數(shù)設計系統(tǒng)來說就足夠了，并且足以創(chuàng)建淺色和深色模式。

你的品牌顏色可能會落在 400-500 范圍內，但不限于此。讓我們從綠色梯度開始，因為我們在同一色調中有 2 個品牌顏色。

①創(chuàng)建顏色梯度，你將在其中開始調整亮度

標定你的品牌顏色可能會出現(xiàn)在刻度上的位置。之后當你開始細化顏色梯度時，這些可以再被調整。

②吸取鄰近顏色

先選擇 200（待選定顏色的色卡區(qū)間），然后吸取 100 的顏色。

③調整亮度

HSL，即色相、飽和度、亮度。調整第三個數(shù)值，即亮度，使顏色變亮，或減小它使顏色變暗。在例子中的情況下，我們需要使第一個顏色梯度變暗，因此我們將減小這個數(shù)值。

目標是在每個顏色梯度之間產生明顯的對比（彩云注：在數(shù)值上并非是等分的，偏亮的部分明度跨度大，偏亮的部分明度跨度小）。

為每個顏色梯度重復這個過程。

Tip: 手動調整可能會比較繁瑣，有許多 Figma 插件可幫助你快速創(chuàng)建調色板。我最喜歡的是 Supa Palette：https://www.figma.com/community/plugin，復制鏈接可以直接安裝。

僅調整亮度后的結果

④結果

以上是僅調整亮度后的效果。這可能正好是我們追求的感覺，但假設對于我們想要實現(xiàn)的目標來說，顏色飽和度有點太高。在綠色這個色相上通常會有這個問題，所以一般會需要進行飽和度校準。

3. 調整飽和度

如果我們想要更多或更少的色彩豐富度，我們可以調整飽和度。調整飽和度的原則與調整亮度相同，盡管調整可能會更加微妙。在調整過程中，允許進行輕微的亮度調整，以達到更好的對比效果。我告訴你，這個過程很花時間，考驗耐心。

飽和度調整前后對比

①品牌色不做任何調整

300 和 100，這 2 個品牌色在過程中不需要做任何調整。但如上所示，我已經減少了 400 到 800 之間的飽和度。我希望整體呈現(xiàn)更為平靜的綠色，但仍希望較淺的顏色有一些沖擊力。我把 300 和 400 之間的顏色將為懸停狀態(tài)提供支持，而不會刺眼。

4. 檢查對比度數(shù)值，確?？稍L問性

希望你還沒有最終確定所有顏色，因為在這一步，你可能需要調整你定義的品牌顏色。

當然，這取決于你打算如何使用這些顏色。如果你計劃將顏色用作前景文本或文本所在的背景顏色，那么你需要測試每種顏色組合。我使用 Figma 插件 Stark：https://www.figma.com/community/plugin/。

①測試極端情況

我喜歡進行的一個基準測試是找到前景文本的最淺顏色，看它是否能在同一色帶內的每個顏色梯度上顯示良好。這讓我迅速了解極限值，如果某種組合效果不好，我就知道需要進一步調整顏色。

前景對比度

這張圖馬上能告訴我在語義上分配顏色時可以做什么，以及不能組合什么。比如，定義主要操作顏色等。它不能定義我必須做什么，而是提示我不應該越過哪些界限。

我不喜歡直接用到極值的對比度，而是需要再高一些，這樣可讀性會更好。

5. 對所有其他顏色重復這個操作

完成品牌的第一個顏色梯度使得創(chuàng)建其余的變得稍微容易一些。你可以按照相同的步驟進行，但要在每個階段都保持大致相同的飽和度和明度水平。例如，綠色 400 和紫色 400 的飽和度和明度要相似，只是色相會有不同。

相同值的顏色將具有相似的亮度和飽和度

需要弄清楚一點，你不必在你的設計系統(tǒng)中的色板上列出所有可能的顏色。但如果將來需要新的顏色或者更多的顏色變化，你可以方便地添加進去。

6. 根據(jù)需要加新顏色

現(xiàn)在隨便加個新顏色都很容易。比如我們來加個橙色梯度。咱們從現(xiàn)有顏色中找個最接近想要的橙色的，比如綠色。然后復制它，調整每個顏色點的顏色。

為品牌增加了一種新的橙色

我們新橙色的色相值是 36，所以我在每個點的色相中輸入了這個值。我稍微調整了亮度和飽和度，以防橙色變成褐色。

總結

設計調整顏色梯度是乏味的，但在為設計系統(tǒng)創(chuàng)建堅實基礎方面至關重要。按下面這 6 個步驟來做：

1. 從品牌色定義開始
2. 調整每個顏色梯度的亮度
3. 根據(jù)需要調整飽和度
4. 檢查對比度
5. 對所有其他顏色重復此操作
6. 通過調整重復顏色漸變上的色調值，輕松加新顏色

后續(xù)，你將需要定義這些顏色的使用方式。在我的下一篇文章中，我將介紹如何制作語義顏色集，以便其他設計師能明確地知道如何以及何時使用每種顏色。保持關注吧！

作者：彩云譯設計