ImageColorPicker.com

HSL to HEX converter

Convert any HSL color to HEX, instantly and for free

#3398DB

Paste any color value. We detect the format for you.

H
S
L
HEX result

This color in every format

CMYK profile: Coated FOGRA39 (Photoshop's default for Europe)

Picking a color in HSL is comfortable, but stylesheets, design handoffs and brand documents still run on HEX. This converter closes that gap and gives you the six-digit code for any hue, saturation and lightness combination.

How HSL to HEX conversion works

  1. Turn saturation and lightness into fractions: 60% becomes 0.6.
  2. Compute the chroma C = (1 − |2L − 1|) × S. That is how far the color sits from grey.
  3. Use the hue to place that chroma on the red, green and blue channels, then shift all three by L − C/2.
  4. Multiply each channel by 255, round it, and write it as two hexadecimal digits.

Worked example

HSL hsl(204, 70%, 53%)=HEX #3398DB

Rounding happens once, in the last step, when each channel is snapped to a whole 0–255 value. The result is the closest HEX code to your HSL input and normally identical to what a design tool shows.

HSL and HEX explained

What is HSL?

HSL splits a color into hue (0–360° on the color wheel), saturation (how colorful, 0–100%) and lightness (how bright, 0–100%). Because each part matches the way people describe color, HSL is the easiest format for building tints, shades and consistent palettes, by hand or in code.

Syntax:
hsl(H, S%, L%)
Range:
0–360°, 0–100%, 0–100%
Best for:
palettes, tints and shades, theming

What is HEX?

A HEX code is a six-digit hexadecimal number that stores the red, green and blue channel of a color behind a leading #. Each pair of digits covers one channel, from 00 (none) to FF (full), which gives the same 16.7 million colors as RGB in a much shorter notation. HEX is the default in CSS, design tools and brand guidelines.

Syntax:
#RRGGBB
Range:
00–FF per channel
Best for:
CSS, design handoff, brand guidelines

HSL to HEX reference table

The most common CSS colors, converted from HSL to HEX.

ColorHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

More color converters

Frequently asked questions

Turn saturation and lightness into fractions: 60% becomes 0.6. Compute the chroma C = (1 − |2L − 1|) × S. That is how far the color sits from grey. Use the hue to place that chroma on the red, green and blue channels, then shift all three by L − C/2. Multiply each channel by 255, round it, and write it as two hexadecimal digits.

Rounding happens once, in the last step, when each channel is snapped to a whole 0–255 value. The result is the closest HEX code to your HSL input and normally identical to what a design tool shows.

A HEX code is a six-digit hexadecimal number that stores the red, green and blue channel of a color behind a leading #. Each pair of digits covers one channel, from 00 (none) to FF (full), which gives the same 16.7 million colors as RGB in a much shorter notation. HEX is the default in CSS, design tools and brand guidelines.

Yes. The swap button next to the input takes you to the HEX to HSL converter, which works exactly the same way. Both directions use the same formula, just applied in reverse.

Build the palette in HSL, then export HEX. The palette keeps its logic (same hue, stepped lightness) while the delivered code stays in the format developers expect.