What does HSV to RGB conversion do?
It turns a color described by hue (an angle from 0 to 360°), saturation and value back into the red, green and blue intensities a screen uses. The method splits the hue circle into six 60° sectors, works out which two channels are active in that sector, and scales them by saturation and value. hsv(210, 88, 100) becomes rgb(31, 143, 255).
Developers reach for this when they want to generate colors rather than pick them: a hue that cycles over time on an LED strip or a loading spinner, a set of chart series spaced around the wheel, or a "same color, darker" variant made by lowering V.
The six-sector method
With S and V as fractions (88% is 0.88), the tool computes three helper values:
- C (chroma) = V × S
- X = C × (1 − |(H / 60) mod 2 − 1|)
- m = V − C
The hue decides how C and X are placed:
| Hue range | (R′, G′, B′) | Colors in this sector |
|---|---|---|
| 0 ≤ H < 60 | (C, X, 0) | red to yellow |
| 60 ≤ H < 120 | (X, C, 0) | yellow to green |
| 120 ≤ H < 180 | (0, C, X) | green to cyan |
| 180 ≤ H < 240 | (0, X, C) | cyan to blue |
| 240 ≤ H < 300 | (X, 0, C) | blue to magenta |
| 300 ≤ H ≤ 360 | (C, 0, X) | magenta back to red |
Finally each channel is (R′ + m) × 255, rounded to the nearest whole number. Only the final RGB is rounded; nothing is rounded along the way.
Worked example: hsv(210, 88, 100)
- V = 1.00, S = 0.88, so C = 0.88.
- H / 60 = 3.5. 3.5 mod 2 = 1.5, minus 1 is 0.5, so X = 0.88 × (1 − 0.5) = 0.44.
- m = 1.00 − 0.88 = 0.12.
- 210° falls in the 180–240 sector, so (R′, G′, B′) = (0, 0.44, 0.88).
- Add m: (0.12, 0.56, 1.00). Multiply by 255: (30.6, 142.8, 255).
- Round:
rgb(31, 143, 255).
That's one step off dodger blue, rgb(30, 144, 255), whose exact HSV is about hsv(209.6, 88.2%, 100%). Whole-number HSV inputs rarely land precisely on a given RGB color.
Hue stepping in 60° increments
At full saturation and value, the sector boundaries give you the primaries and secondaries:
| HSV | RGB |
|---|---|
| hsv(0, 100, 100) | rgb(255, 0, 0) |
| hsv(60, 100, 100) | rgb(255, 255, 0) |
| hsv(120, 100, 100) | rgb(0, 255, 0) |
| hsv(180, 100, 100) | rgb(0, 255, 255) |
| hsv(240, 100, 100) | rgb(0, 0, 255) |
| hsv(300, 100, 100) | rgb(255, 0, 255) |
| hsv(360, 100, 100) | rgb(255, 0, 0) |
Two more show the other sliders at work. hsv(30, 100, 50) is a brown, rgb(128, 64, 0): half value halves every channel. hsv(200, 0, 75) is rgb(191, 191, 191): with zero saturation the hue is ignored and you get a gray.
A caution if you're generating palettes: spacing hues evenly gives evenly spaced angles, not evenly spaced appearance. The W3C notes in CSS Color Module Level 4 that hues in LCH are spaced far better than in HSL or HWB, and HSV shares that weakness. For chart colors that need to look balanced, consider oklch() in CSS.
Input rules
Type three numbers in H, S, V order, separated by commas, spaces or hyphens, and press Convert. hsv(210, 88, 100), 210 88 100 and 210°, 88%, 100% all work, and decimals are fine. Hue must be 0–360; saturation and value must be 0–100. Out-of-range values, negative numbers and inputs with fewer than three numbers get "Enter valid HSV values (H 0-360, S/V 0-100)". Code libraries often use different scales, so convert before pasting: Python's colorsys module, for example, uses 0–1 for every component. Fractional S and V like 210, 0.88, 1.0 get a hint to enter percentages, but a 0–1 hue can't be caught (0.58 is a valid angle), so multiply it by 360 yourself.
The conversion runs entirely in your browser. To go back from RGB to HSV, use the RGB to HSV converter. For a CSS-ready code instead of rgb(), HSV to HEX does the same math and formats the result as #1F8FFF, or you can pass this tool's output through RGB to HEX. Heading to print? HSV to CMYK skips the RGB step.
Last updated