RGB 轉 HSV 轉換器會將紅、綠、藍三個通道(每個 0–255)的 sRGB 三元組,轉換成以 0–360 度圓圈測量的色相,再加上以百分比顯示的飽和度與明度,整個計算完全在您的瀏覽器中,使用相同的色彩座標進行運算。RGB 是以每個通道中紅、綠、藍光的加法量來描述色彩,這正是相機、顯示器以及 CSS 色彩屬性所回報的方式。HSV 則將相同的三元組重新組織,圍繞不同的軸線:色彩在色輪上的位置、距離灰色軸的遠近,以及最強通道的強度。在挑選配色色調、調整圖像,或將座標輸入期望接收色相、飽和度、明度而非原始通道數值的選色器時,這樣的重新組織通常更容易進行微調。

RGB 與 HSV 實際描述的內容
RGB 與 HSV 描述的是完全相同的色彩,只是強調的屬性不同。RGB 回報顯示像素中紅、綠、藍發光體的三個獨立強度。從 0 到 255 的每個整數,控制該發光體對最終混合色彩的貢獻量。混合 R 255、G 255、B 255 會產生白色,因為三個發光體都全力發光;混合 R 0、G 0、B 0 會產生黑色,因為它們都沒有發光。螢幕上所見的一切,都是這三個發光體以某種權重混合而成,這也是為何許多系統選擇 RGB 作為傳輸格式的原因。
HSV 將同樣的三個數字重新組織為色輪上的一個位置(色相)、色彩距離中性灰色的程度(飽和度),以及最強通道的亮度(明度)。色相以紅色為基準,位於 0 度,接著依序經過 60 度的黃色、120 度的色、180 度的青色、240 度的藍色、300 度的洋紅,最後在 360 度回到紅色。飽和度的範圍從 0%(在當前明度下的完美灰色)到 100%(在當前色相與明度下的完全鮮豔色彩)。明度的範圍也是 0% 到 100%,等於最大的正規化通道。由於它追蹤的是最強通道,而非感知上的中點,因此 HSV 的明度與 HSL 的亮度或測量亮度並不相同。
轉換器如何計算色相、飽和度與明度
這項轉換是一個固定且有完整文件的轉換過程。每個經過驗證的 8 位元通道,會先除以 255,將其正規化為 0–1 的浮點數範圍。接著實作會找出最大通道、最小通道,以及兩者之間的差值(通常稱為 delta)。明度就是最大值。飽和度是差值除以最大值,但在黑色情況下(最大值為零)除外——此時飽和度會回報為零,以避免除以零的錯誤。色相使用分段公式,會根據哪個通道為最大值,選用六種情況中的一種,然後根據其他兩個通道的相對位置計算角度,並將任何負值透過加 360 來回歸到 0–360 範圍內。格式化僅在計算完成後才進行,因此內部結果在顯示之前都是未經四捨五入的數字。
為了更具體說明,以您在品牌色票中可能看到的純橙色(R 255、G 128、B 0)為例。將每個通道除以 255 會得到 (1.0、0.50196、0.0)。最大值為 1.0(紅色),最小值為 0.0(藍色),差值為 1.0。因此明度等於 1.0,顯示為 100.00%。飽和度等於差值 / 最大值 = 1.0 / 1.0 = 1.0,同樣顯示為 100.00%。由於紅色是最大通道,色相計算為 60 × ((G − B) / 差值) = 60 × ((0.50196 − 0) / 1.0) = 60 × 0.50196,四捨五入後為 30.12 度。因此該橙色的結果為 HSV (30.12°、100.00%、100.00%)。此實作已針對典型的 0–255 sRGB 輸入,獨立與 R 的 grDevices rgb2hsv 慣例進行交叉驗證,並且其輸出範圍遵循 Android Color 文件。黃金測試案例涵蓋六個主要與次要色輪位置、黑色,以及中間灰色。
如何透過三個步驟將 RGB 轉換為 HSV
- 將整數的紅、綠、藍通道值輸入轉換器,每個值介於 0 到 255 之間(含)。
- 選擇轉換為 HSV並讀取結果:色相以度數表示,飽和度與明度以帶兩位小數的百分比表示、加上正規化的 HSV 表示法、來源 HEX 代碼,以及視覺色塊。
- 在複製數值之前,請先確認您的目標工具預期的刻度——度數、零到一的小數,或是精簡的 0–179 或 0–255 整數範圍。
輸入值會持續顯示在畫面上,因此您可以變更單一通道,立即觀察三個 HSV 成分如何反應。當您在建立配色,並希望在保持色相穩定的同時,將明度或飽和度往灰色軸或鮮豔方向微調時,這種對照檢視非常實用。
解讀輸出:度數、小數與整數範圍
相同的色相,根據您要餵入的軟體,可以用三到四種不同的數值刻度來表示。遵循 Android Color 文件的網頁與圖形應用程式,使用的是 0–360 圓圈上的度數,飽和度與明度在顯示為百分比之前位於 0–1 範圍。其他生態系統則使用精簡的整數範圍,以配合 8 位元影像緩衝區。下表彙整了最常見的慣例,方便您將轉換器的輸出無意外地對應到您的目標。
| 生態系統 | 色相範圍 | 飽和度範圍 | 明度範圍 | 備註 |
|---|---|---|---|---|
| Android Color、CSS 選色器、本轉換器 | 0–360 度 | 0–1(顯示為 0–100%) | 0–1(顯示為 0–100%) | 針對典型的 sRGB 輸入,來回轉換結果與 R 的 grDevices rgb2hsv 一致。 |
| OpenCV(cv2.cvtColor,BGR2HSV) | 0–179(度數 ÷ 2) | 0–255 | 0–255 | 色相使用一半的度數,因為 8 位元無符號範圍無法容納 360。撰寫影像處理腳本時,請對應精確的 OpenCV 刻度。 |
| GIMP HSV、常見繪圖軟體 | 0–360 度 | 0–100(整數) | 0–100(整數) | 與 Android 相同的角度圓圈,但飽和度與明度以整數百分比而非 0–1 小數回報。 |
| 部分遊戲引擎與著色器 | 0–255 經正規化 | 0–255 經正規化 | 0–255 經正規化 | 每個元件會縮放以配合 8 位元通道;轉換方式為度數除以 360、百分比除以 100。 |
當轉換器顯示飽和度為 80.90% 時,在 0–1 API 中是 0.8090,除非目的地明確使用百分比,否則不會是整數 80。若您的目標讀取 HSV 的度數以及其他兩個元件的 0–1 小數,請複製百分比值,並在呼叫端除以 100。事先確認目的地預期的刻度,可以避免在不會捕捉超出範圍輸入的腳本中發生「看起來正確、執行卻錯誤」的問題。
需要注意的邊界情況:無彩度色彩與主要色輪位置
有兩種情況經常出現,值得分開說明:完全無彩度的色彩,以及六個主要色輪錨點。無彩度色彩——黑色、白色或任何灰色——具有三個相等的 RGB 通道。在這種情況下,最大通道與最小通道之間的差值為零,因此轉換器會回報飽和度為 0%,而色相公式中的差值步驟會失效。色相對純灰色沒有視覺意義,因為每個角度都會描述相同的色彩。為了保持輸出穩定,本工具會回傳慣例上的 0 度占位色相,並說明此選擇,而非默默地輸出 NaN。
六個主要與次要錨點的行為是可預測的,可作為快速的健全性檢查:純紅色 (255, 0, 0) 為色相 0°、飽和度 100%、明度 100%;黃色 (255, 255, 0) 為色相 60°;色 (0, 255, 0) 為色相 120°;青色 (0, 255, 255) 為色相 180°;藍色 (0, 0, 255) 為色相 240°;洋紅 (255, 0, 255) 為色相 300°。若您的轉換針對其中一個回傳了不同的角度,則表示輸入或公式在某處出現偏差。
本轉換器強制採用嚴格的 8 位元輸入。小數值、空欄位、負數,以及任何超過 255 的值,都會引發明確的錯誤,而非被默默地四捨五入或截斷。這個邊界在來源為 8 位元 RGB 代碼時相當重要,因為一個打錯的字可能會在沒有任何警告的情況下變成一個看似合理但不同的色彩。Alpha 通道不在本工具的範圍內,因為透明度不會改變三個通道的底層 HSV 計算——若您需要通道層級的透明度處理,請使用另一個支援 Alpha 的轉換器。
何時 HSV 是合適的色彩模型
當您希望一次調整一個屬性時,HSV 非常出色——繞著色輪旋轉以改變色相、將飽和度朝灰色拉近以降低色彩鮮度,或升降明度以讓一系列色彩變亮或變暗,同時不改變色相。這使它成為設計工具中選色器、圖形應用程式中調色,以及教學上的自然選擇,因為三個軸對應直覺的控制旋鈕。在腳本中將基數值輸入基於 HSV 的控制項時也很有用,因為您通常只有單一色相需要循環,並希望在不手動重新計算 RGB 的情況下表達色調與陰影。
當問題涉及感知或印刷時,HSV 並非合適的工具。明度追蹤的是最強通道,而非感知亮度,因此「50% 明度」的色彩在視覺上並非介於黑色與白色之間。若要感知亮度,請改用 HSL 亮度或測量亮度。若要進行印刷準備,RGB 與 HSV 都是以螢幕為導向,需要額外的 RGB 轉 CMYK 轉換,而且即使如此,若沒有真實的色彩描述檔,仍無法產生準確的印刷結果。最後,轉換無法說明兩個色彩是否易於一同閱讀——在任何使用者介面中依賴某組前景與背景候選色之前,請搭配 色彩對比檢查器 進行檢查。
本轉換器完全在您的瀏覽器中執行,且不會儲存色彩紀錄,因此每次工作階段都從乾淨狀態開始。它會產生三個 RGB 通道的座標轉換,而非主觀的色彩名稱或設計建議,也不會讀取嵌入的影像描述檔或在寬色域色彩空間之間轉換。當其他應用程式以不同的方式四捨五入顯示值時,請將其視為格式化差異,而非計算差異,並信任底層未經四捨五入的結果。
如需更深入的說明,請參在 Mac 上無色彩描述檔將 CMYK 轉換為 RGB:使用預覽程式。