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