當(dāng)拿到企業(yè)標(biāo)準(zhǔn)色后狰挡，如何基于標(biāo)準(zhǔn)色快速的建立一套可行的界面設(shè)計(jì)配色方案乃秀，HSB色彩模式調(diào)節(jié)法是其中一個(gè)易上手且不容易出錯(cuò)的方法，適合對(duì)配色方案不敏感的設(shè)計(jì)師小伙伴們圆兵，雖然效果不那么出彩，但穩(wěn)重不易出錯(cuò)枢贿，適合針對(duì)具體企業(yè)的項(xiàng)目。
HSB簡(jiǎn)單解釋一下局荚，H代表色相超凳，S代表飽和度，B代表亮度耀态。一眾設(shè)計(jì)師們這里就不用再普及基礎(chǔ)的色彩知識(shí)了轮傍。這里只說(shuō)方法和應(yīng)用。
先聲明一點(diǎn)首装，配色玩的66666的請(qǐng)繞道创夜，此文章枯燥無(wú)味且會(huì)毀了你的設(shè)計(jì)靈感且會(huì)被你不屑一顧。
HSB色彩模式系統(tǒng)的基本原理如下：
基礎(chǔ)色的淺色系調(diào)節(jié)方法：降低飽和度仙逻，增加明度驰吓，色相調(diào)節(jié)值靠近60/180/300涧尿。
基礎(chǔ)色的深色系調(diào)節(jié)方法：增加飽和度，降低明度檬贰，色相調(diào)節(jié)值靠近0（或360）/120/240姑廉。
用張圖片表示一下：
這里面最好理解的是明度的調(diào)節(jié)，增加和降低明度來(lái)實(shí)現(xiàn)深淺色的變化翁涤，那為何要調(diào)節(jié)飽和度呢桥言？而且越淺的顏色飽和度越低？
依舊用圖片說(shuō)明：
我們以中間的顏色為基礎(chǔ)色葵礼，分別依次調(diào)節(jié)兩個(gè)淺色系和兩個(gè)深色系來(lái)進(jìn)行對(duì)比号阿。
第一步，只調(diào)節(jié)明度值章咧，我以10為一個(gè)單位層級(jí)倦西，這里可以明顯的看出顏色的深淺變化。
第二步赁严，繼續(xù)調(diào)節(jié)飽和度扰柠，以5為層級(jí)，會(huì)發(fā)現(xiàn)深淺的變化更加明顯疼约。
第三步卤档，按上面的原理調(diào)節(jié)色相靠近指定色值。由于取色的時(shí)候不小心剛好取了一個(gè)H=0的顏色（補(bǔ)充說(shuō)明程剥，H=0和H=360是相同的）劝枣，而上面說(shuō)過(guò)深色系的調(diào)節(jié)是H靠近0，既然已經(jīng)是0了织鲸，所以深色的調(diào)節(jié)就無(wú)需理會(huì)了舔腾，淺色的話，因?yàn)槭?/360搂擦，所以調(diào)節(jié)的時(shí)候靠近60（以0為基準(zhǔn)）或者300（以360為一準(zhǔn)）都是可以的稳诚，我是以360為基準(zhǔn)，以3為單位層級(jí)瀑踢，得到了最后的漸變色扳还。（如果以0為基準(zhǔn)，則對(duì)應(yīng)的前兩個(gè)顏色的H值分別是H=6和H=3橱夭，這是另外一種配色方案氨距，亦可。）
深淺色和飽和度S的相關(guān)性我們可以借助ps拾色器理解一下棘劣，如下圖俏让，當(dāng)選中S模式時(shí)，很明顯看到隨著S的增加，顏色呈現(xiàn)深→淺的過(guò)程舆驶，當(dāng)S調(diào)節(jié)到0時(shí)橱健，達(dá)到淺色的極致，即白色沙廉。
而關(guān)于調(diào)整色相拘荡，相對(duì)難理解一些，這和每個(gè)顏色專屬的“感知明度”有關(guān)撬陵。從色彩的光亮度來(lái)說(shuō)珊皿，紅、綠巨税、藍(lán)（對(duì)應(yīng)H值0蟋定、120、240）最暗而黃草添、青驶兜、洋紅（對(duì)應(yīng)H值60、180远寸、300）最亮抄淑，這就是調(diào)節(jié)H值的原則，靠近最暗的色相和最亮的色相驰后。也就是說(shuō)肆资，在舉例時(shí)，H=0灶芝，已經(jīng)達(dá)到了深色的極值郑原，而我的向300靠近也就是向光亮度更高的洋紅色靠近。
以HSB色彩模式調(diào)節(jié)系統(tǒng)來(lái)建立基本的以企業(yè)標(biāo)準(zhǔn)色衍生的一系列漸變色夜涕。
運(yùn)用HSB色彩模式調(diào)節(jié)系統(tǒng)來(lái)進(jìn)行一些案例操作犯犁，看一下效果。
先做一個(gè)無(wú)任何配色方案的APP的兩個(gè)界面女器，為了簡(jiǎn)化栖秕，我只在界面中使用基于標(biāo)準(zhǔn)色的一個(gè)淺色和一個(gè)深色，用灰度表示企業(yè)的標(biāo)準(zhǔn)色晓避，深色和淺色則對(duì)應(yīng)了深灰和淺灰。
在網(wǎng)上搜到facebook的標(biāo)準(zhǔn)色為#3b5998只壳，對(duì)應(yīng)HSB的值為221俏拱，61，60吼句。
好了锅必，現(xiàn)在運(yùn)用我們的配色方案，得到標(biāo)準(zhǔn)色+衍生色。
運(yùn)用到界面上的實(shí)際效果如下：
嗯搞隐，看著貌似還不錯(cuò)驹愚，起碼很facebook。
再來(lái)幾個(gè)有代表性的劣纲，比如西門子simense：
比如NVIDIA
比如Airbnb
因?yàn)槲易龅拇颐η液?jiǎn)陋逢捺，所以最后的APP界面“看上去并不是很美”，但不得不說(shuō)的是癞季，這種配色方案很好的代表了企業(yè)的特色劫瞳。
運(yùn)用HSB色彩模式調(diào)節(jié)系統(tǒng)只能作為配色的一種方式，但不是最佳方式绷柒，可以運(yùn)用在企業(yè)級(jí)用戶的設(shè)計(jì)上志于。
好了，作為設(shè)計(jì)師的你废睦，可以參考這套配色原則加以自由發(fā)揮（我在使用的過(guò)程中伺绽，也并不是嚴(yán)格按照加減來(lái)進(jìn)行調(diào)節(jié)，有時(shí)是調(diào)整到自己認(rèn)為舒服的一個(gè)色值）嗜湃，但在實(shí)際的設(shè)計(jì)過(guò)程中奈应，你要考慮的會(huì)更多，比如用于btn的互補(bǔ)色等等净蚤≡孔椋總而言之，配色是很神秘的一種設(shè)計(jì)今瀑，需要在職業(yè)過(guò)程中不斷探索程梦。
