物聯(lián)網(wǎng)產(chǎn)品的色彩運(yùn)用，一般分為主色、輔助色、功能色和中性色。主色與企業(yè)品牌色相關(guān)；輔助色主要用于區(qū)別分類；功能色就是成功提示、警告提示和錯(cuò)誤提示；中性色主要是背景、文字、線條和線框。系統(tǒng)的色彩規(guī)范制定能提升設(shè)計(jì)師的工作效率。

IBMS 是建筑智能管理系統(tǒng)，整個(gè)系統(tǒng)的運(yùn)行中，輔助色和功能色運(yùn)用較多。系統(tǒng)中時(shí)常需要運(yùn)用顏色區(qū)分分類的情況，但是需要保持眾多顏色的整體性。

一、認(rèn)識(shí) HSB

我們?nèi)粘Ｊ褂玫能浖{(diào)色盤，一般用 HEX、RGB 或是 HSB 三種進(jìn)行調(diào)色。我個(gè)人比較喜歡用 HSB 進(jìn)行調(diào)色，可以通過數(shù)值判斷顏色的大致情況。

1. 色相（hues）

色相就是色相環(huán)的展開圖。如圖所示的色相環(huán)展開成平面的色相條，表達(dá)方式依然根據(jù)色相環(huán)的度數(shù)一樣來呈現(xiàn)。

2. 飽和度（saturation）

以紅色為例，飽和度越多，則紅色越多；飽和度越少，則紅色越少，趨近白色。

3. B：亮度（brightness）

以紅色為例，亮度越高，則紅色越純；亮度越低，則紅色越混，趨近黑色。

HSB 的色值就是根據(jù)色相、飽和度和亮度組成，只要記得色相的大概方位，搭配飽和度和亮度，基本能判定顏色。

二、選擇色彩

明白 HSB 的原理后，可以根據(jù)其原理選擇具有系統(tǒng)性的色彩。

首先，保持飽和度和亮度為 100%的情況下，改變色相的數(shù)值。理論上是數(shù)值和顏色一一對(duì)應(yīng)，但是并不是每個(gè)數(shù)值都能正常顯示出相應(yīng)的顏色，我們需要確定安全數(shù)值的顏色，即該數(shù)值能正常顯示出來的顏色。

1. 如圖所示，以 10°為基本間隔數(shù)值，依次呈現(xiàn)相對(duì)應(yīng)的 36 個(gè)飽和度和亮度為 100%的色相。

2. 由于部分顏色較為相似，所以進(jìn)行篩選后，選定 12 個(gè)色相。

接著開始調(diào)整飽和度和亮度。上圖的飽和度和明度均為 100%，由于系統(tǒng)會(huì)經(jīng)常展示在大屏中，過于艷麗的色彩顯得刺眼。所以接下來的任務(wù)是將飽和度和明度降到一個(gè)視覺舒適的狀態(tài)。

3. 首先把飽和度降到 90%得到下面的色卡。

4. 其次在色卡上疊加一層純黑色（#000000），并把疊加模式改成色相，得到下面的色卡。

中性色系可以看到標(biāo)號(hào)的顏色明顯有些跳躍，所以接下來要調(diào)整這些相對(duì)比較跳躍的顏色的飽和度和明度。

5. 除了較為明顯的顏色可以用疊加黑色的方法來修改，其他顏色也要進(jìn)行視覺修正。最好是以 2 為單位進(jìn)行微調(diào)，直到達(dá)到較為完善的效果。

6. 最后我們得到下圖較為系統(tǒng)的色卡。

三、制作顏色梯度

IBMS 后臺(tái)管理系統(tǒng)中，時(shí)常有同一個(gè)顏色需要用不同級(jí)別的情況。我們可以按照以上的步驟把所有的顏色的層級(jí)都列出來，用的時(shí)候直接從中選取就可以。但是，這樣修改顏色的時(shí)候會(huì)有較大的工作量，所以為了工作的便利，以下運(yùn)用改變透明度的方法形成顏色梯度。

1.  一般情況下，把一個(gè)色相分為 10 個(gè)梯度。當(dāng)前的顏色為第五梯度，需要加深 4 個(gè)，減淡 5 個(gè)。以紅色為例。

以紅色為中心，前面四個(gè)梯度是疊加黑色，并從小到大依次增加透明度形成紅色的從淺到深。后面五個(gè)梯度是疊加白色，并從小到大依次增加透明度形成紅色的從深到淺。由此以后更改顏色的只要調(diào)整紅色就可以調(diào)整紅色的 10 個(gè)梯度。

2. 運(yùn)用這樣的辦法，做好整個(gè)色彩的梯度。

四、功能色

IBMS 后臺(tái)管理系統(tǒng)中，經(jīng)常會(huì)涉及到功能的區(qū)分，例如成功、警告和錯(cuò)誤。我們用綠色代表成功；橙色代表警告；紅色代表錯(cuò)誤。一般運(yùn)用第五梯度的顏色。

五、中性色

中性色的制作與有彩色的方法一樣，通過更改疊加色的透明度來形成最后的梯度色彩。如圖所示，在白底上，疊加黑色，依次改變黑色的透明度，實(shí)現(xiàn)中性色的梯度。在此需要注意的是，疊加的黑色為冷色調(diào)。背景、線條、線框和文字用冷色系與其他有彩色有相互平衡的作用。左側(cè)第一個(gè)為純黑色，接下來的中性色是依次改變黑色透明度的方法得到。

六、色彩命名

在顏色調(diào)整完畢之后，接下來非常重要的是命名，如果公司有完善的命名規(guī)范，則可按照公司的規(guī)則來命名，如果沒有，那么設(shè)計(jì)師一定要制定好命名的規(guī)則。顏色作為通用組件之一，一般按照"顏色-色相-編號(hào)"去命名，例如"color-red-red01"。顏色相關(guān)的功能性組件可以額外設(shè)定。

七、WCAG 標(biāo)準(zhǔn)驗(yàn)證顏色

為了能夠讓視覺障礙人群正常的閱讀信息，所以我們都會(huì)用 WCAG 標(biāo)準(zhǔn)驗(yàn)證所選的顏色是否合適。其中適用性原則就是文本顏色與背景顏色的比值不能低于 4.5:1。測試的網(wǎng)站很多，只要輸入色彩的 HEX 值即可。以下是我自己常用的測試網(wǎng)站：https://contrastchecker.com/

方法如圖所示，上圖為標(biāo)準(zhǔn)的用色，下圖為不標(biāo)準(zhǔn)的用色。

總結(jié)

運(yùn)用 HSB 的方法選定色彩，再根據(jù)飽和度和明度制作色彩梯度。同理制作中性色的色彩梯度。功能色需要提前定制好，不要與其他顏色混用造成不必要的麻煩，并在項(xiàng)目中做好命名。在使用的過程中，需要運(yùn)用 WCAG 標(biāo)準(zhǔn)檢驗(yàn)字體和背景的色彩是否符合標(biāo)準(zhǔn)。這就是個(gè)人工作中制定完整的 IBMS 后臺(tái)管理系統(tǒng)色彩規(guī)范的方法。

工作中一直保持學(xué)習(xí)的狀態(tài)，很多個(gè)人認(rèn)為好用的方法取自別人的分享，非常感謝前輩們傾囊相授。做好分享，希望大神們多多指教，也希望能為其他人提供一些靈感，最重要的是作為自己工作學(xué)習(xí)的總結(jié)。

作者：九馡馡