HSV / HSB to RGB Converter

HSV — hue, saturation, value, also labelled HSB (brightness) in tools like Photoshop — is the model behind most color pickers. This converter lets you edit HSV, RGB, or hex and updates the rest live, and it shows the HSL equivalent alongside so you can see exactly how Value differs from Lightness. Everything runs in your browser.

How to use the HSV / HSB to RGB Converter

Drag the color picker, or edit any field directly. Changing the HEX or RGB value recomputes the HSV triple; editing H, S, or V recomputes RGB and hex. Hue is entered in degrees from 0 to 360, while saturation and value are percentages from 0 to 100.

The HSL field is read-only and updates alongside so you can watch how the same color is described differently in the two models. A fully saturated, full-value color such as pure red is hsv(0, 100%, 100%) but hsl(0, 100%, 50%) — the lightness is 50%, not 100%, which is the single most common source of confusion when moving between the two.

The preview swatch reflects the current color, and the summary line lists the RGB, HSV, and HSL values together for easy copying. All conversion happens locally in the browser.

HSV versus HSL — what Value really means

HSV stands for hue, saturation, and value, and it is sometimes written HSB, where the B is "brightness" — the two names describe the same model. Hue is the position around the color wheel in degrees: 0° is red, 120° green, 240° blue. Saturation is how pure or vivid the color is, from a gray at 0% to a fully intense color at 100%. Value is how much light the color has, from black at 0% up to its brightest at 100%. The model is usually visualized as a cone or cylinder with hue around the rim, saturation along the radius, and value up the axis.

HSV is the model that powers most color pickers — the familiar square-plus-hue-strip interface in Photoshop, GIMP, and countless web widgets is an HSV (HSB) picker. It maps neatly onto how people pick colors interactively: choose a hue from the strip, then move within the square to set saturation and value. It is also convenient in code for tasks like generating evenly spaced hues or building a tint by simply lowering value.

The crucial difference from HSL lies in the third coordinate. In HSV, value = 100% with saturation = 100% gives the most vivid version of a hue — pure red, pure blue. In HSL, that same vivid color sits at lightness = 50%, because in HSL lightness runs all the way to white at 100% and the pure hue is the midpoint. So lowering Value in HSV darkens a color toward black, while lowering Lightness in HSL also moves toward black but raising it moves toward white — HSV has no "toward white" axis; you desaturate instead. Neither model is perceptually uniform, meaning equal numeric steps do not look like equal visual steps, which is why modern design systems increasingly reach for OKLCH. But for picking and manipulating colors by hand, HSV remains the most intuitive of the classic models.

Common use cases

• Matching a color picker. Read or set the exact HSV/HSB numbers shown in Photoshop, GIMP, or a design tool.
• Generating shades. Lower Value to darken or reduce Saturation to mute a color programmatically.
• Building hue ramps. Step Hue around the wheel at fixed saturation and value for evenly spaced colors.
• Understanding HSV vs HSL. See both representations of one color side by side to avoid lightness confusion.