HSV to RGB Color Converter
Convert HSV (hue, saturation, value/brightness) color values to RGB.
How to use this tool
- Enter the hue (0–360°), saturation (0–100%), and value/brightness (0–100%).
- The tool outputs the equivalent R, G, B channel values (0–255).
- Copy the rgb() string into your CSS or code.
Convert HSV (Hue, Saturation, Value) — also known as HSB — to RGB. HSV is the model used in most design-tool color pickers.
Formula
Given H (0°–360°), S (0–100%), V (0–100%), normalize to h = H/360, s = S/100, v = V/100, then:
i = floor(h × 6), f = h × 6 − i
p = v(1−s), q = v(1−fs), t = v(1−(1−f)s)
Select (R,G,B) by sector i mod 6: 0→(v,t,p), 1→(q,v,p), 2→(p,v,t), 3→(p,q,v), 4→(t,p,v), 5→(v,p,q). Multiply each by 255 and round.
How it works
The algorithm divides the hue circle into six 60° sectors. Within each sector, four intermediate values (p, q, t, and v itself) determine how the RGB channels transition smoothly. When saturation is 0, all three channels equal the value component, producing a neutral grey. The final RGB values are scaled from the 0–1 range to 0–255 integers.
Common mistake: confusing HSV (also called HSB — Hue, Saturation, Brightness) with HSL (Hue, Saturation, Lightness). At full saturation and maximum value/lightness, both models produce the same vivid hues. However, in HSV a value of 50% with 100% saturation gives a dark vivid color, whereas in HSL a lightness of 50% with 100% saturation gives the purest vivid hue. The two models are not interchangeable and require separate conversion formulas.
Worked example
Convert HSV(0°, 100%, 100%) to RGB
- Normalize: h = 0/360 = 0, s = 1.0, v = 1.0.
- i = floor(0 × 6) = 0; f = 0. p = 1(1−1) = 0; t = 1(1−(1−0)×1) = 0.
- Sector 0: R = v = 1, G = t = 0, B = p = 0.
- Scale to 255: R = 255, G = 0, B = 0.
RGB value: rgb(255, 0, 0) | R: 255, G: 0, B: 0
Common mistakes to avoid
- Providing hue as a value in 0-1 rather than 0-360, which compresses all colors into the red sector and produces wrong output.
- Confusing HSV (value = max channel brightness) with HSL (lightness = average of max and min) -- they use different conversion formulas.
- Forgetting that S = 0 is achromatic regardless of hue, so passing H = 180, S = 0, V = 100 should yield pure white, not a cyan tint.
Key terms
- HSV (HSB)
- Hue–Saturation–Value (also called Hue–Saturation–Brightness). A color model that represents colors as a hue angle, a saturation percentage (0 = grey, 100 = fully vivid), and a brightness value (0 = black, 100 = full brightness).
- Value (V) vs. Lightness (L)
- In HSV, Value = 100% with any saturation gives a bright vivid color. In HSL, Lightness = 50% gives the purest hue, while Lightness = 100% always gives white regardless of saturation. The two scales are fundamentally different.
- Hue sector
- One of the six 60° segments of the hue circle (red, yellow, green, cyan, blue, magenta) used by the HSV-to-RGB algorithm to determine which pair of channels are transitioning at any given hue angle.
- Color saturation
- In HSV, saturation measures how much color is present versus grey. At 0% the color is a neutral grey equal to the value; at 100% the color is fully vivid with no grey component.
Frequently asked questions
- Is HSV the same as HSB?
- Yes. HSV (Value) and HSB (Brightness) are identical; the name difference is just a convention used by different applications.
- What hue is green?
- In HSV, green is at hue 120°, blue at 240°, and red at 0° (or 360°).