一套產(chǎn)品色彩需要有哪幾種色彩：品牌色+提醒類型顏色（成功、錯(cuò)誤、警告）+中性黑白灰顏色（各種字體、背景、分割線顏色等）

那么用到的色彩類型：

• 品牌色
• 品牌黑
• 內(nèi)容底色
• 全局底色
• 分割底色
• 圖標(biāo)色
• 文字鏈接可點(diǎn)擊顏色
• 提示信息
• 錯(cuò)誤提示
• 錯(cuò)誤提升

文字顏色

• 重要文字
• 常規(guī)文字
• 輔助文字 1
• 輔助文字 2
• 反白文字或圖表
• 次要的反白文字或圖表

分割線

常規(guī)分割線（10%）、強(qiáng)調(diào)分割線（30%）、最弱分割線（5%）

反白：常規(guī)分割線（10%）、強(qiáng)調(diào)分割線（30%）、最弱分割線（5%）

如何確定品牌顏色

選取品牌色方面，選擇公司 logo 色是最為保險(xiǎn)的，便于與公司的品牌標(biāo)識保持一致，具有更好的辨識度。如果因?yàn)槌鲇诠镜漠a(chǎn)品戰(zhàn)略要求，需要跟公司其他的產(chǎn)品有所區(qū)分，更多的還是要考慮到產(chǎn)品本身的特征，比如醫(yī)療方面多用藍(lán)色、綠色，給用戶一種安全、可靠；購物產(chǎn)品用色多為鮮艷，主要目的是要激起用戶的購買欲。

首先，我們確定主色為：

在獲取品牌色色階之后，選取其中的幾個(gè)顏色用于產(chǎn)品中進(jìn)行不斷的嘗試與評定，最終確定：

輔助色選擇

根據(jù) HSB 的方法去得到同色溫下面的 24 色：

以 H 值（色相）以 15，S 和 B 不變，遞增到基于主色的 24 個(gè)色帶，原理就是 15/360=24，正好圍繞色環(huán)一盤。

色盤

輔助色是豐富應(yīng)用中的次要色彩，它會包含一到若干個(gè)和主色不同的色彩，除了品牌傳達(dá)外，具有更強(qiáng)的實(shí)用性。

真正的輔助色的選擇是根據(jù)實(shí)際場景功能來確定的，

比如通知、提醒、取消用大紅色，確認(rèn)、同意用綠色或者藍(lán)色，收藏、打分、評價(jià)用橙黃色。都是已經(jīng)在用戶心智中建立了標(biāo)準(zhǔn)的用色類型。

從色環(huán)中吸取紅、黃、綠三種顏色，在這四種顏色之上覆蓋純黑色#000，混合模式再選色相，這樣就能看出他們是否是在同一個(gè)明度之上，再根據(jù)實(shí)際的需求進(jìn)行矯正，比對，調(diào)至舒服為止。

將選擇好的輔助色進(jìn)行明度與對比度的變化，得出相應(yīng)的色階，如果不確定色階是否科學(xué)合理，也可以利用色彩工具，比如 Antdesign 的配色工具，F(xiàn)igma 里面也有很多配色插件，這些都可以快速獲得相應(yīng)的色階。根據(jù)實(shí)際的應(yīng)用場景再進(jìn)行合理的配色。

中性色的選擇

中性色通常與文字色匯總為一個(gè)灰色模塊，通常包括背景色、分割元素色、反饋色、禁用色。背景色在使用卡片設(shè)計(jì)模式時(shí)必然會用到，一般為帶有一點(diǎn)主色的淺灰色。

分割元素色包括常見的線框元素、線性分割元素、面型分割元素。反饋色包括 hover、press、highlight 多種反饋顏色。中性色讓整個(gè)頁面更加富有層級感。

中性色的配置，就是制定一個(gè)由深到淺的灰度階梯，應(yīng)用在對應(yīng)權(quán)重的元素上，色彩輕重的主要判斷依據(jù)是 HSB 中的 B（明度） 值。

