為什麼顏色猜謎遊戲中 HSB 勝過 RGB
當我們打造 Toon Tone 時，最重要的介面決定是：滑桿要代表哪一種色彩模型？RGB 是顯而易見的預設選項——每個螢幕就是用它來繪製像素的——但對一款要求人類猜顏色的遊戲來說，它卻是災難般的錯誤選擇。這篇文章解釋我們為什麼改採 HSB，以及為什麼每一款顏色猜謎遊戲都該這麼做。
兩種色彩模型，三十秒講完
RGB 用一個顏色發出多少紅光、綠光與藍光來描述它。每個通道從 0 到 255。(255, 0, 0) 是純紅。(255, 255, 0) 是黃色，因為紅光和綠光在螢幕上加起來就是黃色。這個模型對硬體來說是正確的：你螢幕的次像素確實就是這麼運作的。
HSB（也叫 HSV）用色相（0–360°，在色環上的位置）、飽和度（0–100，有多鮮豔）和亮度（0–100，有多明亮）來描述顏色。(0, 100, 100) 就是同樣的純紅。(60, 100, 100) 是黃色，因為你把色相轉盤轉了 60 度。這個模型對硬體來說是錯的，但對人類直覺來說卻是對的。
RGB 不適合顏色猜謎遊戲的三個理由
1. RGB 不符合人類描述顏色的方式
請任何人描述一個顏色，他會說「更深一點的紅」、「更偏橘的黃」，或「褪色的藍」。沒有人會說「多 30% 綠色的顏色」。連從第一天就學 RGB 的專業設計師，談顏色時也是用 HSB 的詞彙。顏色的語彙是色相、飽和度和亮度的語彙——三個旋鈕，不是三道光的強度。
如果滑桿不符合玩家的心智模型，玩家就得在腦袋裡做算術才能用它。在回憶任務中還要心算，是最糟糕的 UX。Toon Tone 的玩家必須盡快把記憶中的顏色丟進介面；HSB 讓他們一步就能做到（轉色相）,RGB 卻逼他們做三步。
2. RGB 滑桿的行為不像它們看起來那樣線性
把紅色通道從 100 拉到 200，色塊幾乎不變。把綠色從 100 拉到 200，色塊卻跳到完全不同的家族。眼睛對三原色的敏感度並不相同——綠色主導感知亮度，藍色貢獻最少。RGB 滑桿外觀一模一樣，但每移動一單位產生的視覺變化卻天差地遠。
對猜謎遊戲來說，這種不對稱是致命的。玩家把綠色多拉了 20，色塊就認不出來了；同樣的超量在紅色上幾乎沒感覺。評分在不同色相之間變得不公平。
3. RGB 沒有把玩家真正在意的維度分離出來
猜錯的玩家想知道自己在哪個維度錯了。用 HSB 拆解分數就很清楚：「色相猜對了，但飽和度高了 20 分。」這是可行動的回饋。用 RGB 拆解就是：「紅色高了 14、綠色低了 22、藍色高了 8。」對人類來說毫無意義。
色彩理論告訴我們，色相、飽和度和亮度是獨立的感知軸。RGB 的軸不是感知的，是硬體的。好的 UX 會讓使用者更認識自己；HSB 讓使用者知道他低估了飽和度。RGB 什麼也沒教。
為什麼不選 Lab 或 OKLab
這是個我們糾結了一週的誠實問題。Lab 和 OKLab 是感知上均勻的——相同的數值距離對應到相同的感知差異，這會讓評分比 HSB 還公平。但有兩個實務問題：
- Lab 不直覺。L 通道是亮度，但 a 與 b 是「綠—紅」和「藍—黃」軸，沒有任何非專業使用者看得懂。玩家光是要知道滑桿該往哪邊拉，都得先看一份教學。
- Lab 有色域外區域。有些 Lab 三元組對應不到任何能顯示的 RGB 顏色。會產生無效顏色的滑桿是可用性的惡夢。
所以我們在介面上用 HSB，底下用感知距離指標來算分——兩全其美。
計分函式，簡述
Toon Tone 在 HSB 空間裡計算猜測與目標之間的加權距離，把每一次猜測打在 0 到 10 分的尺度上：
score = 10 - 0.4 * |Δ色相 標準化| - 0.3 * |Δ飽和度| - 0.3 * |Δ亮度|色相的權重稍微重一些，因為色相猜錯是最具診斷價值的錯誤——亮度錯了還在同一個顏色家族；色相錯了就代表你記錯角色了。權重值經過微調，讓 7.0 給人「猜中家族」的感覺、8.5 給人「設計師會勉強放行」的感覺，而 9.5 以上則是「神級眼力」的感覺。
這對其他遊戲設計師代表什麼
如果你正在做一款顏色猜謎遊戲，結論很簡單：
- 輸入 UX 使用 HSB 滑桿。
- 用 HSB 或感知指標計分——絕對不要用原始 RGB 歐氏距離。
- 在結果卡上顯示 H/S/B 三軸的拆解，讓玩家了解自己在哪一維度比較弱。
- 抵抗住加上第四個 alpha 滑桿或花俏 color picker 的誘惑——三個滑桿，正是回憶任務該有的複雜度。
如果你是玩家，正在納悶為什麼 Toon Tone 跟你試過的其他顏色遊戲感覺不一樣——這就是大半的原因。