RGB (Red, Green, Blue) describes any 8-bit digital color as three whole-number channels from 0 to 255, while HSV (Hue, Saturation, Value) re-describes the same color using a hue angle on a 360-degree wheel plus saturation and value percentages. The two are not different color spaces — they are two coordinate systems for the same pixel.
A single HSV output always contains three numbers: a hue between 0° and 360° (with red starting at 0°, yellow at 60°, green at 120°, cyan at 180°, blue at 240°, and magenta at 300°), a saturation as a percentage that grows as the color moves away from gray, and a value as a percentage equal to the largest normalized channel. With pure channels, the result is fixed: (255, 0, 0) always converts to HSV(0°, 100%, 100%), and (0, 255, 0) to HSV(120°, 100%, 100%). The shared rule across every example is that value tracks the strongest channel, while hue tracks which channel that is and how far the other two have moved toward it.
What RGB and HSV Represent
RGB describes a color by the additive amount of red, green, and blue light combined, with each channel stored as a whole number from 0 through 255 in standard 8-bit digital work. HSV reorganizes that same triplet around three properties that often feel easier to manipulate: a hue angle on a 360° color wheel, a saturation percentage describing how far the color sits from gray, and a value percentage equal to the strongest channel in the triplet. Both spaces describe the same pixel — the difference is purely how the coordinates are arranged.
HSV is also called HSB (Hue, Saturation, Brightness) in many design tools, though the value component of HSV is technically the maximum RGB channel rather than a perceptual brightness. The relationship is purely mathematical: HSV reorganizes the same triplet around properties that often feel more convenient for adjustment. Working through examples is the fastest way to internalize the relationship, and because pure colors and gray values produce mathematically fixed outputs, you can predict them without running the math each time. The RGB to HSV Converter handles the arithmetic for arbitrary inputs and accepts whole-number channels from 0 through 255 only.
Common RGB to HSV Examples From the Color Wheel
The table below shows what happens when you feed pure primary and secondary channels into the conversion, along with a few achromatic (gray-axis) cases. These are not the result of a single sample run — they are the mathematical definition of where each color sits on the HSV wheel.
| RGB Input | Color | Hue (°) | Saturation (%) | Value (%) |
|---|---|---|---|---|
| (255, 0, 0) | Pure red | 0 | 100 | 100 |
| (255, 255, 0) | Yellow | 60 | 100 | 100 |
| (0, 255, 0) | Pure green | 120 | 100 | 100 |
| (0, 255, 255) | Cyan | 180 | 100 | 100 |
| (0, 0, 255) | Pure blue | 240 | 100 | 100 |
| (255, 0, 255) | Magenta | 300 | 100 | 100 |
| (0, 0, 0) | Black | 0 (placeholder) | 0 | 0 |
| (255, 255, 255) | White | 0 (placeholder) | 0 | 100 |
| (128, 128, 128) | Middle gray | 0 (placeholder) | 0 | 50.20 |
Two patterns jump out from the table. First, every pure primary and pure secondary sits at a fixed hue position on the wheel — 60° between adjacent entries — and reaches the maximum saturation and value. Second, whenever all three channels are equal, the difference between the maximum and minimum is zero, so the saturation collapses to zero and the hue becomes mathematically undefined; the converter reports the conventional placeholder hue of 0°. The full algorithm is independently cross-checked against the R grDevices rgb2hsv convention, so the values in the table match what a scientific environment would produce.
How to Convert RGB to HSV in Three Steps
- Type the red, green, and blue channels into the converter as whole numbers between 0 and 255. Decimal values, empty fields, negative numbers, and anything above 255 produce an explicit error rather than being silently rounded or clamped.
- Select Convert to HSV. The tool divides each integer by 255, identifies the maximum and minimum channels, computes their difference, and applies the standard piecewise formula for hue based on which channel is dominant.
- Read hue in degrees (0–360), saturation as a percentage, and value as a percentage. The same screen shows the normalized HSV notation, the source HEX code, and a visual swatch so you can compare the original to its HSV representation.
- Before copying the result out, confirm whether the destination expects degrees and percentages, zero-to-one fractions, or a compact integer range such as 0–179 for hue. A saturation shown as 80.90% is 0.809 on a zero-to-one scale, not the integer 80.
Inside the RGB to HSV Formula
The conversion is short enough to work through by hand for a single example. Take an input of R = 200, G = 100, B = 50 — a warm orange that is not pure.
Normalize each channel by dividing by 255:
- R' = 200 / 255 ≈ 0.7843
- G' = 100 / 255 ≈ 0.3922
- B' = 50 / 255 ≈ 0.1961
The maximum is R' (0.7843) and the minimum is B' (0.1961), so:
- delta = max − min = 0.7843 − 0.1961 = 0.5882
- value = max = 0.7843 → 78.43%
- saturation = delta / max = 0.5882 / 0.7843 = 0.75 → 75%
Because red is the largest channel, the hue formula becomes 60° × (G' − B') / delta:
- hue = 60 × (0.3922 − 0.1961) / 0.5882 = 60 × 0.3333 = 20°
The full conversion reads HSV(20°, 75%, 78.43%). This is exactly what the RGB to HSV Converter reports. Internally the result is an unrounded JavaScript number; only the display rounds to two decimal places for readability.
If green were the maximum, the formula would switch to 60° × (2 + (B' − R') / delta); if blue were the maximum, it would switch again. Negative intermediate results wrap by adding 360 to keep the hue inside the canonical 0° to 360° range — the same convention used by the Android Color documentation.
Achromatic Colors and the Hue Placeholder
An achromatic color is any RGB triplet where all three channels are equal — black, white, and every shade of gray between them. In these cases the difference between the maximum and minimum is zero, so the standard saturation formula would divide by zero, and the piecewise hue formula has no meaningful answer because no single channel is dominant.
The fix used here is conventional: when the color is achromatic, the converter reports saturation as 0 and hue as the placeholder value of 0 degrees. The hue number is still emitted so the output row is always shaped the same way, but it carries no visual information. Recognizing this placeholder is important if you are feeding results into a program that expects a real hue — a hue-based animation, for instance, would treat 0° as red and produce a sudden jump away from gray unless you explicitly filter for the achromatic case.
This is also why a quick check of the saturation field is the fastest way to know whether a hue value is meaningful. Anything below a fraction of a percent is essentially achromatic, and the hue should be ignored in those rows.
Matching the Output Scale Your Software Expects
Different programs and image-processing libraries store HSV in different scales, and that is the most common reason two converters appear to disagree on the same input.
- CSS and many design tools use degrees and percentages. A typical CSS notation looks like hsv(210, 88%, 100%) — the form the converter displays by default.
- Some software, including parts of OpenCV, use a hue range of 0–179 to fit a hue byte into 8 bits. The same color shown as 210° elsewhere would read as 105 in that scale.
- Numeric APIs that take floating-point color vectors usually expect saturation and value in the 0.0–1.0 range, not 0–100. Divide the displayed percentage by 100.
- Compact integer formats occasionally encode saturation and value on a 0–255 scale as well, especially in older palettes.
The Android Color documentation, one of the references the converter follows, treats hue as 0 ≤ H < 360 and treats saturation and value as floating-point numbers in the 0.0–1.0 range before they are displayed as percentages. If the destination expects HSL rather than HSV, do not relabel the value component — value tracks the maximum channel, while lightness averages the maximum and minimum, so the two are not interchangeable. Use a dedicated HSL converter when that is the destination.
Practical Examples Beyond the Wheel
Once you move past the six pure wheel positions and the gray axis, the conversion becomes a matter of arithmetic. The shape of the relationship, however, follows two simple rules. First, any color with a single dominant channel and the other two set near zero will sit close to that channel's hue and reach saturation close to 100%. Second, pulling the other channels toward the maximum drives saturation downward and pushes the hue toward whichever channel catches up last. A subtle shift from a vivid orange to a desaturated tan preserves the orange hue band but visibly flattens the color along the gray axis, and the converter will show the saturation dropping while the hue stays within the same 30° region.
For arbitrary inputs, the fastest path is to plug the channels into the RGB to HSV Converter and read off the values. For comparing palette coordinates or moving an 8-bit RGB sample into a control that only exposes HSV, this in-browser tool runs entirely client-side and does not save a color history — useful for design exploration, scripting, and teaching without sending data anywhere. Inputs remain visible after conversion, so changing one channel and pressing Convert again is a quick way to see how the three HSV components respond to a single-channel adjustment.
If you're weighing options, Convert a Hex Code From an Image to RGB Channels covers this in detail.
If you're weighing options, CMYK Color Chart Tips: Common Mistakes With Named Colors covers this in detail.