CanDoYa
All tools
Saved toolsYour favorites

Add to favorites

Saved in this browser only.
Private browser utility / Color & Design

HSL to HEX Converter

Runs entirely in your browser - no upload, no sign-up.

Live workspaceLocal processing

HSL color

Enter hue in degrees and saturation and lightness as percentages.

°
%
%
Examples
6-digit HEX#FF5833
RGB equivalentrgb(255, 88, 51)
Normalized HSLhsl(11, 100%, 60%)
Share this tool
hsl to hex / browser utility
01 / Overview

How do I convert HSL to HEX?

Convert hue, saturation and lightness into red, green and blue channels, round each channel to a byte from 0 to 255, then write those bytes as hexadecimal pairs. For example, hsl(11, 100%, 60%) becomes rgb(255, 88, 51), so its six-digit HEX code is #FF5833.

02

How to use

  1. 01
    Enter an HSL color

    Paste hsl(11, 100%, 60%) or enter hue, saturation and lightness with the synchronized fields and sliders.

  2. 02
    Check the live color

    The preview, HEX code and RGB equivalent update immediately as you adjust any component.

  3. 03
    Add opacity if needed

    Enable opacity to produce an eight-digit HEX value whose final pair stores alpha.

  4. 04
    Copy the HEX code

    Use Copy to place the CSS-ready HEX value on your clipboard.

03

Who it's for

  • Front-end developers turning adjustable HSL theme values into compact HEX tokens for CSS, SVG or configuration files.
  • UI designers handing colors to design tools and brand libraries that expect six-digit HEX codes.
  • Design-system authors checking the exact sRGB bytes produced by calculated hue, saturation and lightness scales.
  • Marketing teams moving a campaign color between editors that expose different color formats.

HSL describes color with a hue angle plus saturation and lightness percentages. HEX stores the same sRGB color as three base-16 channel pairs. Type a complete hsl() value or adjust the synchronized controls. Add opacity when you need CSS's eight-digit #RRGGBBAA form. The conversion runs locally in your browser with no upload or account.

HSLHEX
hsl(0, 100%, 50%)#FF0000
hsl(180, 100%, 25%)#008080
hsl(210, 100%, 56%)#1F8FFF

FAQ

Is this HSL to HEX converter free?

Yes. The converter is free with no sign-up, download or conversion limit. Enter an HSL value, adjust the controls and copy the HEX result immediately.

Are my HSL colors uploaded?

No. HSL to HEX conversion is plain arithmetic performed entirely in your browser. Your values are not uploaded or sent to a conversion service.

What HSL values can I enter?

Hue can be any finite angle because it wraps around the color wheel. Saturation and lightness must each be from 0 to 100 percent. You can paste CSS hsl() syntax or use separate numeric controls.

What is the HSL to HEX formula?

Compute chroma as (1 - |2L - 1|) times saturation, choose temporary RGB values from the hue's 60-degree sector, add the lightness offset, and multiply by 255. Round each RGB channel and write it as a two-digit hexadecimal pair.

What happens when hue is above 360 or negative?

Hue wraps because it is an angle. A hue of 400 degrees becomes 40 degrees, while -20 degrees becomes 340 degrees. Both still produce a valid color without changing saturation or lightness.

Can a HEX color include HSL opacity?

Yes. Enable opacity to create the eight-digit #RRGGBBAA form. The last pair maps 0 percent opacity to 00 and 100 percent to FF. For example, 50 percent opacity becomes the alpha pair 80.

Why might HEX convert back to slightly different HSL values?

HEX stores only 256 levels for each RGB channel. Fractional HSL colors often fall between those levels, so conversion rounds to the nearest byte. Converting that HEX back can therefore shift hue, saturation or lightness slightly.