從圖片將 RGB 轉換為 HSV 是兩階段的工作:從一個像素取出三個整數通道值，然後將它們送進嚴格的 0–255 RGB 轉 HSV 轉換器，該轉換器會在 0–360 度的色輪上回傳色相，並把飽和度與明度以百分比表示。這個轉換採用 Android Color.colorToHSV 文件所記載，並經 R 的 grDevices rgb2hsv 函式驗證過的標準最大通道公式，因此每個三元組都能在不上傳任何圖片的情況下確定性地轉換。由於轉換器只接受 0 到 255 之間的整數，所以工作流程一律從取樣像素開始，而非原始點陣圖——這個工具本身從不讀取圖檔。接著，你會取回色相(0–360 度)、飽和度(0–100%)、明度(0–100%)、一個正規化的 HSV 三元組、來源 HEX 色碼，以及一個只要任一通道變動就會即時更新的色塊。嚴格的邊界檢查會直接拒絕小數、空值與超過 255 的數值，而不是將它們夾住，如此才能避免一個打錯字的值變成一個看似合理但其實不同的顏色。對大多數圖片來源而言，這表示你可以取樣一個像素、貼上三個整數，然後在單一流程中讀到 HSV 結果。
What changes when an image pixel becomes HSV
RGB 以紅、綠、藍光的三個加性量值來描述一個顏色——螢幕驅動每個子像素所使用的就是同一組三元組。HSV 則將同一組三元組重新整理成三個屬性，這三個屬性能更直接地對應到設計師與選色工具描述所見之色的方式。色相是色輪上的一個位置，從紅色(0 度)出發，依序經過黃色(60)、綠色(120)、青色(180)、藍色(240)，再到洋紅色(300)，最後於 360 度回到紅色。飽和度衡量的是該顏色在同等明度下距離中性灰色的程度，以 0 到 100 的百分比刻度表示。明度則追蹤最強的正規化通道，因此它會跟著最亮的元件走，而不是感知亮度。
這個差異在你從螢幕數值跨入以 HSV 為基礎的控制項時便格外關鍵。HSV 的明度與 HSL 的亮度並非同一個量，兩者也都不等於測得的亮度，因此即使底層 RGB 看起來一模一樣，把它們彼此替換仍會產生不同的漸層。運算本身其實很直觀:把每個整數通道除以 255，找出最大值、最小值，以及兩者的差。明度等於最大值;飽和度是差值除以最大值(當最大值為零時回傳零);色相則使用分段公式，依哪個通道為最大值而定。過程中出現的負數中間結果會以 360 度進行環繞，以維持色相落在慣用的度數範圍內。
Pull three integer channels from a source image
The RGB to HSV Converter only accepts three whole numbers from 0 through 255, so the first practical step is choosing a method that returns exactly that. A full bitmap never reaches the converter — only a sampled pixel does. Common ways to extract those three integers include:
- A photo editor's eyedropper or color picker (Photoshop, GIMP, Affinity Photo, Figma) reports each channel as an integer when the picker is set to 8-bit color.
- Browser image viewers and DevTools-style inspectors on a saved PNG or JPEG can show the underlying pixel channel values at the cursor location.
- Command-line utilities such as ImageMagick return raw triplet values — for example, `magick identify -format "%[pixel:p{200,150}]" image.png` prints a string such as `srgb(200,100,50)`.
- Short scripts in Python (Pillow), Node (sharp), or R read a pixel and expose each channel as an integer in the 0–255 range.
- An Image Average Color Finder collapses an entire image to one averaged RGB triplet when a representative pixel is enough.
Pick whichever method fits the file format and the workflow. The important constraint is that the result is three integers, not floats, not percentages, and not 16-bit values that exceed 255. If the source image stores 16-bit channels, divide by 257 and confirm the values fit before typing them in. Once those three integers are confirmed, the converter can take them directly.
Convert the sampled channels with the RGB to HSV tool
Once three integer channels are in hand, the conversion itself takes three inputs.
- Enter whole-number red, green, and blue channel values from 0 through 255 into the converter.
- Select Convert to HSV and read the hue value in degrees plus the saturation and value as percentages.
- Check whether the destination expects degrees and percentages, zero-to-one fractions, or a compact integer range before copying the values across.
A single click on Convert returns the four components that almost every downstream control needs. Hue sits inside [0, 360), saturation and value sit inside [0, 1] in the underlying calculation and are then shown as percentages with two decimal places. The output panel also surfaces the normalized HSV triple, the matching HEX code, and a live color swatch that updates as soon as any channel changes — useful for confirming that a one-channel tweak moves the hue exactly as expected.
For example, an orange pixel sampled at (200, 100, 50) produces:
- Normalized channels: R = 200 / 255 ≈ 0.7843, G = 100 / 255 ≈ 0.3922, B = 50 / 255 ≈ 0.1961.
- Max = 0.7843 (R), min = 0.1961 (B), delta = 0.5882.
- Value = 0.7843 → 78.43%.
- Saturation = delta / max = 0.5882 / 0.7843 = 0.75 → 75.00%.
- Hue = 60 × (G − B) / delta = 60 × 0.1961 / 0.5882 = 60 × 0.3333 ≈ 20.00°.
That sits in the orange-red wedge of the wheel and matches what the eyedropper on the same pixel reports when the picker is set to HSV. For additional reference conversions from common colors, the RGB to HSV examples guide walks through further points on the wheel.
Read the HSV output against the original pixel
The wheel positions give the rest of the picture. These are standard, reproducible points rather than values computed on the fly, so they make a reliable reference table.
| Color | RGB triplet | Hue (degrees) |
|---|---|---|
| Red | 255, 0, 0 | 0 |
| Yellow | 255, 255, 0 | 60 |
| Green | 0, 255, 0 | 120 |
| Cyan | 0, 255, 255 | 180 |
| Blue | 0, 0, 255 | 240 |
| Magenta | 255, 0, 255 | 300 |
A sampled pixel whose hue lands near 20° should look orange-red, while one near 200° should look teal-blue. Saturation tells you how much color is in the pixel relative to its value, so a saturation of 25% on the same orange triplet produces a much more muted, dusty result. Value tells you how bright the strongest channel is, which translates to brightness in screen space but not perceptual lightness.
Achromatic pixels are the one case where hue has no visual meaning. When red, green, and blue are equal, the difference is zero, so saturation is zero, and the piecewise hue formula returns a result that does not correspond to any wheel position. The converter reports the conventional placeholder hue of 0 degrees in that case so the output remains a defined coordinate rather than a missing field. That is also why a pure gray pixel sampled from an image never produces a "real" hue number.
Match the scale to your destination software
The biggest source of confusion when moving HSV between programs is the unit each one expects. The converter displays degrees and percentages because those match the Android Color documentation and the way most design tools render sliders, but several common libraries normalize the same triple into other ranges:
| Library or context | Hue range | Saturation / Value range | Notes |
|---|---|---|---|
| Android Color, design pickers | 0–360 | 0–1 or 0–100% | Degrees and percentages; this converter's default output. |
| OpenCV cv2.cvtColor | 0–179 | 0–255 | Hue is divided by 2 for compact 8-bit storage; divide degrees by 2 to copy in, multiply by 2 when reading back. |
| CSS hsl() and hsv() notation | 0–360 | 0–100% | Matches the percent display directly. |
| MathWorks rgb2hsv, NumPy pipelines | 0–1 | 0–1 | Divide percentages by 100 before assigning to floating-point arrays. |
That last step matters. A saturation of 75.00% on this page corresponds to 0.75 in a zero-to-one API, and to roughly 191 in OpenCV's 8-bit normalized range — not to the integer 75 unless the destination explicitly accepts percentages. For HSV-to-RGB work in scripting environments, the scale has to match before the value makes visual sense, and rounding behavior may differ from one library to the next.
The conversion itself says nothing about accessibility. Two colors with identical HSV coordinates can still fail a contrast check against each other, so any time the result is used for text or interface work, run the actual pair through a Color Contrast Checker rather than assuming the math implies readability. The converter reports a coordinate transformation, not a subjective recommendation about which color to use, and the strict input check only guards against bad numbers — it does not evaluate the meaning of a particular triplet.
For a deeper look, see CMYK to RGB for an Image: A Screen Preview Method.