HSV to RGB converter
Enter hue, saturation and value and get the equivalent RGB value instantly,
with a live colour swatch and a copy button. HSV (also called HSB) is the model
behind most colour pickers, so this tool turns those picker numbers back into the
rgb() values you need for CSS and design software.
Why the two models exist side by side
RGB describes colour the way a monitor does — as three light intensities. HSV describes colour the way designers think — as a wheel you spin (hue), a purity slider (saturation) and a brightness dimmer (value). That is why nearly every professional design tool — Figma, Photoshop, Illustrator, Sketch — exposes an HSV or HSB picker: it is far easier to nudge a shade lighter or pick a complementary colour. CSS, on the other hand, speaks RGB (and HSL), so the conversion step is unavoidable if you want to take a picker value into code.
How it works
The converter normalises the hue with a wrap so any angle maps onto 0–360, and clamps saturation and value to 0–100%. It divides the hue by 60 to find which of the six 60° segments of the colour wheel the hue falls in, then computes a chroma C = V × S (the colourfulness), an intermediate mixing value X for the edge of that segment, and a brightness offset m = V − C. The right pair of C, X and 0 is assigned to the red, green and blue channels for that segment, m is added to all three, and each is scaled to a 0–255 integer.
Worked example
For hsv(217, 76%, 96%) — a mid-blue:
- Normalise: H = 217°, S = 0.76, V = 0.96
- Segment: 217 ÷ 60 = 3.6 → segment 3 (blue–cyan)
- C = 0.96 × 0.76 ≈ 0.730; X = C × (1 − |3.6 mod 2 − 1|) ≈ 0.438; m = 0.96 − 0.730 ≈ 0.230
- Segment 3 assigns (R, G, B) = (0, X, C) = (0, 0.438, 0.730)
- Add m: (0.230, 0.668, 0.960) → multiply by 255 → rgb(59, 170, 245)
The exact numbers vary slightly by rounding, but the result is always a valid CSS
rgb() value you can paste straight into a stylesheet.
Landmark conversions at a glance
| HSV | Colour | RGB |
|---|---|---|
| hsv(0, 100%, 100%) | Pure red | rgb(255, 0, 0) |
| hsv(120, 100%, 100%) | Pure green | rgb(0, 255, 0) |
| hsv(240, 100%, 100%) | Pure blue | rgb(0, 0, 255) |
| hsv(60, 100%, 100%) | Yellow | rgb(255, 255, 0) |
| hsv(0, 0%, 100%) | White | rgb(255, 255, 255) |
| hsv(0, 0%, 0%) | Black | rgb(0, 0, 0) |
| hsv(0, 0%, 50%) | Mid grey | rgb(128, 128, 128) |
Common mistakes and edge cases
- Value 0 is always black, regardless of hue and saturation, because value sets the overall brightness ceiling.
- Saturation 0 always gives a grey, because removing all colour leaves only the brightness level set by value.
- Hue above 360 wraps automatically — 380° is treated as 20°, so you do not need to pre-normalise it.
- HSV vs HSL confusion: both use hue, but in HSL the pure hue sits at lightness 50% and 100% is white; in HSV the pure hue sits at value 100%. The same numbers mean different colours.
The output rgb() string is valid in any CSS colour property. Click Copy rgb() to put it on your clipboard for a stylesheet, design token, or design handoff tool.
All processing runs in your browser — nothing is uploaded.