03 · Converter
HSL to HEX converter, hsl() → a hex code.
Set hue, saturation and lightness and copy the hexadecimal value that CSS, design tools and style dictionaries expect.
HSL values
HEX
#885AC4
Guide
From wheel position to a written color
HSL describes color the way a designer plans it: pick a hue angle, decide how saturated it should be, then set how light it sits. Hex is how the browser wants to receive it. Converting between them means walking back through the same math that produced the HSL value — turn saturation and lightness into a chroma value, place it against the hue angle on the wheel, then map the resulting red, green and blue channels onto two hexadecimal digits each.
The direction matters for workflow. Authoring in HSL lets you build a family of colors that share a story: a base hue at 56% lightness, a hover state at 62%, a pressed state at 48% with saturation trimmed a few points. Those steps are meaningful while they are expressed as percentages. Once the decisions are made, converting to hex freezes each result into a value that any tool can read without knowing what HSL is.
Because the round trip is lossless in the notation sense — a color is 24 bits either way — converting back and forth does not drift. What does change is rounding: hue is usually rounded to whole degrees and percentages to whole numbers for readability, which can shift a channel by a point. If pixel-exact matching matters, keep the hex value as the source of truth and treat HSL as the view you edit with.
Using the HSL to HEX converter
Enter hue from 0 to 360, saturation and lightness as percentages, and the hexadecimal code is produced immediately alongside a full-size swatch of the result. Constrain saturation before lightness when you are exploring: a hue that looks muddy at 40% saturation often becomes vivid at 70% with lightness held steady, and the swatch tells you which of the two you were really reacting to.
Useful anchors while you work: 0° is red, 120° green and 240° blue; 50% lightness with 0% saturation is mid-gray, while 100% lightness is pure white regardless of hue. Keeping saturation in a narrow band across a palette is what makes a set of buttons look like they belong to one product rather than five.
Once you have the hex value, drop it into a CSS custom property or a theme file and keep the HSL numbers alongside it as a comment if you expect to revisit the palette. Many teams store both — hex for the machine, HSL or OKLCH for the human — and regenerate variants from the perceptual notation instead of nudging hex digits by hand.
Frequently asked questions
- How do I convert HSL to HEX?
- Convert saturation and lightness into an RGB triple using the standard chroma formula for the given hue, then write each channel as two hexadecimal digits. For hsl(266, 47%, 56%) the channels come out as 132, 94 and 194, which is #845EC2.
- What is the hex code for a specific HSL value?
- Enter it above and the result updates as you type. As a rule of thumb, 0% saturation with any hue gives a gray determined only by lightness, and 50% saturation at 50% lightness gives the pure hue — for 266° that is the purple behind #845EC2's neighbours.
- Does converting HSL to HEX lose quality?
- No: both notations store the same 24-bit RGB value, so the conversion is a change of notation, not of color. Only display precision differs — hue and percentage values are commonly rounded to whole numbers, which can move a single channel by one or two points.