Meta tags:
description=Pick a color by hue, saturation and lightness. Live preview + cross-conversion to hex and RGB. Useful for designing harmonious palettes.;

Headings (most frequently used words):

hsl, calculator, color, about, the, examples, frequently, asked, questions, related, tools, learn, more,

Text of the page (most frequently used words):
the (57), color (41), and (31), hsl (28), hue (20), rgb (19), lightness (18), hex (16), aprender (14), saturation (12), css (9), same (9), tool (9), html (8), text (8), with (7), sliders (7), max (7), tools (6), 100 (6), this (6), field (6), from (6), channel (6), math (6), calculator (6), w3docs (5), generator (5), javascript (5), hwb (5), colors (5), value (5), match (5), how (5), min (5), 255 (5), formatter (5), los (4), code (4), every (4), into (4), paste (4), between (4), you (4), one (4), cmyk (4), picker (4), what (4), without (4), 200 (4), all (4), largest (4), for (4), json (3), encoder (3), editor (3), cuestionarios (3), ejercicios (3), php (3), format (3), why (3), two (3), copy (3), wheel (3), renders (3), black (3), white (3), does (3), but (3), named (3), type (3), then (3), internally (3), three (3), conversion (3), 360 (3), round (3), that (3), ver (3), string (3), para (2), italiano (2), português (2), español (2), français (2), русский (2), deutsch (2), english (2), beautifier (2), diff (2), password (2), herramientas (2), python (2), java (2), git (2), libros (2), fragmentos (2), property (2), accepts (2), lesson (2), hsla (2), values (2), they (2), hover (2), gradient (2), contrast (2), before (2), converter (2), pick (2), plus (2), only (2), sets (2), position (2), which (2), always (2), mirrors (2), function (2), are (2), signs (2), parse (2), leading (2), above (2), converts (2), moves (2), way (2), expresses (2), green (2), average (2), chroma (2), normalized (2), against (2), whichever (2), rgbtohsl (2), const (2), else (2), 152 (2), 219 (2), 204 (2), formula (2), runs (2), shows (2), 170 (2), 213 (2), 00ffd5 (2), about (2), instead (2), keep (2), fixed (2), directly (2), other (2), smallest (2), sectors (2), drag (2), live (2), hash (2), 2026, todos, derechos, reservados, hecho, desarrolladores, idioma, política, privacidad, contacto, acerca, empresa, try, práctica, tutoriales, ejemplos, gratuitos, web, desde, 2014, covers, worked, example, has, dedicated, section, suit, darker, lighter, variants, learn, more, turn, linear, eight, direction, choices, background, check, wcag, aaa, commit, checker, see, time, visually, native, input, reference, tables, related, decide, actually, there, gray, regardless, selected, look, itself, unitless, angle, degrees, while, percentages, parser, enforces, rule, won, recognized, will, need, sign, doesn, entered, didn, any, recognizes, frequent, cause, dropping, required, fails, works, rgba, show, wrong, click, tab, away, parses, derives, work, convert, describe, space, different, ways, amounts, red, blue, light, vivid, close, converting, them, never, changes, addressed, difference, frequently, asked, questions, own, let, abs, return, plain, typing, through, pipeline, uses, 3498db, typed, first, load, teal, spring, fully, saturated, purest, version, unmixed, default, examples, easiest, model, reasoning, feel, raw, slide, active, state, variant, brand, rotate, generate, evenly, spaced, categorical, palette, chart, don, expose, either, relationship, developer, thinking, still, needs, design, older, libraries, variable, doing, arithmetic, hand, follows, standard, scaled, range, gap, comes, much, mapped, onto, six, going, rebuilds, those, starting, rounded, integer, shown, copied, decimals, tracked, client, side, nothing, leaves, browser, result, swatch, alongside, its, equivalents, like, jump, slider, updates, link, under, opens, current, rebeccapurple, use, our, preview, instant, home, iniciar, sesión, buscar, formatters, url, reverse, sha256, md5, length, mixer, general, cursos,

Text of the page (random words):
hsl color calculator w3docs w3docs libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python cursos cuestionarios ejercicios fragmentos herramientas general tools html editor password generator html encoder code diff json beautifier ver los 13 color tools color picker color converter color mixer color hex colors hsl ver los 10 string tools string length calculator md5 hash generator sha256 hash generator string reverse url encoder ver los 19 code formatters javascript formatter css formatter html formatter json formatter php formatter buscar en w3docs k es english en deutsch de русский ru français fr español es português pt italiano it iniciar sesión home tools color color hsl color hsl color calculator pick a color by hue saturation and lightness live preview plus instant hex and rgb conversion hsl calculator hex 00ffd5 copy rgb rgb 0 255 213 copy h s l use this color in our color picker 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 the default color hsl rgb hex text hsl 170 100 50 rgb 0 255 213 00ffd5 what 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 hex hsl typed into the text field text 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 the rgb hsl formula in plain javascript js 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 related tools color picker pick a color visually with a native color input plus hue and lightness reference tables color converter paste one color and see it in hex rgb hsl hwb and cmyk at the same time color contrast checker check wcag aa aaa contrast between two colors before you commit to a lightness value css gradient background generator turn two colors into a copy paste linear gradient with eight direction choices learn more lesson html colors has a dedicated section on hsl and hsla values and why they suit hover darker lighter variants lesson css color property covers every format the color property accepts with a worked hsl example color hex color hwb w3docs tutoriales ejemplos ejercicios fragmentos y cuestionarios gratuitos para la web desde 2014 libros aprender html aprender css aprender javascript aprender git aprender java aprender php aprender python práctica ejercicios cuestionarios editor try it herramientas html editor password generator html encoder code diff json beautifier empresa acerca de contacto política de privacidad idioma english deutsch русский français español português italiano 2026 w3docs todos los derechos reservados hecho para desarrolladores