ProToolBox

HSL to HEX — live #color

Set H, S, and L—or paste hsl()—and get HEX, a preview, and a copy block with hsl(), rgb(), and CSS variables. No signup—runs in your browser.

HSL to HEX - live hex, preview, hsl(), and copy

Turn H, S, L into #HEX with a live swatch—when your spec uses degrees and percents, not a hex code.

1 Type H, S, L or paste hsl() · 2 Samples or picker optional · 3 Check preview · 4 Copy color results

Your result

Hue wraps (e.g. 400°). Try hsl(221, 83%, 53%) or a sample chip. Going the other way? HEX → HSL.

Quick samples

Updates live as you edit.

Change H, S, L—HEX and the copy block update together.

Next: HEX → HSL · RGB → HEX · Color converter · Contrast · All tools

  • Runs in your browser—nothing uploads
  • Free, no account
  • Your values stay in this tab

When to use it

When a theme or doc gives HSL but your stack wants #RRGGBB.

  • Match design-tool HSL to CSS hex
  • Paste hsl() from a stylesheet and grab HEX
  • Copy one block with HEX, hsl(), rgb(), and variables

sRGB math—spot-check if your source uses another color profile.

Bookmark if you often flip between HSL notes and hex in code.

Overview

We convert your HSL to sRGB, then to #RRGGBB. The swatch is there so you can eyeball before you paste.

How it works

  1. Enter H (any angle; wraps every 360°), S and L (0–100), paste hsl(), or use the picker.
  2. Check HEX and the preview.
  3. Copy color results for HEX, hsl(), rgb(), and CSS variables in one go.
  4. Reverse path: HEX → HSL · channels: RGB → HEX.

Privacy: Conversion stays in your browser—we do not upload your colors.

FAQ

  • Figma or DevTools? Usual sRGB path—verify if your file uses another profile.
  • Account? No.
  • Upload? No.
  • Phone? Inputs, picker, and preview work on small screens.
  • Real CSS? Paste HEX or the full copy block into your stylesheet or tokens.

HSL in, HEX out—keep this tab next to your editor.

Tools in this category