ProToolBox

HEX to HSL — live hsl()

Type or pick a HEX and get hsl(), H·S·L tiles, rgb(), and CSS variables with a live preview. Optional rgb() paste from DevTools. No signup—runs in your browser.

HEX to HSL - live hsl(), H·S·L, and copy-ready output

Turn #HEX into hsl() and H·S·L tiles—tweak saturation or lightness without guessing hex digits.

1 HEX or picker · 2 Optional rgb() paste · 3 Check hsl() & preview · 4 Copy color results

Your result

Try #2563EB or short #26B. Paste rgb() in the optional field to sync HEX. Want # from HSL? HSL → HEX.

Quick samples

Updates live as you edit.

Valid HEX → hsl(), tiles, and copy block below.

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

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

When to use it

When you only have #RRGGBB but want hue and percents for themes or tokens.

  • Read H/S/L from a brand hex
  • Paste DevTools rgb() and get hsl() too
  • Copy one block with hsl(), channels, rgb(), and variables

sRGB math—verify if your file uses a different profile.

Bookmark when you often nudge colors as HSL, not hex.

Overview

Same color as your #RRGGBB or #RGB, shown as hsl() plus separate H, S, L. The swatch is there to confirm before you copy.

How it works

  1. Enter HEX, use the picker or a sample, or paste optional rgb().
  2. Read the main hsl() line and H · S · L tiles; check the preview.
  3. Copy color results for hsl(), channels, rgb(), and CSS variables together.
  4. Reverse: HSL → HEX · channels: HEX → RGB.

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

FAQ

  • Figma or DevTools? Usual sRGB path—double-check if your source uses another profile.
  • Account? No.
  • Upload? No.
  • Phone? Field, picker, and results work on small screens.
  • Real CSS? Paste hsl(), H/S/L, rgb(), or the variable block into CSS or tokens.

HEX in, HSL out—handy for theme tweaks.

Tools in this category