💻

RGB to HSL Calculator

Convert RGB colour values to HSL (hue, saturation, lightness) and the matching hex code — ready to paste into CSS.

Red

Green

Blue

Loading calculator…

How it works

normalise R,G,B to 0–1 · L = (max+min)/2 · S = (max−min)/(1−|2L−1|), 0 when max=min · H from the dominant channel, ×60° (wrap to 0–360)

RGB and HSL are two coordinate systems for the same colours. RGB gives the raw intensities a screen emits; HSL re-expresses them as hue, saturation and lightness, which line up with how we describe colour. The conversion scales each channel to 0–1, takes lightness as the average of the largest and smallest channel, derives saturation from their difference (zero when all three are equal, i.e. a shade of grey), and reads hue from whichever channel is largest and by how much. The result is the same colour, just in the form that makes recolouring, theming and accessibility tweaks easier to reason about.

Worked example

RGB (51, 102, 255) scales to (0.2, 0.4, 1.0). The max is blue (1.0) and the min is red (0.2), so lightness = (1.0 + 0.2)/2 = 0.6 = 60%. The spread gives full saturation (100%), and because blue leads, the hue lands at 225°. So the colour is hsl(225, 100%, 60%), equal to #3366ff.

Sources: HSL and HSV — Wikipedia

Frequently asked questions

How do I get the hex code too?

This converter shows it alongside the HSL. Each RGB channel becomes a two-digit hexadecimal value: 51 → 33, 102 → 66, 255 → ff, giving #3366ff. Hex and RGB are the same numbers in different notation.

What if I enter a value above 255?

RGB channels only range from 0 to 255, so any value outside that is clamped to the nearest valid number before conversion. That keeps the output a real colour rather than returning an error or an impossible result.

Why is saturation 0% for greys?

When red, green and blue are equal the colour has no dominant hue — it is a neutral grey — so saturation is 0% and hue is undefined (reported as 0°). Only lightness varies among greys, from black at 0% to white at 100%.

Related calculators

HEX to HSL Calculator

Convert a hex colour code to HSL (hue, saturation, lightness) and RGB — the CSS-ready values, with a plain-English reading of the colour.

RGB to Hex Converter

Turn red, green and blue values (0–255) into a hex color code and a CSS rgb() string.

Hex to RGB Converter

Convert any hex color code — #aabbcc or shorthand #abc — to its red, green and blue values and a ready-to-paste rgb() string.

Color Contrast Calculator

Check the WCAG contrast ratio between a foreground and background colour, and see whether it passes AA and AAA for normal and large text.

This calculator is for educational purposes. Double-check important results before acting on them.