HSV 色相位於一個 0–360 度的圓形色輪上，飽和度和明度則以百分比表示，這些百分比是從標準化 RGB 色道的最大值衍生而來，而 HSV 結果是一種定義明確的座標轉換 —— 它無法測量感知對比度。RGB 轉 HSV 轉換器接受三個介於 0 到 255 之間的整數色道，並回傳以度數表示的色相，以及以百分比表示的飽和度和明度，同時附上標準化的 HSV 表示法、來源 HEX 色碼，以及即時色彩預覽。依據 WCAG 2.2 對比度最低標準，無障礙對比度是兩種色彩相對亮度之間的比率，並非單一色彩以 HSV 表示的屬性。因此，轉換功能對於挑選和調整色票很有用 —— 例如，提高明度讓色調變亮，或降低飽和度來柔化某個色相 —— 但實際可讀性仍須使用專門的 色彩對比度檢查工具來確認。HSV 輸出提供三個你可以讀取或傳遞的座標，而對比度檢查工具則給出對 WCAG AA 和 AAA 至關重要的比率。這是同一個工作流程中兩個不同的步驟，彼此無法互相取代。
HSV 轉換為無障礙決策帶來的價值
HSV 將色彩身分(色相)與強度(明度)，以及灰度(飽和度)區分開來，這讓我們能用更直白的用語討論調整方式。色相回答「這是什麼樣的顏色」，明度回答「其最亮色道的強度如何」，而飽和度回答「它離灰色有多遠」。當你在調整介面的前景或背景時，這種區分讓你能夠做出精確的調整:將色相從有問題的鄰近色移開、提高明度將色調推向色輪的亮端，或降低飽和度來中和過於強烈的顏色。這些調整都不代表對比度的保證。它們是以 HSV 座標表達的設計決策，仍然需要單獨測量兩種結果色彩之間的互動方式。
實際的優勢在於，HSV 讓你能夠一次只針對一個座標進行推理。如果設計師說「把按鈕調亮一點」，你可以提高 HSV 明度而不動色相和飽和度。如果另一位設計師說「降低飽和度讓感覺不那麼刺眼」，你可以單獨降低 S 座標。這種解耦正是許多繪圖應用程式的色彩選擇器直接暴露 HSV 的原因。在無障礙設計方面，同樣的解耦讓規劃調整策略更容易 —— 例如「提高背景的明度，並降低前景的明度」，然後根據實際的對比測試來驗證結果配對，而不是單獨信任 HSV 數值。
三步驟將 RGB 轉換為 HSV
- 在輸入欄位中輸入介於 0 到 255 之間的整數紅、綠、藍色道值。
- 選擇轉換為 HSV，在結果面板中讀取以度數表示的色相，以及以百分比表示的飽和度和明度。
- 在複製數值之前，請先確認目的地預期的範圍 —— 部分程式庫使用 0 到 1 的小數，而緊湊的整數範圍(例如 0–179)在影像處理 API 中很常見。
介面在轉換後仍會保留原始的 RGB 輸入，讓你可以變更單一色道並比較三個 HSV 元件如何反應。將 R 從 200 提升到 240，同時保持 G 和 B 不變，會同時改變色相和明度，這是建立 HSV 對小幅色道變化反應的直覺的好方法。結果面板也會顯示來源 HEX 色碼和色票，因此在將 HSV 數值傳遞到下游之前，你可以確認輸入的三元組符合你預期的色彩。
HSV 色相參考:360 度色輪
色相是沿著一個圓形來測量。傳統的錨點為紅色位於 0°、黃色位於 60°、綠色位於 120°、青色位於 180°、藍色位於 240°、洋紅色位於 300°，而數值會繞回 360° = 0°。下表列出在介面工作中推理色彩位置時最常遇到的錨點。
| 色相 (°) | 色彩位置 | 無障礙規劃注意事項 |
|---|---|---|
| 0 | 紅色 | 錨點;完全飽和位於 HSV 色立方體的紅色角落。 |
| 60 | 黃色 | 以明度而言最亮的錨點;視覺上具有高亮度。 |
| 120 | 綠色 | 常見的品牌錨點;在內文文字對比中常需要去飽和處理。 |
| 180 | 青色 | 冷色系錨點;在深色背景上往往顯得明亮。 |
| 240 | 藍色 | 常用於連結和主要動作;請對任何背景進行驗證。 |
| 300 | 洋紅色 | 邊緣錨點;在標準介面配色中較少見。 |
當 R = G = B 時，該顏色是無彩色的。色道之間的差異為零，因此飽和度為 0%，而色相則沒有視覺意義。轉換器會回報慣用的佔位色相 0° 和 0% 的飽和度，這是 Android Color 文件中針對此情況的標準處理方式。在無障礙工作中，這通常不是問題，因為無彩色(黑、灰、白)容易推理，也可以直接測試。
輸出範圍以及其他軟體儲存色相的方式
此轉換器遵循 Android 的 Color.colorToHSV 文件所使用的範圍:色相至少為 0 且低於 360，而飽和度和明度在顯示為百分比之前，處於 0 到 1 的範圍。根據該慣例，飽和度和明度為 1.0 始終對應 100%，與色相無關。如果你將數值複製到其他工具或程式碼庫，請務必再次確認目的地預期的範圍。有些軟體將色相儲存為 0–179 或 0–255 的整數範圍，以容納單一位元組，這代表此頁面上 90° 的色相在 OpenCV 風格的 H 色道中會變成 45，而非 90。
轉換器上顯示為 80.90% 的飽和度，在零到一的 API 中約略對應 0.809，除非該程式明確使用百分比，否則並非整數 80。如果目的地預期使用 HSL 而非 HSV，請勿將明度元件重新標示為亮度 —— HSL 的亮度是最大和最小色道的平均值，這是不同的量，正確的做法是改用 HSL 轉換器。如需進一步了解色輪在邊界情況下的分解方式，色相範圍與邊界情況指南以額外的關注探討了同一個轉換器在邊界輸入下的表現。
為何 HSV 座標無法取代對比度測試
HSV 明度是三個標準化 RGB 色道中的最大值，並非感知亮度的測量。即使兩個色彩具有相同的 HSV 明度，它們的亮度可能截然不同 —— 例如，純綠色 (0, 255, 0) 的明度為 100%，但其相對亮度遠高於純藍色 (0, 0, 255)，即使兩者的明度皆為 100%。WCAG 2.2 對比度是根據相對亮度計算的(L = 0.2126·R + 0.7152·G + 0.0722·B，每個色道先進行線性化處理)，因此 HSV 明度無法直接用來估算對比度比率。亮度計算中綠色的相對權重是藍色的三倍以上，這正是為什麼在相同飽和度下，高明度的綠色和高明度的藍色在相同背景上會有截然不同的視覺感受。
這就是為何單獨的 HSV 轉換無法說明可讀性的核心原因。你可以將前景的 RGB 轉換為 HSV，並將背景的 RGB 轉換為 HSV，卻仍然無法得知它們的比率會是多少。為此，你需要對這組配對本身進行對比度測量，例如色彩對比度檢查工具，它能即時評估 WCAG 2.2 比率。WCAG AA 和 AAA 對比度範例頁面對於了解常見的色彩配對在各個門檻下的表現也很有幫助。
實作範例:RGB (200, 100, 50)
為了讓轉換更具體，假設輸入為 R = 200、G = 100、B = 50，皆在 0–255 的接受範圍內。每個色道除以 255 以進行標準化:
- R = 200 / 255 ≈ 0.7843
- G = 100 / 255 ≈ 0.3922
- B = 50 / 255 ≈ 0.1961
最大值為 R (0.7843)，最小值為 B (0.1961)，因此差值(delta)為 0.7843 − 0.1961 = 0.5882。明度等於最大值:V = 0.7843，顯示為 78.43%。因為最大值不為零，飽和度為差值除以最大值:S = 0.5882 / 0.7843 = 0.7500，顯示為 75.00%。色相使用紅色色道的最大色道規則:H = 60 × ((G − B) / delta) = 60 × ((0.3922 − 0.1961) / 0.5882) = 60 × 0.3333 = 20.00°。
因此 HSV 結果為 H = 20.00°、S = 75.00%、V = 78.43%。這個單一顏色本身沒有對比度比率，除非與前景或背景配對;轉換步驟只是提供三個可讀的數字，讓你能夠規劃調整，例如「將明度提高到 90% 以使背景變亮」或「將飽和度降低至接近 30% 以柔化色票」。一旦完成這些調整，結果的配對仍需進行實際的對比度檢查。
圍繞 HSV 建立無障礙工作流程
將 HSV 放在無障礙工作流程中的正確位置，看起來會像這樣。首先，使用 RGB 轉 HSV 轉換器轉換起始色彩，並讀出色相、飽和度和明度。其次，決定要移動哪個座標以及移動幅度 —— 例如，提高明度將背景推向白色，或降低明度將文字顏色推向黑色。第三，將調整後的座標轉換回 RGB 或 HEX(使用 RGB 轉 HEX 等工具)，以便將色彩放回 CSS 或設計檔案中。第四，將前景與背景配對透過色彩對比度檢查工具進行測試，確認比率符合你的目標 —— WCAG 2.2 AA 的一般文字為 4.5:1、AAA 為 7:1，大字文字為 3:1(WCAG 將其定義為至少 18 pt 或 14 pt 粗體，約略為 24 px 和 18.67 px 粗體)。第五，反覆迭代。HSV 負責規劃;對比度測試負責驗證。
兩項實用注意事項有助於讓這個工作流程在不同工具間保持穩健。首先，HSV 明度並非感知亮度，因此請勿將其視為亮度的替代品 —— 你仍然需要實際的配對來計算比率。其次，在不同程式之間傳遞色相或飽和度時，請確認目的地的範圍;轉換器刻意以度數和百分比顯示，因為這是最具可攜性的表示方式，但接收的程式庫可能需要 0–179 的色相或 0–1 的飽和度，而這方向的轉換屬於另一個獨立步驟。在牢記這兩個限制的前提下，HSV 成為一個能與實際對比度測試並存搭配的規劃工具，而非其替代品。