HSL to Hex Converter

First convert HSL to RGB, then format each RGB channel as two hexadecimal digits. Normalize saturation and lightness to a 0 to 1 scale, derive two anchor values from the lightness, and map the hue into the red, green, and blue channels. Each channel (0 to 255) becomes a two-digit hex pair, joined into a string like #ff5833.

Hue runs from 0 to 360 degrees around the color wheel, where 0 and 360 are both red, 120 is green, and 240 is blue. Saturation and lightness are percentages from 0 to 100. Saturation of 0 produces a gray, and lightness of 0 is always black while 100 is always white, regardless of hue.

A hue of 120 points to pure green, 100% saturation means the color is fully vivid, and 50% lightness is the most saturated point for that hue. That maps to RGB(0, 255, 0), which is 00, ff, 00 in hex, so the result is #00ff00.

The HSL to RGB math is exact and follows the CSS Color Module formula. The only rounding happens at the very end, when each channel is rounded to the nearest whole number from 0 to 255 so it fits in two hex digits. Two slightly different HSL inputs can therefore land on the same hex code.

RGB describes a color by how much red, green, and blue light it mixes, which is how screens render pixels. HSL describes the same color by hue, saturation, and lightness, which is closer to how people think about color. This tool returns both, so you can pick whichever fits your CSS or design workflow.

Yes. The six-digit hex code (for example #336699) works directly in CSS, HTML, and design tools like Figma or Photoshop. You also get a ready-to-paste rgb() and hsl() string if you prefer those CSS color formats instead.