什麼是 HSB 顏色？給 Palette Lab 玩家的一份快速指南

HSB 顏色是一種用 Hue（色相）、Saturation（飽和度）、Brightness（亮度） 描述顏色的方式。它很適合訓練色彩直覺，因為它把顏色拆成三個你本來就在觀察的問題：它屬於哪個色彩家族、它有多鮮豔、它看起來有多亮。

這也是 Palette Lab 在 Toon Tone 中使用 HSB 的原因。大多數人不會憑記憶直接猜一個 HEX 代碼，但調整色相、飽和度和亮度，接近設計師在真實工具裡調色的方式。

如果你在搜尋「HSB 顏色是什麼」「HSB 和 HSV 區別」「HSB 和 HSL 區別」「色相飽和度亮度怎麼調」，可以先把 HSB 理解成一種更接近人眼描述習慣的顏色座標：先找顏色方向，再控制鮮豔程度，最後控制明暗。

HSB 顏色模式是什麼意思？

HSB 顏色模式把一個顏色寫成三個值：

• H：Hue，色相，通常是 0-360 度的角度。
• S：Saturation，飽和度，通常是 0%-100%。
• B：Brightness，亮度，通常是 0%-100%。

舉個簡單例子：一個鮮豔的亮藍色，可能有接近藍色區域的色相、較高的飽和度、較高的亮度。一個灰藍色，色相仍然可能接近藍色，但飽和度會低很多。一個深藍色，色相也可能接近藍色，但亮度更低。

這就是 HSB 的好處：它不要求你先想紅、綠、藍三個通道分別是多少，而是讓你按視覺判斷一步步接近目標色。

HSB 顏色先看色相 Hue

色相決定顏色屬於哪個家族。紅、黃、綠、青、藍、紫，本質上都是色相判斷。

如果一局 Toon Tone 的答案看起來完全不對，通常要先檢查色相。一個顏色可以亮度和飽和度都差不多，但只要色相從青偏到藍，整體感覺就會明顯偏掉。

在色輪上，色相一般按角度理解。0 度和 360 度都回到紅色，中間依次經過黃色、綠色、青色、藍色和紫色。你在設計工具、顏色選擇器或 HSB color picker 裡拖動第一條滑桿時，本質上就是在繞色輪移動。

練習時可以先問自己：這個顏色更偏紅、橙、黃、綠、青、藍，還是紫？如果色相錯了，後面再怎麼調飽和度和亮度，顏色也很難對。

HSB 顏色還要看飽和度 Saturation

飽和度描述顏色有多鮮豔或柔和。高飽和度的橙色會很響亮，低飽和度的橙色可能更接近米色、棕色或灰色。

在圖片調色盤提取器裡，飽和度能幫助你理解為什麼兩個色相接近的顏色，在介面裡會承擔完全不同的角色。一個適合做按鈕，另一個可能更適合作背景點綴。

飽和度降低時，顏色會逐漸遠離「純色」感覺，變得更灰、更柔和、更像中性色。很多品牌色、插畫陰影、背景色並不是單純降低亮度，而是同時降低飽和度，讓顏色不那麼刺眼。

如果你想調出柔和的顏色，不要只把亮度拉高。很多時候更有效的方法是：保持大致色相，降低飽和度，再微調亮度。

HSB 顏色最後看亮度 Brightness

亮度描述顏色看起來有多明亮。實際練習時，亮度是很容易出錯的維度，因為記憶通常更容易保存顏色家族，而不是精確明暗。

如果你想提高 Toon Tone 分數，可以在每輪最後單獨慢慢調整亮度，而不是一直改色相。

在 HSB 裡，亮度接近 0% 時顏色會接近黑色；亮度越高，顏色越接近當前色相和飽和度下的明亮版本。它很適合回答這類問題：這個藍色是亮藍、普通藍，還是深藍？這個紅色是鮮亮的紅，還是更暗的酒紅？

HSB 和 HSV 是一回事嗎？

在大多數設計和程式設計語境裡，HSB 和 HSV 通常指同一套顏色模型。HSV 的 V 是 Value，HSB 的 B 是 Brightness，兩者都在描述同一個「亮度/明度」維度。

所以當你看到這些說法時，通常可以放在一起理解：

• HSB：Hue, Saturation, Brightness
• HSV：Hue, Saturation, Value
• HSBA：在 HSB 基礎上加 Alpha 透明度
• HSVA：在 HSV 基礎上加 Alpha 透明度

需要注意的是，不同軟體可能對介面命名、數值範圍或取整方式有細微差異。比如有的工具把 H 寫成 0-360，有的程式設計 API 會把 H、S、B 都換算成 0-1。概念相同，但複製數值時要確認格式。

