RGB 轉 HSV 的轉換，會把以三個加色光通道表示的顏色——紅、綠、藍，每個範圍從 0 到 255——轉換成色相、飽和度、明度的表示方式，這是多數選色工具所使用的形式。這兩套系統描述的是同一個實體顏色；它們只是用不同的方式組織資訊。RGB 是為了螢幕而設計，每個像素都是紅、綠、藍光的混合。HSV 則是為了人類的直覺而設計，用色環上的角度（色相）、距離灰色的程度（飽和度），以及最強通道的強度（明度）來描述同一個顏色。對初學者來說，RGB 轉 HSV 的目標很少是死背公式；而是拿著你已有的 RGB 三元組，把它讀成色相、飽和度、明度，然後把這些數字複製到需要 HSV 輸入的 CSS 屬性、繪圖函式庫或選色器中。
RGB 和 HSV 實際上代表什麼
RGB 從黑色 (0, 0, 0) 開始，藉由在三個通道中加入光線，朝白色 (255, 255, 255) 移動。純紅色是 (255, 0, 0)；純綠色是 (0, 255, 0)；純藍色是 (0, 0, 255)。其他所有顏色都是這三者的加權混合。如果你曾經檢查過 CSS 的 rgb() 函式，或看過 Photoshop 的通道面板，你已經在 RGB 的世界裡工作過了。
HSV 重新整理了同一個三元組。色相是色環上的角度，以度數衡量，範圍從 0 到 360。紅色位於 0 度，黃色在 60 度，綠色在 120 度，青色在 180 度，藍色在 240 度，洋紅在 300 度。飽和度衡量的是顏色與相同明度的中性灰色之間的距離：飽和度 0% 是灰色，飽和度 100% 是該色相最純粹的版本。明度是最大的標準化通道，在百分比尺度上代表最強通道的亮度。Android Color 文件將標準範圍定義為色相從 0 到 360 度，飽和度與明度在內部以 0 到 1 儲存，再以百分比形式顯示（Android Developers — Color.colorToHSV）。
可以把 HSV 想成用不同的方式對一個顏色問三個問題：它屬於哪個色相家族？有多鮮豔？最強的成分有多亮？
為什麼會有兩種色彩模型
RGB 是硬體的語言。陰極射線管、LCD 面板和 OLED 螢幕都是透過改變紅、綠、藍子像素的強度來運作。當繪圖驅動程式需要把顏色送到螢幕時，它幾乎都是用 RGB 在溝通。
HSV 是人類的語言。設計師調整顏色時，幾乎不會想要分別微調紅、綠、藍三個通道，然後祈禱結果看起來正確。他們想要的是沿著色環旋轉、推高飽和度，或提升亮度。HSV 讓他們每個動作只需要一個滑桿就能完成。
這就是為什麼同一個顏色在整個設計工作流程中會以兩種形式出現。原始程式碼、影像檔案和螢幕輸出都保持 RGB。選色器、佈景主題編輯器和許多繪圖 API 則會提供 HSV，因為一次調整一個色相、飽和度、明度，遠比同時操作三個 RGB 滑桿要容易得多。
解讀 HSV 的三個組成
初學者通常透過觀察極端值，最快理解 HSV。
| 色相（度） | 色環上的顏色 |
|---|---|
| 0 | 紅色 |
| 60 | 黃色 |
| 120 | 綠色 |
| 180 | 青色 |
| 240 | 藍色 |
| 300 | 洋紅 |
飽和度告訴你顏色中含有多少色彩。飽和度為 0% 代表顏色是灰色，無論你從哪個色相開始。飽和度為 100% 代表色相處於最純粹的狀態。明度告訴你顏色有多亮。明度 0% 是黑色；明度 100% 代表至少有一個通道完全開啟。請注意，HSV 的明度與 HSL 的亮度並不相同，也不是感知亮度的衡量標準——它只是追蹤最強的 RGB 通道，而更深入探討公式的文章會解釋為什麼。
有一個棘手的狀況值得注意：當三個 RGB 通道全部相等時，顏色是灰色（或黑色，或白色）。此時飽和度為零，色相在視覺上沒有意義。按照慣例，轉換器對這些無彩色的情況會回報 0 度，讓欄位永遠都有一個數字。
如何逐步將 RGB 轉換為 HSV
最快的轉換方式是使用專門的RGB 轉 HSV 轉換器。以下是大多數初學者會採用的流程。
- 確認你顏色的三個整數 RGB 通道，每個都在 0 到 255 之間。以 CSS 顏色 rgb(255, 128, 0) 為例，那些值是 R = 255、G = 128、B = 0。
- 開啟 RGB 轉 HSV 轉換器，將這三個整數輸入到紅、綠、藍欄位中。介面只接受整數——小數、負數、空欄位，以及大於 255 的值都會產生明確的錯誤，而不是被默默四捨五入。
- 點擊「轉換為 HSV」按鈕。結果面板會顯示以度數為單位的色相、以百分比表示的飽和度與明度，以及標準化的 HSV 表示法、對應的 HEX 色碼和視覺色塊。
- 閱讀顯示的數字時，請留意它們的單位。色相採用 0–360 的角度尺度；飽和度與明度則以 0–100 的百分比顯示。內部計算使用完整的浮點數值；只有顯示時會四捨五入到小數點後兩位。
- 在把結果貼到目的地之前，先確認它預期的是哪種尺度——請參考下一節。
若要用手動驗證上述橘色的計算：將每個通道除以 255 進行標準化，得到 R' = 1.000、G' ≈ 0.502、B' = 0.000。最大值為 1.000、最小值為 0.000，所以差值為 1.000。明度等於最大值，所以 V = 100%。飽和度等於差值除以最大值，所以 S = 100%。因為紅色通道是最大值，色相公式為 60 × ((G' − B') / delta)，計算結果為 60 × 0.502 ≈ 30.12 度。轉換器應該會顯示色相 30.12°、飽和度 100.00%、明度 100.00%。
配合目的地預期的尺度
對初學者來說，最容易混淆的單一原因，就是並非每個程式都以相同方式儲存 HSV。有些預期的是本轉換器所顯示的完整範圍：色相 0 到 360 度，飽和度 0 到 1，明度 0 到 1。有些則把色相拆分為精簡的整數範圍——OpenCV 是 0 到 179，某些較舊的影像處理函式庫則是 0 到 255——而且飽和度與明度也可能希望縮放為那個精簡的整數範圍，而不是以百分比顯示。
轉換器中顯示為 80.90% 的飽和度，在零到一的 API 中對應到大約 0.809，除非該程式明確使用百分比，否則不會是整數 80。如果你打算把結果輸入到 CSS 的 hsl() 函式或支援 HSL 的選色器，請記得 HSV 與 HSL 不能互換——那種情況請改用 HSL 轉換器，而不是把明度元件重新標記。想更詳細了解不同函式庫如何縮放色相，色相尺度與邊緣情況指南是個實用的延伸閱讀。
兩個實用的檢查步驟可以抓出大多數初學者的錯誤。第一，查閱目的地的文件，了解每個 HSV 元件的精確範圍。第二，如果目的地是程式設計函式庫，請搜尋其原始碼中的常數——許多函式庫會定義最大色相值或類似的常數，告訴你它預期的整數尺度。
常見的初學者陷阱與邊緣情況
有幾種情況會讓第一次使用的使用者感到困惑，而轉換器對每一種情況都會明確處理。
- 通道相等會產生灰色。輸入 (128, 128, 128) 會得到飽和度 0% 與色相 0°。色相的讀數只是佔位符，並非真正的色相。
- 小數輸入會被拒絕。像 127.5 這樣的值不會被四捨五入為 128。這個介面是為一般的 8 位元 RGB 通道所設計，因此每個輸入都必須是 0 到 255 之間的整數。
- 顯示會四捨五入，但計算不會。為了可讀性而顯示小數點後兩位，但底層結果在格式化顯示之前都是完整精度的浮點數。
- HEX 是根據驗證過的通道計算。HEX 輸出對每個經驗證的整數通道使用兩位小寫的十六進位數字，因此會與你輸入的內容完全相符。
- 透明度不在處理範圍內。透明度不會改變三個底層通道的 RGB 轉 HSV 計算，因此轉換器會忽略 alpha，專注處理不透明的顏色。
單純的轉換無法說明一個顏色在螢幕上的可讀性。如果你正在為實際介面挑選前景與背景顏色，請把實際的配對透過顏色對比檢查器跑一次——HSV 座標是一種轉換，而不是可用性的評分。