中性色雖然指的是無個(gè)性，但并不是只能用純灰色，常見的一種做法，就是為中性色添加適量的藍(lán)色飽和度，提升觀看體驗(yàn)（滿足 RGB 的某種特性）。

根據(jù)選定的品牌色，利用上述的中心色選擇方法，進(jìn)行中性色的選配：

利用之前的作品或者現(xiàn)有的設(shè)計(jì)頁面，進(jìn)行不斷的搭配調(diào)試，確保整體頁面效果為最佳。當(dāng)然，我們也要考慮到一些特殊的場景使用，如果現(xiàn)階段并沒有出現(xiàn)復(fù)雜或者特殊的應(yīng)用場景時(shí)，我們可以先統(tǒng)一一致用色。隨著產(chǎn)品的不斷完善與迭代，有可能現(xiàn)在的中性色并不能滿足需求時(shí)，要及時(shí)做到調(diào)整與更新，確保整體的一致性與統(tǒng)一型。

文字色

在實(shí)際的應(yīng)用場景中，文字色的色階可以劃分 3-5 個(gè)階梯：重要的標(biāo)題和正文、輔助內(nèi)容的次要文案、次要等級文字、及需要進(jìn)一步弱化的最次級文字。當(dāng)然在命名文字色的時(shí)候，你可以用一級色、二級色、三級色、或者其他的命名規(guī)則去定義每個(gè)階梯色。另外還有帶有特殊語義的文字用色，例如鏈接文字用色、強(qiáng)調(diào)文字用色等。

文字色的強(qiáng)弱代表了該信息的重要程度，同時(shí)也表現(xiàn)出信息的層級與邏輯關(guān)系，傳遞給用戶是如何能夠正確、快速的找到所需信息。同時(shí)，文字色也對其是否具有可操作性進(jìn)行釋義說明，這就要求文字色各個(gè)色階之間的對比明顯，語義清晰。

Sam Gordain 在 Medium 上有一篇文章《Pick Better Colors with the Hue Shift Method》中很好的講述了其階梯顏色選取規(guī)則與技巧的關(guān)鍵理論?？偨Y(jié)下來即，想要由一個(gè)基礎(chǔ)顏色拆分出一套梯級配色，在通過調(diào)整透明度或明度的同時(shí)調(diào)整色相、飽和度、明度三個(gè)屬性，這樣最終生成的一套梯級配色會更加協(xié)調(diào)，過度更為自然。

文章鏈接：https://medium.muz.li/natural-color-palettes-7769e5b38ecd

在做配色時(shí)，我們大都知道如何利用同類色、類比色、中差色、對比色、互補(bǔ)色等這樣的配色規(guī)則去搭配色彩。但在實(shí)際的工作中，其實(shí)這些知識并不能滿足我們的需要，尤其是跟幾個(gè)設(shè)計(jì)師共同完成一個(gè)項(xiàng)目時(shí)，就會出現(xiàn)很多問題：輔助色、文字色、背景、分割線、陰影等方面差異，導(dǎo)致的結(jié)果就是不能保證視覺上的一致性。

在很多的設(shè)計(jì)網(wǎng)站上，輸入“配色”進(jìn)行搜索，就能看到很多有關(guān)配色的文章，大家從很多原理、理論性的方面進(jìn)行討論，但是對于如何進(jìn)行配色、配色的過程詳細(xì)的進(jìn)行描述的文章很少。我們在找了很多參考文章、配色理論與配色工具之后，結(jié)合實(shí)際應(yīng)用場景，進(jìn)行配色。希望這篇文章能夠給有相同疑惑的設(shè)計(jì)師一些幫助。

參考的文章：

• 《10 年經(jīng)驗(yàn)總結(jié)的高效 UI 配色策略》酸梅干超人
• 《Ant Design-色彩》
• 《揭密可視化專家配色秘笈，你在乎的顏色遠(yuǎn)遠(yuǎn)不夠》作者：白弦，螞蟻集團(tuán)設(shè)計(jì)師
• 色彩工具：Ant Design 中色彩工具；Figma 中的 colo rshades 插件；Figma 中 Palettes 插件