2023-11-14 周周
今天和大家聊聊顏色系統，在做一套新產品的色彩體系時，大家常常需要解決一個問題，那就是顏色梯度，也就是色卡制作。如何從品牌色開始建立一套科學的調色板？這篇文章嘗試解決這個問題。
無論你是一位需要從 0-1 制定色彩系統的品牌設計師，還是在一個已有設計系統的產品設計師，都需要掌握如何更加專業的創建設計系統中的顏色梯度。
一個色彩梯度，可以理解為一個色彩范圍，指的是顏色如何以平滑和連續的方式從亮過渡到暗的視覺表現。
在設計系統中會用色彩梯度來創建顏色目錄，然后用這些不同的色彩值應用到不同的設計元素，交互狀態，插圖以及其他一些品牌設計資產。
以單色紫色以及它的色彩梯度為例，500 標記的是它的品牌主紫色
1. 從品牌色開始
一旦你確定了你的品牌色板，就可以開始創建色彩梯度了。這個目標一般不會改變定義好的品牌色值，但有時，這可能是必要的，得考慮到足夠的對比度之間的可訪問性（品牌色可被微調）。在最后確認之前，要養成查證對比度的習慣。
值得注意的是，系統消息和操作最好包含綠色、黃色、橙色和紅色。例如，成功、警告和錯誤消息。
如果你已經在定義的調色板中使用其中一種顏色，則無需再制作一種顏色。產品還得有一系列輔助顏色。因此當一切完成后，你可能會得到非常豐富的顏色。
以 HSL 顏色類型表示的品牌顏色
根據上面幾種顏色，我們需要設計 3 個顏色梯度。如果不查看顏色的具體數值，我本來會認為只需要兩組顏色梯度，一組是綠色的，另一組是紫色的。但深青色的色調與它們都有明顯區別，因此需要另外準備一個藍色的顏色梯度。
2. 調整色彩明度
我發現每種顏色有 8 個梯度對于大多數設計系統來說就足夠了，并且足以創建淺色和深色模式。
你的品牌顏色可能會落在 400-500 范圍內，但不限于此。讓我們從綠色梯度開始，因為我們在同一色調中有 2 個品牌顏色。
①創建顏色梯度，你將在其中開始調整亮度
標定你的品牌顏色可能會出現在刻度上的位置。之后當你開始細化顏色梯度時，這些可以再被調整。
②吸取鄰近顏色
先選擇 200（待選定顏色的色卡區間），然后吸取 100 的顏色。
③調整亮度
HSL，即色相、飽和度、亮度。調整第三個數值，即亮度，使顏色變亮，或減小它使顏色變暗。在例子中的情況下，我們需要使第一個顏色梯度變暗，因此我們將減小這個數值。
目標是在每個顏色梯度之間產生明顯的對比（彩云注：在數值上并非是等分的，偏亮的部分明度跨度大，偏亮的部分明度跨度小）。
為每個顏色梯度重復這個過程。
Tip: 手動調整可能會比較繁瑣，有許多 Figma 插件可幫助你快速創建調色板。我最喜歡的是 Supa Palette：https://www.figma.com/community/plugin，復制鏈接可以直接安裝。
僅調整亮度后的結果
④結果
以上是僅調整亮度后的效果。這可能正好是我們追求的感覺，但假設對于我們想要實現的目標來說，顏色飽和度有點太高。在綠色這個色相上通常會有這個問題，所以一般會需要進行飽和度校準。
3. 調整飽和度
如果我們想要更多或更少的色彩豐富度，我們可以調整飽和度。調整飽和度的原則與調整亮度相同，盡管調整可能會更加微妙。在調整過程中，允許進行輕微的亮度調整，以達到更好的對比效果。我告訴你，這個過程很花時間，考驗耐心。
飽和度調整前后對比
①品牌色不做任何調整
300 和 100，這 2 個品牌色在過程中不需要做任何調整。但如上所示，我已經減少了 400 到 800 之間的飽和度。我希望整體呈現更為平靜的綠色，但仍希望較淺的顏色有一些沖擊力。我把 300 和 400 之間的顏色將為懸停狀態提供支持，而不會刺眼。
4. 檢查對比度數值，確保可訪問性
希望你還沒有最終確定所有顏色，因為在這一步，你可能需要調整你定義的品牌顏色。
當然，這取決于你打算如何使用這些顏色。如果你計劃將顏色用作前景文本或文本所在的背景顏色，那么你需要測試每種顏色組合。我使用 Figma 插件 Stark：https://www.figma.com/community/plugin/。
①測試極端情況
我喜歡進行的一個基準測試是找到前景文本的最淺顏色，看它是否能在同一色帶內的每個顏色梯度上顯示良好。這讓我迅速了解極限值，如果某種組合效果不好，我就知道需要進一步調整顏色。
前景對比度
這張圖馬上能告訴我在語義上分配顏色時可以做什么，以及不能組合什么。比如，定義主要操作顏色等。它不能定義我必須做什么，而是提示我不應該越過哪些界限。
我不喜歡直接用到極值的對比度，而是需要再高一些，這樣可讀性會更好。
5. 對所有其他顏色重復這個操作
完成品牌的第一個顏色梯度使得創建其余的變得稍微容易一些。你可以按照相同的步驟進行，但要在每個階段都保持大致相同的飽和度和明度水平。例如，綠色 400 和紫色 400 的飽和度和明度要相似，只是色相會有不同。
相同值的顏色將具有相似的亮度和飽和度
需要弄清楚一點，你不必在你的設計系統中的色板上列出所有可能的顏色。但如果將來需要新的顏色或者更多的顏色變化，你可以方便地添加進去。
6. 根據需要加新顏色
現在隨便加個新顏色都很容易。比如我們來加個橙色梯度。咱們從現有顏色中找個最接近想要的橙色的，比如綠色。然后復制它，調整每個顏色點的顏色。
為品牌增加了一種新的橙色
我們新橙色的色相值是 36，所以我在每個點的色相中輸入了這個值。我稍微調整了亮度和飽和度，以防橙色變成褐色。
設計調整顏色梯度是乏味的，但在為設計系統創建堅實基礎方面至關重要。按下面這 6 個步驟來做：
文章來源：優設網 作者：彩云Sky
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計(axecq.cn )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的大數據可視化界面設計、B端界面設計、桌面端界面設計、APP界面設計、圖標定制、用戶體驗設計、交互設計、UI咨詢、高端網站設計、平面設計，以及相關的軟件開發服務，咨詢電話：01063334945。
關鍵詞：UI設計公司、界面設計公司、UI設計服務公司、數據可視化設計公司、UI交互設計公司、高端網站設計公司、用戶體驗公司、軟件界面設計公司、軟件qt開發、軟件wpf開發、軟件vue開發。
