RGB 轉 HSV 是一種座標轉換,它接受三個介於 0 到 255 之間的整數紅、綠、藍通道值,並回傳一個位於 0–360 度圓圈上的色相,加上以百分比表示的飽和度與明度。這種轉換純粹是算術運算——它不會改變顏色本身,只改變描述方式——而且依賴三個從輸入值推導出來的量:標準化後的最大通道、標準化後的最小通道,以及兩者之間的差值。明度被設定為等於最大通道,飽和度則是通道範圍除以最大值(對於黑色需做零值防護),而色相則透過一個依最大通道所在而定的分段公式計算。Android Color 說明文件與R grDevices rgb2hsv 參考手冊皆描述相同的演算法,這也是大多數選色工具、CSS 色彩編輯器以及繪圖應用程式所採用的慣例。

RGB 與 HSV 實際上描述的是什麼
RGB 以加法的紅、綠、藍三色量來描述一個顏色。每個通道都是一個介於 0 到 255 之間的獨立整數,因此這個三元組就是一個 256 階立方體內的點。HSV 則圍繞著三個屬性重新組織同一個三元組,在調整顏色時這三個屬性往往更直覺:色相指向色輪上的一個位置、飽和度控制顏色距離灰色軸的遠近,而明度則追蹤最強的通道。
色相圓從 0 度延伸到 360 度,共有六個標準錨點。純紅位於 0、黃色位於 60、綠色位於 120、青色位於 180、藍色位於 240、洋紅位於 300。處於全亮度的純色位於色輪外緣;位於內側的顏色則是純色相與灰色的混合。飽和度是徑向座標,明度是高度,因此 HSV 通常被繪製成圓錐或圓柱。若需要一份可列印的色輪對照表,將這些角度與具體的 RGB 和 HEX 色票配對,可參考RGB 轉 HSV 色輪圖表,它直接對應每個區段。
| 色相(度) | 色輪位置 | 角色 |
|---|---|---|
| 0 | 紅色 | 主要錨點 |
| 60 | 黃色 | 次要錨點 |
| 120 | 綠色 | 主要錨點 |
| 180 | 青色 | 次要錨點 |
| 240 | 藍色 | 主要錨點 |
| 300 | 洋紅 | 次要錨點 |
這六個位置由 HSV 慣例本身定義,而非針對每個顏色計算:在 0 到 60 之間,色相經過暖色調轉向黃色;在 60 到 120 之間,經過黃綠色;在 120 到 180 之間,經過青綠色轉向青色,依此繞行整個圓圈。分段公式中的單通道最大值恰好在這些錨點發生變化,這也正是它們同時作為自然區段邊界的原因。
轉換公式逐步解析
演算法首先將每個整數通道除以 255,產生介於 0–1 範圍內的標準化值 R'、G' 與 B'。接著計算最大值 M = max(R', G', B')、最小值 m = min(R', G', B'),以及差值 Δ = M − m。
- 明度 V = M。最強的通道決定明度,因此只要有一個主導通道,無論其他通道為何,該顏色的明度都很高。
- 飽和度 當 M = 0(純黑)時 S = 0,否則 S = Δ / M。飽和度衡量各通道相對於最亮通道的分散程度。
- 色相 H 使用依據哪個通道等於 M 的分段公式。當 R 為最大值時:H = 60 × ((G' − B') / Δ)。當 G 為最大值時:H = 60 × ((B' − R') / Δ + 2)。當 B 為最大值時:H = 60 × ((R' − G') / Δ + 4)。任何負值結果透過加 360 進行環繞,使最終色相落在 [0, 360) 範圍內。
以一個具體例子來說,顏色 RGB(200, 50, 80) 標準化為 R' ≈ 0.7843、G' ≈ 0.1961、B' ≈ 0.3137。最大值為 0.7843,最小值為 0.1961,Δ = 0.5882。V = 0.7843(78.43%)、S = 0.5882 / 0.7843 = 0.75(75.00%),由於 R 為最大值,色相為 60 × (0.1961 − 0.3137) / 0.5882 = 60 × (−0.2) = −12°。環繞後得到 348°。RGB 轉 HSV 轉換器針對此輸入回傳 H = 348.00°、S = 75.00%、V = 78.43%,而來源 HEX 碼加上即時色票可直觀地確認結果。
如何使用工具將 RGB 轉換為 HSV
- 在三個輸入欄位中輸入介於 0 到 255 之間的紅、綠、藍整數通道值。小數值、負數、空值或超過 255 的數值會產生明確錯誤,而非靜默地夾到範圍內。
- 選擇轉換為 HSV。計算過程完全在瀏覽器中以完整浮點運算執行;不會上傳任何資料,跨工作階段也不會保存任何色彩記錄。
- 讀取結果:色相以度數表示(0–360)、飽和度以百分比表示(0–100%)、明度以百分比表示(0–100%)。來源 HEX 碼、標準化 HSV 表示法以及即時色彩色票會一併顯示。
- 在複製之前,請先確認目標程式所預期的尺度。CSS 與大多數選色工具接受度數與百分比,但部分影像處理函式庫預期色相採 0–179 或 0–255 的整數尺度,而飽和度/明度則採 0–1 分數。
- 一次調整一個通道,觀察三個 HSV 元件如何反應。由於輸入值保持可見,您無需重新輸入三元組即可比較結果。
解讀輸出:度數、百分比與尺度
此工具將色相顯示於 0–360 度的圓圈上,並以兩位小數的百分比顯示飽和度與明度,符合 Android Color 慣例。在顯示背後,計算過程會維持完整浮點精度,直到格式化階段,因此顯示的百分比是為了可讀性而進位,而非截斷。因此,本頁顯示為 80.90% 的飽和度,在 0–1 範圍的 API 中為 0.809,在精簡的 8 位元表示中則會進位為 206——它們描述的是同一個顏色,但數字並不能互換使用。
其他軟體以不同方式儲存相同的元件。部分影像處理函式庫將色相回傳於 0–179 尺度,使其值能容納於單一 8 位元整數通道中,少數則將三個 HSV 元件全部封裝於 0–255 整數範圍內以便精簡儲存。在不同程式間傳遞數值時,請先確認目標程式所預期的範圍;轉換的數學運算相同,僅顯示格式不同。若想更深入了解替代尺度與邊界夾擾的行為,可參考色相尺度與邊界案例指南,其中詳細說明了常見的尺度不符情況。
邊界案例:無彩灰色與佔位色相
當三個通道全部相等時——無論是黑色、白色或介於其間的任何灰色——差值 Δ 為零,因此飽和度為零。然而,色相在灰色軸上並無視覺意義,因為色輪上的每個方向都會塌縮成同一個無彩色點。不同函式庫的處理方式不同:有些將色相留為未定義,有些則沿用前一個色相,少數則將其定義為零。本工具遵循 Android 慣例,對任何無彩色輸入一律回報慣例上的佔位色相 0 度。
特別就黑色而言,Δ 與 M 皆為零,因此在執行除法前飽和度會被強制設為零。實作中加入了防止除以零的防護,這一點很重要,因為天真的實作會回傳 NaN 並在無形中污染下游計算。嚴格的 0–255 整數邊界在此也提供了幫助:例如將 120 誤打成 12 這類錯字會被視為明確錯誤拒絕,而非靜默地夾入一個看似合理但不正確的顏色;像 123.4 這類小數輸入則會被視為無效,而非向下捨入為 123。
HSV 明度並非 HSL 亮度
HSV 明度與 HSL 亮度很容易混淆,因為兩者都以單一字母標示亮度軸,且皆以百分比表示。它們衡量的其實是不同的量。HSV 明度是標準化後的最大通道,因此像 RGB(255, 0, 0) 這種顏色的 V = 100%,即使它在視覺上不如 RGB(255, 255, 255) 那麼明亮。HSL 亮度則是最大與最小通道的平均值,因此純紅的 L = 50%,而白色的 L = 100%。
若目標程式預期的是 HSL,請使用專屬的 HSL 轉換器,而非直接將 HSV 的明度元件重新標記。對於大多數顏色,這兩個色彩空間會產生明顯不同的數字,即使百分比看似相近,將 HSV 的明度貼入 HSL 欄位仍會得到錯誤結果。將 HSV 輸出與測量亮度進行比較時,亦須注意相同的警覺——亮度是依通道加權推導出的感知量,而非最大通道。單純的轉換也無法說明前景與背景配對是否仍然清晰易讀;若要做無障礙對比決策,請使用對比檢查工具實際測試該配對,而非從 HSV 座標推斷。