HSL to HEX Converter

HSL to HEX conversion turns cylindrical color coordinates — hue, saturation, and lightness — into the compact hexadecimal strings that dominate web design, mobile UI kits, and brand style guides. You might tune a palette in HSL because it is intuitive: raise lightness for a tint, drop saturation for a neutral, keep hue fixed for brand consistency. When the next step requires a HEX code like #FF5733 for CSS, a Figma swatch, or a JSON design token, this free converter closes that gap instantly with a live preview and one-click copy.

HSL (Hue, Saturation, Lightness) maps color the way artists think about it. Hue is an angle on the wheel from 0° to 360°. Saturation (0–100%) controls how gray or vivid the color is. Lightness (0–100%) moves between black and white through your chosen hue. CSS accepts the syntax hsl(11, 100%, 60%) — the same numbers you enter here. Search phrases like hsl to hex, hsl to hex converter, and convert hsl to hex describe this everyday handoff from adjustable HSL thinking to portable HEX notation.

A HEX color code stores red, green, and blue as base-16 pairs: #RRGGBB. Six digits cover 16.7 million colors. HEX is shorter than functional RGB notation, easy to grep in codebases, and universally recognized by design tools. It does not expose hue or lightness directly — which is exactly why you convert from HSL when you have been working in cylindrical space but need a hex literal for delivery.

The conversion pipeline is straightforward and matches browser math. HSL values first become RGB integers (each channel 0–255) using standard HSL-to-RGB formulas. Those three channels are then encoded as hexadecimal pairs and prefixed with #. For example, HSL (11°, 100%, 60%) yields RGB (255, 87, 51) and HEX #FF5733. The process is reversible within normal rounding, so you can round-trip through our HEX to HSL tool to verify.

Practical scenarios include: exporting theme tokens after tweaking HSL variables in a design system; translating CSS hsl() custom properties into HEX for a React Native stylesheet; preparing colors for SVG fill attributes that expect hex; matching documentation that lists brand colors as # values after exploring variants in HSL; and teaching students how the same color wears two different notations.

This tool runs entirely in your browser — no account, no upload, no tracking. Enter HSL manually, drag the native picker, load a random example, or tap a gallery chip. Copy the uppercase HEX result or the bonus RGB line for canvas APIs and spreadsheets. For other directions across the converter set, see our HSL to RGB, RGB to HSL, and Color Converter tools.