如何制定色彩規范？7個步驟帶你走完實戰流程！

物聯網產品的色彩運用，一般分為主色、輔助色、功能色和中性色。主色與企業品牌色相關；輔助色主要用于區別分類；功能色就是成功提示、警告提示和錯誤提示；中性色主要是背景、文字、線條和線框。系統的色彩規范制定能提升設計師的工作效率。

更多色彩規范制定干貨：

IBMS 是建筑智能管理系統，整個系統的運行中，輔助色和功能色運用較多。系統中時常需要運用顏色區分分類的情況，但是需要保持眾多顏色的整體性。

一、認識 HSB

我們日常使用的軟件調色盤，一般用 HEX、RGB 或是 HSB 三種進行調色。我個人比較喜歡用 HSB 進行調色，可以通過數值判斷顏色的大致情況。

1. 色相（hues）

色相就是色相環的展開圖。如圖所示的色相環展開成平面的色相條，表達方式依然根據色相環的度數一樣來呈現。

2. 飽和度（saturation）

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

3. B：亮度（brightness）

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

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

二、選擇色彩

明白 HSB 的原理后，可以根據其原理選擇具有系統性的色彩。

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

1. 如圖所示，以 10°為基本間隔數值，依次呈現相對應的 36 個飽和度和亮度為 100%的色相。

2. 由于部分顏色較為相似，所以進行篩選后，選定 12 個色相。

接著開始調整飽和度和亮度。上圖的飽和度和明度均為 100%，由于系統會經常展示在大屏中，過于艷麗的色彩顯得刺眼。所以接下來的任務是將飽和度和明度降到一個視覺舒適的狀態。

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

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

中性色系可以看到標號的顏色明顯有些跳躍，所以接下來要調整這些相對比較跳躍的顏色的飽和度和明度。

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

6. 最后我們得到下圖較為系統的色卡。

三、制作顏色梯度

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

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

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

2. 運用這樣的辦法，做好整個色彩的梯度。

四、功能色

IBMS 后臺管理系統中，經常會涉及到功能的區分，例如成功、警告和錯誤。我們用綠色代表成功；橙色代表警告；紅色代表錯誤。一般運用第五梯度的顏色。

五、中性色

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

六、色彩命名

在顏色調整完畢之后，接下來非常重要的是命名，如果公司有完善的命名規范，則可按照公司的規則來命名，如果沒有，那么設計師一定要制定好命名的規則。顏色作為通用組件之一，一般按照“顏色-色相-編號”去命名，例如“color-red-red01”。顏色相關的功能性組件可以額外設定。

七、WCAG 標準驗證顏色

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

方法如圖所示，上圖為標準的用色，下圖為不標準的用色。

總結

運用 HSB 的方法選定色彩，再根據飽和度和明度制作色彩梯度。同理制作中性色的色彩梯度。功能色需要提前定制好，不要與其他顏色混用造成不必要的麻煩，并在項目中做好命名。在使用的過程中，需要運用 WCAG 標準檢驗字體和背景的色彩是否符合標準。這就是個人工作中制定完整的 IBMS 后臺管理系統色彩規范的方法。

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