HSL to hex converter: turn hue, saturation and lightness into a hex code

Hue picks the spot on the color wheel: 0 is red, 120 is green and 240 is blue, with the other hues in between. Saturation sets how far the color sits from gray, and lightness sets how far it sits from black or white. At full saturation, 50% lightness gives the pure hue. Those three numbers produce red, green and blue values from 0 to 1. The converter scales them to 0 to 255, rounds each to a whole number and writes the pairs. CSS Color 4 gives the sample code for these steps.

The page's own color runs through every step: hsl(190, 75%, 60%) gives rgb(76, 204, 230), which is #4CCCE6. Pure red makes a good check, since hsl(0, 100%, 50%) gives #FF0000. At 0% saturation the hue stops mattering. Any hue gives a gray at the chosen lightness. For example, hsl(0, 0%, 50%) gives #808080.

Hex has 16.7 million codes. Whole-number HSL has far fewer combinations, so some hex codes can't be reached exactly. This page's color survives the trip: #4CCCE6 to HSL and back gives #4CCCE6. Take #3B82F6, write it as HSL and convert back, and the result is #3C83F6. Keep the hex when you need an exact match.