Hex to HSL Converter

Convert hex colour codes to CSS hsl() values instantly. 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 Hex to HSL Converter

  1. 1
    Paste a hex code
    3, 6 or 8-digit hex with or without the leading #.
  2. 2
    Read the hsl()
    Live conversion to hue, saturation and lightness.
  3. 3
    Copy
    Click Copy or select the output.

Hex vs HSL

HSL (hue, saturation, lightness) is the intuitive way to think about colour relationships — rotate hue to find complements, drop lightness to make a shade, drop saturation to mute a tint.

Hex is the compact serialisation. HSL is best for working with colour systems; hex is best for pasting into design tools and brand variables.

Frequently asked questions

Free?
Yes — no signup, no watermarks.
Are colours uploaded?
No. Conversion runs in your browser.
What about hsla?
Alpha is handled by hex-to-rgb if you need RGBA; HSL alpha is rare in practice.
3-digit hex?
Supported — expanded automatically.
Mobile-friendly?
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.