HSB 和 HSL 有什麼區別？

HSB 和 HSL 最容易混淆，因為它們都有 H 和 S，也都比 RGB 更接近人類語言。但它們的第三個維度不同：

• HSB 的 B 是 Brightness，關注顏色在當前模型裡的最大通道亮度。
• HSL 的 L 是 Lightness，關注黑到白之間的對稱明度位置。

實際使用時，你可以這樣分：

• 想在設計軟體裡像調色盤一樣快速找顏色，用 HSB/HSV 往往更直覺。
• 想在 CSS 裡寫 hsl()、統一調整介面顏色的 lightness，用 HSL 更常見。
• 想讓顏色在視覺感知上更均勻，可以進一步了解 OKLCH。

一個常見誤區是：HSB 的 brightness 和 HSL 的 lightness 不是完全一樣的數值。兩個顏色看起來類似時，HSB 和 HSL 的第三項可能不同；反過來，第三項相同也不代表視覺明暗一定一致。

HSB、RGB、HEX 分別適合什麼時候用？

HSB、RGB 和 HEX 不是互相替代的關係，更像是同一個顏色的不同表達方式。

RGB 把顏色拆成紅、綠、藍三個通道，適合螢幕顯示、Canvas、影像處理和 JavaScript 色彩計算。HEX 是 RGB 的十六進位寫法，比如 #4F8CFF，適合 CSS、設計標註和品牌規範。HSB 則適合選色、調色、訓練色彩判斷，因為它讓你直接控制色相、飽和度和亮度。

如果你要在網頁裡落地顏色，通常會先用 HSB 或 HSL 找到想要的視覺效果，再複製 HEX、RGB、CSS 變數或 JSON 到專案裡。

怎麼用 HSB 調出想要的顏色？

可以按這個順序調：

1. 先調色相：確定顏色家族，比如橙色、藍色或綠色。
2. 再調飽和度：決定顏色是鮮豔、柔和、偏灰，還是接近純色。
3. 最後調亮度：決定它是淺色、常規亮度，還是深色。

如果顏色「方向不對」，優先改色相。如果顏色「太髒」或「太衝」，優先改飽和度。如果顏色「太輕」或「太沉」，優先改亮度。

在 UI 設計中，這個順序也很實用。比如你要從一個品牌主色延伸出 hover 色、淺背景色或強調色，先保持色相穩定，再調整飽和度和亮度，通常比隨機挑一組 HEX 更可控。

在 Palette Lab 中使用 HSB 顏色

當你想訓練色彩記憶時，可以玩 Toon Tone。當你想把圖片轉成專案可用的顏色時，可以使用 Palette Lab 圖片調色盤提取器，複製 HEX、RGB、HSB、OKLCH、CSS 變數和 JSON。

遊戲和工具放在一起，能讓 HSB 顏色不再抽象：你可以猜一個顏色、對比結果、提取真實調色盤，然後繼續練習。

更具體地說：

• 用 Toon Tone 練習「看到一個缺失顏色後，如何用 HSB 三個維度把它還原出來」。
• 用圖片調色盤提取器觀察真實圖片裡的主色，比較它們的 HEX、RGB、HSB 和 OKLCH。
• 把提取到的顏色複製成 CSS 變數或 JSON，用到網頁、原型、設計系統或小遊戲裡。

HSB 顏色常見問題

HSB 適合網頁 CSS 嗎？

CSS 原生更常見的是 HEX、RGB、HSL、OKLCH 等寫法。HSB 本身不是最常用的 CSS 函數，但你可以用 HSB 作為選色和理解顏色的工具，再把結果轉換成 HEX、RGB、HSL 或 OKLCH。

HSB 裡的亮度等於人眼感知亮度嗎？

不完全等於。HSB 的 brightness 是模型裡的亮度維度，不是嚴格的人眼感知亮度。不同色相在同樣 HSB 亮度下，看起來可能仍然有明暗差異。做可讀性、對比度和無障礙檢查時，不要只看 HSB 亮度。

為什麼兩個 HSB 數值接近的顏色，看起來差很多？

可能是色相跨過了敏感區域，也可能是飽和度和亮度的組合改變了顏色角色。比如高飽和高亮度的黃色會很醒目，但同樣高亮度的低飽和黃色可能更像柔和背景。顏色是否好用，不只看單個數值，也要看它和周圍顏色的關係。

學 HSB 對設計和繪畫有什麼幫助？

它能讓你更快說清楚顏色問題：不是籠統地說「這個顏色不對」，而是判斷它是色相偏了、飽和度太高，還是亮度太低。無論你是在做 UI、畫插畫、配品牌色，還是玩 Palette Lab 的顏色猜測遊戲，這種拆解都能提高調色效率。