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

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

一、什么是色彩梯度?

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

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

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

1. 從品牌色開始

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

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

如果你已經(jīng)在定義的調(diào)色板中使用其中一種顏色，則無需再制作一種顏色。產(chǎn)品還得有一系列輔助顏色。因此當(dāng)一切完成后，你可能會(huì)得到非常豐富的顏色。

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

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

2. 調(diào)整色彩明度

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

你的品牌顏色可能會(huì)落在 400-500 范圍內(nèi)，但不限于此。讓我們從綠色梯度開始，因?yàn)槲覀冊(cè)谕簧{(diào)中有 2 個(gè)品牌顏色。

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

標(biāo)定你的品牌顏色可能會(huì)出現(xiàn)在刻度上的位置。之后當(dāng)你開始細(xì)化顏色梯度時(shí)，這些可以再被調(diào)整。

②吸取鄰近顏色

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

③調(diào)整亮度

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

目標(biāo)是在每個(gè)顏色梯度之間產(chǎn)生明顯的對(duì)比（彩云注：在數(shù)值上并非是等分的，偏亮的部分明度跨度大，偏亮的部分明度跨度?。?/p>

為每個(gè)顏色梯度重復(fù)這個(gè)過程。

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

僅調(diào)整亮度后的結(jié)果

④結(jié)果

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

3. 調(diào)整飽和度

如果我們想要更多或更少的色彩豐富度，我們可以調(diào)整飽和度。調(diào)整飽和度的原則與調(diào)整亮度相同，盡管調(diào)整可能會(huì)更加微妙。在調(diào)整過程中，允許進(jìn)行輕微的亮度調(diào)整，以達(dá)到更好的對(duì)比效果。我告訴你，這個(gè)過程很花時(shí)間，考驗(yàn)?zāi)托摹?/p>

飽和度調(diào)整前后對(duì)比

①品牌色不做任何調(diào)整

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

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

希望你還沒有最終確定所有顏色，因?yàn)樵谶@一步，你可能需要調(diào)整你定義的品牌顏色。

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

①測(cè)試極端情況

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

前景對(duì)比度

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

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

5. 對(duì)所有其他顏色重復(fù)這個(gè)操作

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

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

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

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

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

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

我們新橙色的色相值是 36，所以我在每個(gè)點(diǎn)的色相中輸入了這個(gè)值。我稍微調(diào)整了亮度和飽和度，以防橙色變成褐色。

總結(jié)

設(shè)計(jì)調(diào)整顏色梯度是乏味的，但在為設(shè)計(jì)系統(tǒng)創(chuàng)建堅(jiān)實(shí)基礎(chǔ)方面至關(guān)重要。按下面這 6 個(gè)步驟來做：

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

文章來源：優(yōu)設(shè)網(wǎng)    作者：彩云Sky

分享此文一切功德，皆悉回向給文章原作者及眾讀者.

免責(zé)聲明：藍(lán)藍(lán)設(shè)計(jì)尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請(qǐng)及時(shí)與我們?nèi)〉寐?lián)系，我們立即更正或刪除。

藍(lán)藍(lán)設(shè)計(jì)(m.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的大數(shù)據(jù)可視化界面設(shè)計(jì)、B端界面設(shè)計(jì)、桌面端界面設(shè)計(jì)、APP界面設(shè)計(jì)、圖標(biāo)定制、用戶體驗(yàn)設(shè)計(jì)、交互設(shè)計(jì)、UI咨詢、高端網(wǎng)站設(shè)計(jì)、平面設(shè)計(jì)，以及相關(guān)的軟件開發(fā)服務(wù)，咨詢電話：01063334945。

關(guān)鍵詞：UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司、軟件qt開發(fā)、軟件wpf開發(fā)、軟件vue開發(fā)。