Convert RGB channels to HSV: value is the largest channel, saturation the spread relative to it, hue the angle from which channel dominates. Useful when you need design-tool picker numbers from CSS colors — with the difference between HSV and HSL made explicit.
Settings
Generated locally in your browser — your settings and results never leave this page.
Max, spread, angle
Three questions turn channels into HSV: how high is the highest channel (value), how large is the spread relative to it (saturation), and which direction does the mix lean (hue). It is the cheapest of the cylindrical conversions — no lightness averaging — which is why graphics code historically favored it.
Worked example: rgb(147, 112, 219)
Medium purple:
V = 219 / 255 = 85.9% S = (219 − 112) / 219 = 48.9% H = blue leads, red second = 259.6° rgb(147, 112, 219) = hsv(259.6, 48.9%, 85.9%)
HSV versus HSL, settled in one table
The same color measured in both cylinders:
| Axis | HSV/HSB | HSL |
|---|---|---|
| Hue | 259.6° (identical) | 259.6° (identical) |
| Saturation | 48.9% — spread ÷ max | 59.8% — spread ÷ distance-from-gray |
| Third axis | V 85.9% — brightest channel | L 64.9% — average of extremes |
Choosing your cylinder
HSV when the workflow says “pick vivid, then darken” (pickers, games, generative art); HSL when it says “lighten/darken around a midpoint” (CSS variants); OKLCH when apparent lightness must be trustworthy (design systems, accessibility). Hue means the same wheel in the first two — that much transfers freely.
Reference values, computed live
Cross-checking a handful of familiar colors is the quickest way to internalize how channel values map to hue, saturation and value. Seven CSS named colors, computed with this page’s exact pipeline:
| Color | RGB | HSV |
|---|---|---|
| orchid | rgb(218, 112, 214) | hsv(302.3, 48.6%, 85.5%) |
| tomato | rgb(255, 99, 71) | hsv(9.1, 72.2%, 100%) |
| mediumseagreen | rgb(60, 179, 113) | hsv(146.7, 66.5%, 70.2%) |
| mediumpurple | rgb(147, 112, 219) | hsv(259.6, 48.9%, 85.9%) |
| goldenrod | rgb(218, 165, 32) | hsv(42.9, 85.3%, 85.5%) |
| crimson | rgb(220, 20, 60) | hsv(348, 90.9%, 86.3%) |
| olivedrab | rgb(107, 142, 35) | hsv(79.6, 75.4%, 55.7%) |
Notice how every vivid color — whatever its hue — carries V near 100%, while the muted ones separate from the vivid ones almost entirely through the saturation column. That single observation explains most of HSV’s behavior in picker dialogs, and spotting it in real values beats memorizing the formula.
A debugging vignette
A recurring bug this conversion diagnoses: a canvas visualization whose “brightness” slider darkens colors unevenly — blues crushing early, yellows barely dimming. The culprit is almost always code scaling RGB channels directly (which changes hue balance) instead of scaling V in HSV space. Convert a few affected colors here, watch which axis actually moved, and the misbehaving operation identifies itself: correct brightness edits leave H and S fixed, incorrect ones smear all three. Five minutes with a converter beats an evening in the debugger.
How to use the RGB to HSV Converter
- Enter the RGB color in any usual notation.
- The result updates live as you type – no convert button needed.
- Compare the HSV output with HSL in the all-formats view to see how the models differ.
- Copy the value with the copy button, or switch the output format dropdown for other export shapes.
Frequently asked questions
What is the RGB to HSV formula?
V = max(R,G,B). S = (max−min)/max, or 0 when max is 0. Hue: identical wheel math to HSL – the leading channel picks the region, the others position within it. rgb(30, 144, 255) → hsv(209.6, 88.2%, 100%).
Why is the value 100% for rgb(30, 144, 255)?
Because its largest channel is already 255 – HSV only asks "how bright is the brightest channel". That single-channel definition makes V cheap to compute and explains why HSV brightness ignores how the other channels contribute to perceived luminance.
When is HSV more convenient than HSL?
When mimicking picker behaviour or generating colors "at full strength": vivid colors live along V=100%, and darkening means simply lowering V. UI eyedroppers, game palettes and procedural art code typically speak HSV.
Why do RGB, HSV and perceived brightness disagree?
HSV's V weighs all channels equally, but eyes weigh green far more than blue. rgb(0,0,255) and rgb(0,255,0) both have V=100%, yet the green is dramatically brighter. For honest lightness use the WCAG luminance in the Color Analyzer or OKLCH L.
What does zero saturation look like in HSV?
The gray ramp: any hue with S=0% renders as the gray whose value is V. Saturation is what separates a color from its equally-bright gray.
Can I feed percentages as RGB channels?
Yes – rgb(12% 56% 100%) parses per CSS rules, scaling by 2.55 before the HSV analysis. Bare numbers, commas and the modern space syntax all work too.
Where do I go from HSV numbers back to CSS colors?
The HSV to HEX converter is the return path – and since HSV never entered CSS, hex or hsl() is what you will actually ship.
