RGB values are what machines hand you — colour pickers in code editors, image software exports, canvas APIs — but they are a clumsy language for adjusting a colour. This RGB to HSL converter takes the three channel numbers (each 0–255) and re-expresses the exact same colour as HSL: hue as an angle on the colour wheel, saturation and lightness as percentages. The point of the translation is control. Want the same colour but muted? Drop the saturation. Need a darker version for text on a light background? Walk the lightness down. In RGB both of those jobs mean fiddling with three numbers at once and hoping; in HSL each is one number moved deliberately. The converter also returns the CSS hsl() line and the hex code, shows a live swatch of the colour you described, and does everything with JavaScript in your browser — the default values (15, 118, 110) are this site’s deep teal, whose HSL answer, 175 / 77% / 26%, you can check against any reference.
The RGB to HSL maths, step by step
First the channels are scaled to 0–1: 15 becomes 0.059, 118 becomes 0.463, 110 becomes 0.431. Lightness is the midpoint of the extremes: the largest channel is 0.463 (green), the smallest 0.059 (red), so L = (0.463 + 0.059) / 2 ≈ 0.26, shown as 26%. Saturation depends on how spread the channels are relative to that lightness — here the spread is wide and the colour sits below mid-lightness, giving S ≈ 77%. Hue is decided by which channel dominates: green is on top and blue is close behind, which places the angle between the green (120°) and cyan (180°) landmarks, at about 175°. Pure red (255, 0, 0) is the calibration case everyone should test a converter with: max 1, min 0, L = 50%, S = 100%, and since red dominates, H = 0°. If a tool gives you anything else for pure red, the tool is wrong, not the maths.
When RGB arrives and HSL answers
The typical moment: a screenshot sampler or an image library reports a brand colour as RGB, and the design system stores colours as HSL so shades can be generated. Or a developer copies an rgb() value out of browser dev tools and needs to build a hover state from it. Or a data-visualisation palette is defined in RGB by a charting library, and the accessible version needs each series colour darkened by a measured amount — a lightness job, not an RGB guessing game. In each case the conversion is lossless in the descriptive sense: HSL and RGB cover the same colour space, so nothing about the colour changes — only how easy it is to reason about. The hex output is there for the opposite direction of travel, when the design tool wants the colour in its most compact written form.
Rounding and greys: the honest details
Two things surprise people. First, rounding: HSL percentages are whole numbers here, so converting RGB → HSL → RGB can drift by a unit in a channel — invisible in practice, but worth knowing if you are matching a specification pixel-for-pixel. Second, greys: any RGB with three equal channels (128, 128, 128, say) has no hue, and the converter reports h 0, s 0% with the lightness doing all the work (50% for that mid-grey). That is not missing data; it is the correct description of a colour with no chromatic content. Black (0, 0, 0) is l 0% and white (255, 255, 255) is l 100%, both with s 0%.
Frequently asked questions
What is RGB 15, 118, 110 in HSL?
hsl(175, 77%, 26%) — the converter is preloaded with these values, and the swatch shows the deep teal they describe.
Why does my grey have a hue of 0? Is it red?
No. Hue 0 with saturation 0% is how HSL says “no hue at all”. The colour is purely its lightness; the 0 is a placeholder, not a claim of redness.
Can HSL describe every RGB colour?
Yes — both models cover the same sRGB colour space, so every RGB triplet has an HSL equivalent. Only rounding in the displayed percentages can cause a one-unit drift on the way back.
Which should I store in my design system?
Store hex or RGB as the canonical value (they are exact), and derive HSL when you need to adjust a colour. That way the source of truth never accumulates rounding.
Related tools
Versión en español: Conversor de RGB a HSL — Convierte Colores RGB a HSL al Instante. You may also like: Hex to HSL Converter — Get HSL Values from Any Hex Colour · HSL to RGB Converter — Turn HSL Colours into RGB and Hex.
Embed this tool on your website — free
Copy the code below to add this working tool to your own page. A small credit link stays with it — that’s all we ask.
Pingback: HSL to RGB Converter — Free HSL to RGB & Hex Colour Tool with Preview