標準的 RGB 轉 HSV 對照圖將任何 8 位元 RGB 三元組(也就是介於 0 到 255 之間的三個整數)對應到一個介於 0 到 360 度的色相角度、一個飽和度百分比,以及一個明度百分比,這三者以多數選色器所用的色輪格式描述同一個顏色。這個色輪有六個值得記住的固定地標:紅色在 0°、黃色在 60°、綠色在 120°、青色在 180°、藍色在 240°,以及洋紅在 300°。在這些主要與次要的位置上,飽和度為 100%、明度也是 100%,因為其中一個或兩個通道是完全開啟的。黑色位於色相 0、飽和度 0%、明度 0%,而完全均勻的中灰色則位於色相 0、飽和度 0%、明度 50.20%,因為每個通道等於 255 中的 128。其他所有的 RGB 三元組都落在這些錨點之間,而 RGB 轉 HSV 轉換器會為任何輸入解算出確切的角度與百分比,而不是強迫你從靜態表格內插。轉換器會將每個通道除以 255,選出最大的通道來計算明度,從最大值與最小值之間的差距導出飽和度,並依據哪個通道佔優勢挑選色相公式分支,同時將負的角度包裝到非負的範圍內。

RGB 與 HSV 以不同的語言描述同一個顏色
RGB 三元組說明紅、綠、藍三色光如何組合以構成螢幕上的一個像素。每個通道都是介於 0 到 255 之間的整數,因此整個色彩空間包含 256³ = 16,777,216 個不同的三元組。HSV 將同一個三元組重新圍繞三個屬性組織,而手動調整顏色時,這三個屬性通常感覺更直覺。色相是色輪上的一個角度,用以識別主要的色調。飽和度衡量該顏色在目前亮度下距離灰階軸的程度。明度記錄的是正規化後最強通道的亮度。
這種重新表述正是 HSV 成為 Photoshop、Figma、Sketch、GIMP 以及大多數瀏覽器式調色工具中選色器預設模型的原因。設計師可以轉動色相滑桿,而不是在心裡平衡三個強度滑桿。代價在於 HSV 只是一種座標轉換——顏色的額外資訊既不會增加也不會遺失——其結果仍然代表 RGB 三元組所會產生的同一個 sRGB 像素。同一個演算法在每個符合規範的實作中都會產生相同的對照表項目。
固定的色輪數值:RGB 轉 HSV 參照表
任何 HSV 實作,包括 RGB 轉 HSV 轉換器在內,都會為色輪上六個地標位置,再加上黑色與中灰色,產生相同的標準座標。這些是多數對照表式參考所複製的數值,因為其他所有的輸入都落在它們之間的漸層上。下表使用精確的 0–255 整數、標準的兩位小寫 HEX,以及轉換器所顯示的角度、飽和度與明度範圍。
| RGB 三元組 | HEX | 色相 | 飽和度 | 明度 |
|---|---|---|---|---|
| 255, 0, 0 | #ff0000 | 0° | 100% | 100% |
| 255, 255, 0 | #ffff00 | 60° | 100% | 100% |
| 0, 255, 0 | #00ff00 | 120° | 100% | 100% |
| 0, 255, 255 | #00ffff | 180° | 100% | 100% |
| 0, 0, 255 | #0000ff | 240° | 100% | 100% |
| 255, 0, 255 | #ff00ff | 300° | 100% | 100% |
| 0, 0, 0 | #000000 | 0°(佔位符) | 0% | 0% |
| 128, 128, 128 | #808080 | 0°(佔位符) | 0% | 50.20% |
中灰色那一列說明了為什麼這個對照表將明度視為百分比,而非介於 0 到 255 的亮度計數。整數 128 對應到 128/255 ≈ 0.5020,顯示為 50.20%。任何偏離這八個標準列的項目——例如品牌橘色 (200, 100, 50)——並沒有固定的對照表項目。它的色相與百分比只有在執行演算法後才會出現,這正是計算器所扮演的角色。
一個簡短的算例,用以展示演算法如何延伸超越地標。取 RGB (200, 100, 50)。將每個通道除以 255 得到 (0.7843, 0.3922, 0.1961)。最大值為 0.7843,因此明度 = 78.43%。最大值與最小值之間的差距為 0.5882,因此飽和度 = 0.5882 / 0.7843 = 0.7500 = 75.00%。因為紅色是佔優勢的通道,色相使用公式 60 × ((G − B) / delta) = 60 × ((0.3922 − 0.1961) / 0.5882) = 60 × 0.3333 = 20.00°。以相同的輸入讀取 RGB 轉 HSV 轉換器會確認 h = 20.00°、s = 75.00%、v = 78.43%。
如何以三個步驟將任何 RGB 轉換為 HSV
- 在三個輸入欄位中輸入整數的紅、綠、藍通道值。每個欄位接受介於 0 到 255 之間的有限整數;小數、空欄位、負數,以及超過 255 的數值會明確地引發錯誤,而不是被四捨五入或限制。
- 選擇 Convert to HSV。結果面板會顯示以度數表示的色相(0 到 360)、以百分比表示的飽和度、以百分比表示的明度、經過正規化的 HSV 表示法(h、s、v 各自在 0–1 的尺度上)、來源的 HEX 字串,以及一個視覺色塊。
- 讀出色相、飽和度與明度。在複製之前,請將顯示的百分比與目的地應用所預期的格式進行比較——有些應用程式將色相儲存為 0–179 或 0–255 的整數範圍,有些則預期 0–1 的分數,有些則如本頁所示顯示度數與百分比。
因為輸入值在轉換後仍維持可見,你可以編輯單一通道並重新執行計算,以觀察三個 HSV 元件如何回應。這種並列比較就是使用即時轉換器而非印刷對照表的實際理由,特別是在反覆調整配色的時候。
為何無彩度顏色總是落在飽和度為零
當三個通道相等時——黑色 (0, 0, 0)、中灰色 (128, 128, 128)、白色 (255, 255, 255),或是介於其中的任何灰色——最大值與最小值會相同,因此差距為零。沒有差距的情況下,飽和度公式在黑色處塌縮為 0/0,在其他情況則為 0/max,兩者皆定義為零。在灰色上,色相在視覺上沒有意義,因為色輪上沒有可以指向的主要色調。
轉換器透過回報慣例上的佔位符色相 0° 來解決這個模糊之處。這個選擇與 Android Color 說明文件中的 rgb2hsv 函式,以及 R grDevices 的慣例一致,而這兩個正是此工具所對照過的實作。任何比較兩個灰色的人都會看到相符的色相值與飽和度 0%,因此這個佔位符並不會干擾相對比較。若需要更深入地探討諸如接近無彩度的顏色以及色相迴圈等邊緣情況,色相尺度與邊緣情況指南會逐步帶過更多例子。
度數、分數或整數:選擇正確的輸出尺度
在實務上存在三種 HSV 儲存慣例,而同一個顏色依目的地的不同往往需要不同的數值:
- 如本頁所示的度數與百分比。色相 0–360°、飽和度 0–100%、明度 0–100%。
- 許多圖形 API 與著色器語言所使用的零到一分數。在這種慣例下,同一個顏色會被儲存為色相 0.5、飽和度 0.75、明度 0.78。
- 影像處理程式庫所使用的精簡整數範圍。OpenCV 將色相儲存為 0–179,因此 120.00° 的色相在其內部 Mat 中會變成 60。
顯示為 80.90% 的飽和度,在零到一的 API 中對應到 0.809,而非整數 80,除非該程式明確預期百分比。若目的地預期的是 HSL,則應將原始 RGB 透過專用的 HSL 轉換器來處理,而不是重新標記 HSV 的明度通道——HSV 的明度追蹤的是經過正規化的 RGB 最大通道,而 HSL 的亮度使用的是最大值與最小值的平均,兩者並不能互換。
靜態對照表無法顯示的內容
印刷式的 RGB 轉 HSV 對照表涵蓋了固定的錨點以及一些有用的非錨點範例。剩下的 16,777,208 個三元組則落在長尾之中,唯有計算器能夠依需求進行解算。除了涵蓋範圍之外,對照表也無法強制輸入的正確性:若你將某個通道誤打成 256 或 25.5,靜態表格沒有機會標記這個錯誤。轉換器會明確地拒絕小數、負數、空值以及超出範圍的輸入,這能保護 8 位元 RGB 代碼不會悄悄變成一個看似合理但其實不同的顏色。
這個轉換本身對於可讀性也沒有提供任何說明。在明度差異極大的情況下,共享相同色相與飽和度的前景與背景,仍可能無法通過無障礙對比的相關要求。在實際的生產 UI 中依賴某個顏色選擇之前,請使用 Color Contrast Checker,對照 WCAG AA 與 AAA 來測試實際的配對。若你需要的是 HEX 字串而非 HSV——例如要將同一個顏色放入 CSS 變數中——RGB 轉 HEX 工具涵蓋了那個方向。
這個轉換器完全在瀏覽器中執行,並不會儲存你嘗試過的顏色歷史,因此對照表方式與即時方式在這一點上具有同樣的無狀態特性。兩者都無法回復你忘了複製的三元組。對於需要儲存或比較配色座標的工作,Color Palette Generator 接受一個基準色,並回傳互補、類似、三色等協調的配色方案,全部以可直接貼入 CSS 的格式表示。
延伸閱讀:CMYK 轉 RGB 配色靈感:將印刷轉換為螢幕。