今天我將告訴大家一個更加簡單高效的技巧去定義一個色板。在星球里還有很多這樣的文章，無論是現有的500+精華文章，還是每天100+設計干貨，我們堅信相信水滴石穿的力量。請看今天的分享，Enjoy it。
a
一套界面需要哪些顏色？
說到色板，我們得首先弄清楚一套APP需要哪幾種色彩，我們從airbnb的色板中，以及很多很多產品中大概可以得出一個公式：品牌色 + 提醒類型顏色（成功，錯誤，警告）+ 中性黑白灰顏色（各種字體，背景，分割線顏色等）
▲在定義了上述大的色彩原理下，我們需要對界面中使用場景進行梳理得出下列大概色彩類型。
a
如何去做呢？
重點來了，那我們如何去做呢？首先，我們先創建3個方塊，這些方塊后面會成為基礎顏色！這里我設置的是被3整除的高度和寬度，我創建了一個300X300的正方形:
接著我們填充3個顏色，紅，綠，藍，為什么是紅，藍綠，因為在色彩體系里面，這三種顏色屬于色光三原色（色光三原色為：紅、綠、藍。光線會越加越亮）
紅，綠，藍怎么定義，大家可以從自己品牌色里面去定一個，然后可以根據HSB的方法去得出同色溫下面的綠和藍！
h值(色相)以15，S和B不變，遞增得到基于品牌色的24個色帶，有人可能會問為什么是24個？因為24X15=360剛好圍繞色環盤一圈。
▲所以我們得到一圈基于品牌色，明度和飽和度一致性的顏色！
▲你也可以依據https://coolors.co/去生成一套藍色或者綠色
第二步
第二步，將這三個方塊橫向等分，因為每個方塊300X300，所以除以3就是100PX
▲將一個矩形與畫板頂部對齊，然后填充微白色，將第二個矩形與畫板底部對齊，填充微黑色，然后將頂部的白色，和黑色透明度調整微20，這樣我們就過得到，三種不同的紅色，綠色，和藍色。
第三步
第三步，我們需要定義垂直等分的區間，我們需要畫2個矩形，這2個矩形的寬度剛好是300X300的三分之一也就是100X100，將他們和正方形的右側對齊。
現在到了這篇文章的核心，就是我們需要將這個顏色改為黃色，很多人可能會好奇，為什么是黃色，因為黃色是色彩的三原色之一（可以參考上面我們通過HSB得出黃色）
調整黃色的模式改為疊加，將其中一個透明度降低為40%，另外一個降低為80%，然后將他們復制到綠色和藍色的畫布上，借助疊加模式，我們得到了明亮和鮮艷的顏色。
第四步
這樣我們就快速的得出了一套色彩體系，然后根據我們的需求選取一部分顏色成為這個色盤體系：
然后添加到我們的整個色盤里面去，同理我們可以得出黑白灰色顏色，比如我們的顏色最黑是#333333
▲頂部20%白色，底部80%黑色得出
▲縱向疊加40%白色，80%白色得出
▲得出文字3個梯度顏色
生成最終色板
▲通過上面的步驟就可以得出整個色板
注意
色彩感覺不好的同學，如果沒有品牌色，或者品牌色搭配出來不太和諧，強烈推薦大家使用這個網站進行配色。
▲他是基于設計師人工智能匹配出來的顏色，都比較和諧，使用起來的，我們隨便試試。
▲在這個網站上輸入一個紅色，鎖定，然后按空格隨機生成顏色，最終確定，藍色，綠色黃色，制作出色盤。
▲得出色盤
關于色彩系統構建的方法就是這樣，不知道大家掌握沒有，希望大家在做設計時候，色彩運用更加科學，一定要自己動手試試！
原文地址：我們的設計日記（公眾號）
轉載請注明：學UI網》這樣做設計，可太香了~
藍藍設計建立了UI設計分享群，每天會分享國內外的一些優秀設計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作，也請與我們聯系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設計尊重原作者，文章的版權歸原作者。如涉及版權問題，請及時與我們取得聯系，我們立即更正或刪除。
藍藍設計( m.skdbbs.com )是一家專注而深入的界面設計公司，為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務