ColorKitFree rgb to hsl converter
RGB to HSL with the arithmetic on screen
Free, no signup: set red, green and blue on the three sliders — or type rgb(219, 39, 119) — and the hsl() equivalent appears next to every intermediate value that produced it, from the winning channel through the channel spread to the division that yields saturation. A second panel takes a whole column pasted out of a stylesheet, up to 200 lines with channel triples, hex codes and keywords mixed freely, and returns one hsl() line per row with unparseable rows called out by number. Relative luminance sits beside the lightness figure, because those two readings disagree far more often than people expect.
- 100% free
- No signup
- Six intermediates shown
- 200-line batch column
- Luminance beside lightness
rgb(219, 39, 119)
#db2777
Press Ctrl+V anywhere on the page to drop in an rgb() value — no need to click the field first.
- hsl(), comma form
- hsl(), space form
HSL calls this 50.6% light. Its WCAG relative luminance is 0.1784 — a different quantity, and the one an accessibility audit reads.
How this triple was derived
| Channels on 0-1 | R 0.8588 · G 0.1529 · B 0.4667 |
|---|---|
| max and min | max 0.8588 (red) · min 0.1529 |
| delta = max − min | 0.7059 |
| L = (max + min) ÷ 2 | 0.5059 → 50.6% |
| S = delta ÷ (1 − |2L − 1|) | 0.7059 ÷ 0.9882 = 0.7143 → 71.4% |
| Hue branch | ((G − B) ÷ delta) mod 6 × 60 = 333.33° |
A whole column at once
One value per line, up to 200. Anything the parser accepts works, so a mixed column of channel triples, hex codes and keywords converts in one pass.
How to convert RGB to HSL
Set the channels, read why the answer is the answer, then convert the rest of the file in one paste.
Set the three channels
Each slider runs 0-255, and the text field under them takes the value exactly as it appears in your CSS: rgb(219, 39, 119), the space-separated rgb(14 165 233), rgba() with a decimal alpha, percentage channels such as rgb(85.9% 15.3% 46.7%), and bare keywords like slategray. Whichever route you take, the swatch and the hex code beside it move together.
Read the derivation, not only the result
The panel on the right prints the six values the formula walks through: the channels rescaled to 0-1, which of them is largest and which smallest, the difference between the two, the midpoint that becomes lightness, the division that becomes saturation, and which of the three hue branches ran. When a number looks wrong, the row that produced it is on screen rather than buried in a library.
Convert the rest of the file in one paste
Drop a column into the batch box — one value per line, up to 200 — and each line comes back as hsl(). Rows the parser rejects keep their position in the table and are listed by line number underneath instead of quietly disappearing, which is what makes the output safe to paste back against the original file. The copy button takes the whole output column at once.
Technical specifications
| Channel input | 0-255 per slider, plus text in any spelling the parser reads: rgb(14 165 233), rgba() with a decimal alpha, and percentage channels such as rgb(85.9% 15.3% 46.7%) |
|---|---|
| Intermediates shown | Six — the 0-1 channels, the largest and smallest, their difference, L = (max + min) ÷ 2, S = delta ÷ (1 − |2L − 1|), and which hue branch ran |
| Batch limit | 200 lines per run, one value per line; rejected lines keep their row and are listed by line number rather than dropped |
| Hue resolution | One degree is a 360th of the wheel; at S 100% and L 50% that is a step of 4.25 of 255 on whichever channel is ramping |
| Achromatic input | R = G = B makes the difference zero, so saturation is 0 and hue has no value; all 256 greys report hsl(0, 0%, L) |
| Lightness at the ends | At L = 0% or L = 100% the divisor 1 − |2L − 1| is zero, and saturation is reported as 0 instead of as a division by zero |
| Luminance | WCAG relative luminance to 4 decimal places, computed on linearized channels rather than on the raw bytes |
| Where the batch runs | In this tab — a 200-line column is converted locally and no part of it is uploaded |
Frequently asked questions
Why do yellow and blue both come out at 50% lightness when one is obviously brighter?
Because HSL lightness is the midpoint between the largest and smallest channel, and nothing in that arithmetic knows how an eye responds. rgb(255, 255, 0) gives hsl(60, 100%, 50%) and rgb(0, 0, 255) gives hsl(240, 100%, 50%), yet their WCAG relative luminances are 0.9278 and 0.0722 — a contrast ratio of 8.00:1 between two colors the notation calls equally light. That gap is why the luminance figure sits beside L on this page, and why a palette spaced evenly in L looks lopsided once it is rendered.
What is the 1 − |2L − 1| in the saturation formula doing?
It is the width of the color slice available at that lightness. HSL is two cones joined at their bases: the slice is widest at L = 50%, where the divisor is 1, and it narrows to nothing at both black and white, where the divisor is 0. Dividing the channel spread by that width is what lets rgb(255, 0, 0) and rgb(255, 200, 200) both report 100% saturation despite one having a spread of 255 and the other a spread of 55 — saturation is measured against the most spread that lightness can physically hold.
Does HSL reach any color that RGB cannot?
No — it is the same sRGB cube under different coordinates, the same 16,777,216 colors addressed by an angle and two ratios instead of by three bytes. Renaming a space never widens it; reaching colors outside sRGB needs Lab, LCH or a wider RGB primary set, not a different spelling of the colors you already have. What the change of coordinates does buy is that colors which look related end up near each other numerically, which raw channels do not guarantee.
My values are percentages rather than 0-255 — does that work?
Yes, because CSS defines a percentage channel as a fraction of 255: rgb(85.9% 15.3% 46.7%) resolves to the same color as rgb(219, 39, 119). One caution about this page rather than about the standard — each token is parsed on its own, so a mixed function such as rgb(219, 15.3%, 119) is still read here even though CSS does not permit the two spellings inside one function. Do not treat a result on this page as evidence that a browser will accept the declaration.
Which channel decides the hue?
The largest one picks the branch and the other two decide where inside it you land. Red as the maximum gives ((G − B) ÷ delta) mod 6 and produces the arc running through 0°; green as the maximum gives (B − R) ÷ delta + 2 and lands between 60° and 180°; blue as the maximum gives (R − G) ÷ delta + 4 and lands between 180° and 300°. Each branch is then multiplied by 60, which is why the wheel falls into six arcs rather than into some rounder number.
Can I convert a whole column pasted out of a stylesheet?
Yes, up to 200 lines in one pass, and the column does not have to be uniform. Channel triples, hex codes and keywords can share a paste because every line is parsed independently, and lines the parser rejects stay in the table with their number so the output still lines up against the file you copied from. Converters that silently drop bad rows shift everything below them by one, which is the exact failure that makes a bulk conversion untrustworthy.
Why does hue stay at 0 while I drag the sliders through grey?
Because when the three channels are equal there is no hue to report. The difference between the largest and smallest channel is zero, saturation is defined as zero rather than as a division by zero, and all 360 hues would produce that identical pixel — so the 0 you see is a convention, not a measurement. Every one of the 256 greys from rgb(0, 0, 0) to rgb(255, 255, 255) reads as hsl(0, 0%, L), and the instant one channel moves the hue snaps to whatever that channel implies.
About the RGB to HSL formula
The conversion is short enough to read in full, which is why this page prints it rather than hiding it. Rescale the channels to 0-1, take the largest and the smallest, and their midpoint is lightness; their difference divided by the width of the slice at that lightness is saturation; and whichever channel came out largest selects one of three expressions for hue, each multiplied by 60 to land in one of the six arcs of the wheel. Both cylindrical models date to the same year — Alvy Ray Smith’s HSV and Joblove and Greenberg’s HSL were presented at SIGGRAPH 1978, when a designer needed to name a color at a terminal without a picker to drag. The channels themselves have not moved: the RGB to hex page writes the same triple as a six-digit code, and RGBA to hex handles the alpha column that usually travels with it.
The trap in the result is the word lightness. It is a midpoint of two channels, not a measure of light, and it is blind to the fact that the eye assigns 71.5% of luminance to green and 7.2% to blue. That is how two colors both marked 50% light can differ by 8:1 in contrast, and it is why a set of swatches generated by stepping L evenly will look flat in the yellows and muddy in the blues. Nothing about the conversion is wrong — the formula is doing precisely what it claims — but an audit that treats L as brightness will pass colors it should have failed, so the relative luminance is printed alongside it here as a standing correction.
The reason this page takes a pasted column is that converting one value is rarely the actual job. The job is usually a legacy stylesheet full of channel triples that someone wants expressed in a notation a theme can vary, and doing that by hand is where errors enter — most bulk converters drop the lines they cannot read, which silently shifts every row beneath them and leaves you reconciling two lists of different lengths. Once the column is converted, the color wheel is where the hues you have just exposed become a set of relationships, hex to HSL covers the same move when the file holds codes rather than channels, and HSL to RGB takes the triples back to channels for the targets that cannot read them.
What happens to a pasted column
Every number on this page is worked out by JavaScript running in the tab you are reading it in. Nothing you type, paste or open is uploaded, logged or kept, which is also why the tools carry on working after you disconnect from the network.
The batch box is no exception and gets no special treatment: a 200-line column is parsed in the same tab as everything else, is not written to storage, and is gone as soon as you clear it or leave the page.