RGB to HSL

What is the rgb() function?

rgb() is the canonical CSS notation for an sRGB colour, written as three decimal channels from 0 to 255 — for example rgb(255, 0, 0) for pure red. Each channel represents the intensity of one additive primary: red, green or blue. Mix all three at full strength and you get white; set them all to zero and you get black. The format is the lingua franca of JavaScript colour libraries, design tokens and any pipeline that thinks of colour as three integers rather than a packed hex string.

What is HSL?

HSL stands for Hue, Saturation, Lightness — a coordinate system designed to be readable by humans. Hue is an angle on the colour wheel from 0° to 360°: 0° is red, 120° green, 240° blue, and the wheel wraps back to red at 360°. Saturation is how colourful the result is, from 0% (a pure grey) to 100% (as vivid as the hue allows). Lightness runs from 0% (black) through 50% (the most saturated version of the hue) up to 100% (white). The format is the natural home for programmatic colour-scale generation: keep one channel constant and step another to derive tints and shades from a single base.

The conversion math

Normalise the three channels by dividing each by 255, giving values in 0–1. Find the max and min of the three. Lightness is the midpoint: L = (max + min) / 2. If max equals min, the colour is achromatic — saturation is 0 and hue is undefined (the converter emits 0 by convention). Otherwise, saturation depends on lightness: S = (max - min) / (1 - |2L - 1|). Hue is computed from which channel held the max and the difference between the other two, then mapped to 0–360°. The result is rounded for display: hue to whole degrees, saturation and lightness to whole percents.

Use cases

Programmatic colour scales. Generating a 10-step tint ramp from a single base colour is dramatically easier in HSL than in RGB — keep hue and saturation constant, step lightness from 95% down to 10%, and you have a coherent scale. Converting your RGB base to HSL is the first step.

CSS authoring. When the brand stylesheet wants colours expressed in HSL for readability (it’s obvious at a glance that hsl(210, 80%, 45%) is a blue), but your source values are RGB from a design tool, this converter is the bridge.

Design systems. Token pipelines often normalise base colours into HSL before deriving variants, so the conversion is built into the build step.

Accessibility tweaks. When a colour fails a WCAG contrast check against a background, bumping lightness while keeping hue and saturation constant is the simplest fix. HSL makes the single-axis adjustment trivial.

JavaScript colour manipulation. Libraries like chroma.js and color let you pass HSL strings or component values directly, which keeps derivative-colour code legible.

Pitfalls

• HSL is not HSV. Photoshop uses HSV (the third channel is “value” / brightness, not “lightness”). The numbers look similar but mean different things. CSS only accepts HSL.
• HSL lightness is not perceptual. A lightness: 50% yellow looks much brighter than a lightness: 50% blue. For perceptually-uniform lightness use OKLCH or HSLuv, both outside the scope of this landing.
• Hue is undefined for greys. When R = G = B, HSL hue has no meaningful value — the converter emits 0 by convention. Don’t read meaning into the hue of a grey.
• Alpha not preserved. rgba() input loses its alpha here; use the Color Converter for alpha-aware HSL (HSLA) output.
• Out-of-range channels. Values above 255 or below 0 aren’t valid rgb(); the converter clamps them and tells you it did.

How to use this RGB to HSL converter

1. Paste your rgb() value into the input. The parens and commas are optional; 255, 0, 0 and rgb(255 0 0) both work.
2. The hsl(h, s%, l%) output and the colour swatch update live — no Convert button.
3. If a channel is out of range or non-numeric, a friendly inline message points at the problem.
4. Tap Copy to put the HSL string on your clipboard.

Privacy

The conversion is a small JavaScript function running locally in your browser tab. No server calls, no logging, no analytics on your colour values. The page caches its bundle on first load and works fully offline thereafter.

Compatibility notes

hsl() notation is supported in every browser since IE9 (2011), so it’s safe to use anywhere. The output uses comma-separated form (hsl(210, 80%, 45%)) because that’s still the most widely compatible and what CSS linters accept by default. The modern slash-separated syntax (hsl(210 80% 45% / 1)) is available in the Color Converter when you need alpha-aware modern CSS.