HSB色彩模型在設計中的運用

對許多設計師來說，配色可能是一項體力活，每到配色這一步前後測試了無數版本依然調不出滿意的顏色。

後來我們學會了偷懶的方法，直接在現有界面上吸取顏色。但這並不是長久之計，每個產品的配色方案都應該是獨一無二的。色感好的人可以靠感覺輕鬆配出漂亮的顏色，但色感差的我們就需要掌握這其中科學的方法，因為任何事物都是有規律的，只要找到了其中的規律並加以運用練習，我們就能迅速的掌握這一技能。

今天我會介紹一種運用HBS色彩模型的配色方法，以及在APP色彩規範上的運用，同時結合目前主流產品的配色，結合該模型進一步的分析講解。這個模型也是許多BAT設計團隊推薦的配色模型，使用這個色彩模型能幫助我們在調色時對顏色有明確的心理預期，幫助我們快速高效的搭配出科學美觀的色彩。

什麼是hsb？

HSB是一種將RGB色彩模型中的點放在圓柱坐標系中的表示方法，在概念上可以被認為是色彩的圓柱體(黑色在下白色在上)。如下圖所示，圓柱的中心軸為灰色，以中心軸為角度變化的值稱為「色相(H)」，到中心軸距離變化的值稱為「飽和度(S)」，而沿著中心軸高度變化則稱為「亮度(B)」或「明度(V)」。

HSB色彩模型以直觀的方式表達了關於顏色的信息：「這是什麼顏色？深淺如何？明暗如何？」。通過該模型，我們只需通過簡單的數字就能輕鬆判斷出該數值的顏色，這是十六位進位碼所做不到的。下面分別演示三種數值的變化帶來色彩的改變。

色相（Hue）是色彩的相貌，也就是我們常說的紅、橙、黃、綠等顏色名稱。色相值按位置度量，在HSB色彩模型中紅色為0°，黃色為60°，綠色為120°，青色為180°，藍色為240°，品紅色為300°。十二色相環每一色相間距30°，二十四色相環每一色相間距15°。

飽和度（Saturation）表示色彩的純度，取值範圍0～100%，從色環中心向外遞增。當飽和度為0時點在中心，則顯示為灰、白、黑無彩色。當飽和度達到100%時，點則移動到色環邊緣，會顯示每個色相最純的色光。如下圖所示，在色相(H)、亮度(B)不變的情況下減少飽和度(S)顏色逐漸變淡最後變成白色。

亮度（Brightness）指色彩的明亮度，取值範圍0～100%，沿著圓柱體底部向上遞增。亮度為0時即黑色，點處於最底部。當達到100%時點上升到頂端，會顯示色相最鮮明的狀態。如下圖所示，在色相(H)、飽和度(S)不變的情況下減少亮度(B)顏色逐漸變暗最後變成黑色。

HSB在UI中的運用

通過上述的講解，我相信你一定對HSB模型有了基本的認識。但可能你還是不太了解如何具體運用在項目中。下面我將演示通過運用該模型來制定一套色板。

在線上產品色彩規範中，一般會包含主色、輔色、灰度色。主色一般使用app圖標中的品牌色。輔色則會使用主色的對比或者鄰近色。我們以iOS規範中的紅色為例。在色環上加減15°～30°可以得到一組鄰近色板，加減120°則會得到一組互補色板。在實際運用中可以上下浮動20°左右，達到視覺協調的最佳狀態，再配合明暗的變化，可以使色彩更有韻律和協調。

灰度色在app頁面中也會被大量使用。合理的運用灰度色能夠令頁面信息具備良好的主次層級關係，提升瀏覽體驗。灰度色包含黑、白、灰，在灰度色值中色相(H)和飽和度(S)都為0，只需改變亮度(B)值。上文中我們有了解到，當亮度(B)為0時即黑色，點處於最底部。當達到100%時點上升到頂端，會顯示色相最鮮明的狀態。我們只需通過亮度(B)值的規律變化可以輕易的調色出一套簡單好記的色板。

在漸變色中的運用

HSB模型對漸變色的搭配也非常方便，許多APP頁面的導航ICON會運用微漸變背景提升質感，通過HSB模型會發現其中微妙的關係。通過飽和度由低到高產生的飽滿的漸變質感。以及配合色相角度的變化。色相環中越接近的色相漸變出來的顏色越自然。明度值(B)控制在75%以上色彩會更加通透，不會顯臟。

實際項目中的分析

最後通過HSB模型對目前線上產品的部分顏色吸取，仔細分析會發現其中許多相似之處。

支付寶主色為冷靜的藍色，使用互補的暖色系圖標給頁面增添了活力，仔細觀察主色H值與輔色色相(H)值分別處於色環中加減165°左右的位置。

同色系搭配的小紅書主色相(H)值十分接近，主要通過改變降低飽和度(H)來突出價格和標籤。

嚴選整體配色素雅，顏色使用上十分克制。標籤使用了和主色距離30°的鄰近色黃來突出信息。

以上色值為sketch吸取，與實際可能存在偏差，主要是給大家提供一種思路，並沒有絕對的方法和公式。

結語

雖然目前各種配色工具越來越多，我們可以在幾秒內就能迅速得到一個很好的配色方案，但作為設計師的我們了解色彩的基本理論是很有必要的。在實際的設計過程中，會遇到各種各樣的問題，要考慮的因素也會十分複雜。配色是理性與感性的結合，我們需要做的只是在兩者間找到平衡。熟悉配色原則能幫助我們快速解決相關問題，提升工作效率。

通過上述講解，你應該了解了HSB顏色模型的基本概念。我們知道紅色處於360°色相環中的起點與結尾處，那麼我們常說的紅色的對立色為綠色，也稱為補色，那通過配色理論綠色應處於紅色0°正對面的中央180°處，那麼為什麼在色環中180°並不是綠色而是青色呢？

本文由 @李惠丸 原創發佈於人人都是產品經理。未經許可，禁止轉載。

題圖來自PEXELS，基於CC0協議

推薦閱讀：