Free HSL Color Converter – HSL to HEX, RGB & Back

What HSL Is and How the Converter Works

An HSL colour converter lets you describe a colour by hue, saturation, and lightness, then hands you the matching HEX and RGB codes with a live swatch. You set the three values, or paste a hex code to read its HSL, and every format updates together. The appeal of HSL is that it matches how people actually think about colour: hue picks the base tone, saturation sets how vivid it is, and lightness sets how light or dark it appears. That makes it the go-to model for building tints and shades, tuning a palette, or explaining a colour to someone, while HEX and RGB remain the forms most stylesheets and graphics tools expect. The converter bridges the two worlds so you can design in HSL and deliver in whatever notation the project needs. The conversion follows the standard HSL-to-RGB algorithm. Hue is an angle from 0 to 360 degrees around a colour wheel, where 0 and 360 are red, 120 is green, and 240 is blue. Saturation and lightness are percentages. The maths first works out a chroma value from saturation and lightness, then places that chroma at the right point on the wheel using the hue angle, and finally shifts everything up so the lightness is correct. The three resulting channels, each 0 to 255, are the RGB values, and each is then written as two hexadecimal digits to form the hex code. Reversing the process, RGB to HSL, finds the largest and smallest channels to derive lightness, then saturation, then the hue angle from which channel is highest. A worked example makes it tangible. Start with hsl(204, 70%, 53%). The hue of 204 degrees sits in the cyan-blue region, 70 percent saturation makes it fairly vivid, and 53 percent lightness keeps it mid-toned. Run the conversion and it becomes rgb(52, 152, 219), which written in hex is #3498db. Now suppose you want a lighter tint of the same colour: keep hue at 204 and saturation at 70, but raise lightness to 75 percent. The result shifts to a soft sky blue, rgb(147, 200, 236) or #93c8ec, while clearly belonging to the same family. Drop lightness to 35 percent instead and you land on rgb(27, 102, 152), or #1b6698, a deep navy-leaning blue. The converter shows all three formats for each setting the instant you change a slider. The real-world jobs are practical. A designer defines a brand blue in HSL, then generates a five-step scale for backgrounds and borders by changing only lightness, keeping the family coherent. A developer receives an HSL value from a design tool and needs the hex to store in a CSS variable. Someone fixing a washed-out button raises saturation and watches the swatch firm up, then copies the new hex. A person theming a chart rotates the hue in even steps to create distinct but related series colours. Two more that come up often: an accessibility reviewer lowers lightness on a link colour in small increments until the contrast ratio against white clears 4.5:1, and a print designer converting a logo drops saturation to 0 to get the exact grey a mono version needs, since hsl(0, 0%, 50%) always resolves to #808080 no matter what hue was there before. In each case, editing in HSL is far more intuitive than nudging raw hex digits. A few pointers help. Because lightness runs 0 to 100 percent, setting it to 0 always gives black and 100 always gives white regardless of hue, so a colour that has gone black or white usually means lightness is at an extreme. Saturation at 0 produces a grey, again ignoring hue. Modern CSS supports the hsl() function directly, so you can often use HSL as-is, but the converter still provides HEX and RGB for older tools and design software. Everything runs locally in your browser with exact colour maths, so the output matches your input precisely, the tool works offline once loaded, and no colour you enter is uploaded, logged, or stored.

HSL Color Converter Formula & Method

🔥 Trending Tools