RGB / HSL / HSV Color Converter

Convert colors between RGB, HSL, HSV, and hex with visual picker and live preview.

Tested tool guide Tested browser tools Checked August 16, 2026

What RGB / HSL / HSV Color Converter does, with a checked example

Color is only a triple of numbers, but there is more than one way to number it. This tool converts a single color between hex, RGB, HSL, and HSV, and it keeps a visual picker and live preview in sync with whatever you type, so the fields always describe the swatch you are looking at. The thing users trip over is that HSL and HSV are two different models with almost the same abbreviation: a 50% saturation in one is not 50% in the other, so a color that looked vivid in one can look washed out when read as the other.

Worked example

A concrete input and expected output from the current implementation.

Input

#0080FF

Expected output

RGB: 0, 128, 255 | HSL: 210°, 100%, 50% | HSV: 210°, 100%, 100%

Blue is the dominant channel, so hue is 209.88°, shown rounded to 210°. Saturation is 100% in both models because the largest channel is at full strength and the smallest is zero; they split on the third axis, with lightness (the midpoint of max and min) at 50% versus value (the max itself) at 100%.

How the result is produced

The conversion math

Channels are normalized to 0-1 and the largest and smallest are found. Hue comes from which channel is the maximum, using the signed difference of the other two. Lightness is the midpoint of max and min; value is just max. Saturation is delta over max for HSV but delta over (1 - |2L - 1|) for HSL, so the two diverge on light and dark colors.

Fields and picker stay in sync

Every field is editable and all values update together: type a hex code and the RGB, HSL, and HSV fields recompute while the preview repaints; drag in the visual picker and the fields update the other way. The preview swatch is the arbiter, so a value you misremembered reveals itself immediately: the color on screen is the truth, and the numbers are simply whatever triple describes it.

Good uses

You have a hex value from a design mockup and need a lighter variant: convert to HSL, raise lightness by ten points, and read the new hex off the preview instead of guessing with opacity tricks.
Your image editor reports colors in HSB, which is what many programs call HSV, and you need the same color as a CSS value: convert it to hex or HSL here.
Two documents claim to use the same brand color but look different: convert both values to hex and compare the swatches side by side to find which one is actually off.

Limits and checks

HSL and HSV are not the same model: the third axis is lightness in one and value in the other, and the saturation formulas differ, so the same S percentage gives different colors in each. Only the hue number carries over unchanged.
Grays and any color where the three channels are equal have no meaningful hue or saturation; tools report these as 0, which is a convention, not a measurement. For a gray, lightness and value are numerically identical.
Hue is cyclic and rounded: 0° and 360° are the same color, and a hue of 209.88° displays as 210°. When moving values between tools, also confirm the input convention, 0-255 integers versus 0-1 decimals versus percentages, or the same numbers can be off by a factor of a hundred.

Common questions

Should I use HSL or HSV?

For CSS, HSL: the hsl() function is a native CSS color form, while HSV has no CSS equivalent. Most image editors use HSV under the name HSB in their color pickers. If a design tool hands you an HSV triple, convert it to hex or HSL here before putting it in code. For choosing colors by eye, either model works; for sharing colors, hex or HSL is the safer target.

Why do I get a slightly different number than another converter?

Almost always rounding. Converters typically show hue rounded to a whole degree and saturation and lightness to whole percentage points, so 209.88° appears as 210° here and 209.9° elsewhere. A difference of one in the last digit is rounding, not an error. If values disagree by more than that, check that you compared HSL with HSL and HSV with HSV, and that both tools used the same input range.

References and verification

The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.