HSL to Hex Converter

Convert CSS hsl() values to hex colour codes. 100% in your browser, no signup.

100% in your browser — files never uploaded.
Postcrest — full AI image suite

Need more than a converter? AI background removal, upscale, edit and generate — one workspace.

Get the AI toolsSee pricing

How to use the HSL to Hex Converter

  1. 1
    Paste an hsl()
    Like 'hsl(252, 100%, 67%)' — works with or without the function notation.
  2. 2
    Read the hex
    Live conversion.
  3. 3
    Copy
    Click Copy or select.

When to convert HSL to Hex

HSL is great for designing colour systems — rotate hue, adjust saturation, set lightness. Once you've picked the colour, hex is the compact form to paste into CSS, design files and brand variables.

This converter does the math exactly — same RGB output, just in hex form.

Frequently asked questions

Free?
Yes.
Browser-only?
Yes — no uploads.
Hue range?
0-360 (or wraps around).
Saturation / lightness?
0-100 (interpreted as percentages).
Mobile?
Yes.

Need more than free tools? Get Postcrest's full AI image suite.

AI background removal, AI upscaling, AI image editor and AI photoshoot — every leading model in one workspace.

AI Image Generator
Every leading model — Flux, Nano Banana, Seedream, GPT-Image, SDXL.
AI Image Editor
Inpaint, outpaint, object removal — describe the edit, AI applies it.
AI Background Remover
Pixel-perfect cutouts in seconds — transparent PNG or any new scene.
AI Image Upscaler
Upscale to 4K, face-aware, print-ready, watermark-free.
Get started — access every AI tool
50% off your first 2 months. Cancel anytime.