Color
HSL Color Calculator
Pick a color by hue, saturation, and lightness — live preview plus instant hex and RGB conversion.
HSL Calculator
- HEX:#00ffd5
- RGB:rgb(0, 255, 213)
About the HSL color calculator
This tool sets a color with three sliders — hue (0–360°), saturation (0–100%), and lightness (0–100%) — and shows the live result as a swatch alongside its hex and RGB equivalents. A text field above the sliders accepts a color as hex, rgb(), hsl(), hwb(), cmyk(), or a named color like rebeccapurple — whichever format you paste in. Type one in and the sliders jump to match it; drag a slider and the text field updates to match that instead. A link under the sliders opens the current color directly in the Color Picker tool.
Conversion follows the standard HSL formula. Lightness is the average of the largest and smallest RGB channel, scaled to a 0–1 range. Saturation is the chroma — the gap between the largest and smallest channel — normalized against that lightness. Hue comes from which channel is largest and by how much, mapped onto a 360° wheel in six 60° sectors; going the other way, HSL to RGB rebuilds those same sectors starting from hue. Every channel is rounded to an integer before it's shown or copied — no decimals are tracked internally. All of this runs client-side in JavaScript: nothing you type or drag leaves the browser.
HSL is the easiest model for reasoning about a color by feel instead of by raw channel values. Keep hue and saturation fixed and slide lightness for a hover or active-state variant of a brand color. Keep saturation and lightness fixed and rotate hue to generate an evenly spaced categorical palette for a chart. Hex and RGB don't expose either relationship directly, so a developer thinking in hue and lightness still needs a hex value for design tools, older libraries, or a CSS variable — this tool converts one to the other without doing the arithmetic by hand.
Examples
hsl(170, 100%, 50%)
→ rgb(0, 255, 213)
→ #00ffd5What the calculator shows on first load — hue 170° (a teal/spring-green), fully saturated, at 50% lightness: the purest version of that hue, unmixed with black or white.
#3498db
→ rgb(52, 152, 219)
→ hsl(204, 70%, 53%)Typing a hex value — with or without the leading # — into the text field runs it through the same parse-to-RGB-to-HSL pipeline the tool uses internally, then moves all three sliders to match.
function rgbToHsl(r, g, b) {
r /= 255; g /= 255; b /= 255;
const max = Math.max(r, g, b), min = Math.min(r, g, b);
const l = (max + min) / 2, d = max - min;
let h = 0, s = 0;
if (d) {
s = d / (1 - Math.abs(2 * l - 1));
if (max === r) h = ((g - b) / d) % 6;
else if (max === g) h = (b - r) / d + 2;
else h = (r - g) / d + 4;
h = h * 60 < 0 ? h * 60 + 360 : h * 60;
}
return [Math.round(h), Math.round(s * 100), Math.round(l * 100)];
}
rgbToHsl(52, 152, 219); // → [204, 70, 53]Mirrors the tool's own conversion: lightness from the max/min average, saturation from the chroma normalized against lightness, hue from whichever channel is largest.
Frequently asked questions
What's the difference between HSL and RGB?
They describe the same color space in two different ways. RGB expresses a color as amounts of red, green, and blue light; HSL expresses the same color as hue (position on the color wheel), saturation (how vivid), and lightness (how close to black or white). Converting between them — what this tool does — never changes the color, only how it's addressed.
How do I convert a hex color to HSL?
Type or paste the hex code — with or without the leading # — into the text field above the sliders, then click or tab away from it. The tool parses the hex, converts it internally to RGB, then re-derives hue, saturation, and lightness and moves all three sliders to match. rgb(), hwb(), cmyk(), and CSS named colors all work the same way.
Why does the text field show Wrong Color?
The value you entered didn't match any format the tool recognizes: hex, rgb()/rgba(), hsl()/hsla(), hwb(), cmyk(), or a CSS named color. A frequent cause is dropping the required % signs — hsl(200, 60, 45) fails to parse, but hsl(200, 60%, 45%) works.
Why do saturation and lightness need a % sign but hue doesn't?
This mirrors the CSS hsl() function itself — hue is a unitless angle in degrees, while saturation and lightness are always percentages. The tool's parser enforces the same rule: hsl(200, 60, 45) without the % signs won't be recognized, but hsl(200, 60%, 45%) will.
Does one hue value always look the same?
No. Hue only sets the position on the color wheel — saturation and lightness decide what actually renders there. At 0% saturation every hue renders as the same gray, and at 0% or 100% lightness every hue renders as black or white, regardless of which hue is selected.