Skip to content
ToolQivo

HSL to HEX Converter

Convert HSL to HEX and back, with the maths written out.

Color Tools Reviews Free · no sign-up

HSL

HEX 
The hex code appears here

Quick Tool Overview

The HSL to HEX Converter moves between the notation you think in and the notation you paste, in both directions, with sliders for hue, saturation and lightness and alpha handled as an eight-digit HEX code.

What it does
Converts HSL to HEX and HEX to HSL
You give it
HSL values, or a HEX code
You get back
The other notation, live, with the working shown
Best for
CSS work and finding a colour by feel
Color Tools Free, unlimited use No sign-up Runs in your browser

About the HSL to HEX Converter

HSL is the notation you think in — hue as an angle on the colour wheel, saturation and lightness as percentages — and HEX is the notation you paste into a stylesheet or a design tool. This converts between them in both directions.

Three sliders drive the conversion, so you can find a colour by feel rather than by guessing numbers, and the HEX updates as you drag. Going the other way, paste a HEX code and the sliders move to match.

Alpha is handled in both directions: an HSLA value with an alpha channel becomes an eight-digit HEX, which every current browser understands. The conversion itself is shown step by step, because HSL to RGB is one of the few colour conversions that is genuinely awkward to do by hand and useful to see once.

Key features of the HSL to HEX Converter

Sliders, not guesswork

Drag hue, saturation and lightness and watch the HEX update, rather than typing numbers and checking.

Both directions

Paste a HEX code and the sliders move to match it, so an existing colour can be adjusted rather than replaced.

Alpha supported

An HSLA value becomes an eight-digit HEX, which every current browser reads.

The maths shown

HSL to RGB is genuinely awkward by hand, and worth seeing once written out.

Every other notation too

RGB and the rest are produced alongside, each with its own copy button.

How to use the HSL to HEX Converter

  1. 1

    Set the HSL values

    Drag hue, saturation and lightness, or type an hsl() string straight in.

  2. 2

    Read the HEX

    The six-digit code updates live, with an eight-digit version when alpha is below 1.

  3. 3

    Or go the other way

    Paste a HEX code and the sliders and percentages move to match it.

  4. 4

    Take the whole set

    RGB and the other notations are produced alongside, each with a copy button.

Frequently asked questions

Because HSL lightness is a geometric position in the RGB cube, not a measure of perceived brightness. hsl(60 100% 50%) is yellow and very bright; hsl(240 100% 50%) is blue and very dark. OKLCH exists to fix this.

Reviews of the HSL to HEX Converter

What people who use the HSL to HEX Converter think of it. Reviews come from visitors and are posted as written.

No ratings yet

Yours would be the first.

  • 5 0 reviews rated 5 stars
  • 4 0 reviews rated 4 stars
  • 3 0 reviews rated 3 stars
  • 2 0 reviews rated 2 stars
  • 1 0 reviews rated 1 star

Write a review

Used this tool? Your rating helps the next person decide.

Your rating

Plain text only — links, email addresses and HTML are not accepted. Your name and review are shown publicly; nothing else is collected. See the privacy policy.

0 reviews

Newest first

No reviews yet

Be the first to rate the HSL to HEX Converter. It takes half a minute and no account.

Write the first review

More color tools