HSL to HEX Color Converter
FreeConvert HSL color values to HEX. Enter hsl(217, 91%, 60%), get #3B82F6. Free, runs in your browser, no signup.
What's next
Settings guide
Input format flexibility:
| Input | Example | Notes |
|---|---|---|
| CSS hsl() | hsl(217, 91%, 60%) | Parsed directly |
| Space-separated | hsl(217 91% 60%) | Modern CSS syntax, also accepted |
| Raw values | 217, 91, 60 | Enter H/S/L fields separately |
| With alpha | hsla(217, 91%, 60%, 0.5) | Outputs 8-digit HEX |
Common HSL → HEX reference:
| HSL | HEX | Color |
|---|---|---|
| hsl(0, 100%, 50%) | #FF0000 | Red |
| hsl(120, 100%, 50%) | #00FF00 | Green |
| hsl(240, 100%, 50%) | #0000FF | Blue |
| hsl(0, 0%, 0%) | #000000 | Black |
| hsl(0, 0%, 100%) | #FFFFFF | White |
| hsl(0, 0%, 50%) | #808080 | Mid gray |
Format comparison
HSL vs HEX for design tokens: HEX wins for final output — it's what design tools export, what CSS frameworks expect, and what's most compact. HSL wins for generation — building color scales, theming, and dark-mode variants is far easier in HSL. The practical workflow: work in HSL, store as HEX.
HSL vs RGB as an intermediate: RGB is the mathematical bridge between HSL and HEX (all conversions go HSL→RGB→HEX). There's no reason to keep RGB as your working format — HSL is more human-readable, and HEX is more tool-compatible.
HSL vs CSS relative colors: CSS Color Level 4 introduces relative colors like hsl(from var(--primary) calc(h + 30) s l). This makes it possible to derive palette variants in CSS without any conversion at all. For modern projects targeting 2025+ browser support, this eliminates the need to convert HSL to HEX for derived colors.
How it works
Enter HSL
Paste a CSS hsl() value or enter H, S, L separately. Alpha optional.
Convert
HSL is converted to RGB, then each channel is formatted as a two-digit HEX string.
Copy
Click the HEX output to copy — uppercase or lowercase, with or without the #.
About this format
HSL to HEX conversion is the final step when you've been working with color adjustments in HSL and need the HEX value for a stylesheet, design tool, or asset export. HSL is excellent for building and adjusting colors — you manipulate hue, saturation, and lightness intuitively — but most CSS frameworks, design tools, and output formats expect HEX.
This conversion is also the output step when building automated color scales. If you generate a 10-step shade scale by stepping L from 10% to 90% in HSL, you need the HEX values to put into a design system token file, a Tailwind config, or a CSS custom property list.
The conversion algorithm goes HSL → RGB → HEX. Each HSL combination maps to exactly one RGB triplet, which maps to exactly one HEX string. The only imprecision comes from rounding intermediate floating-point values — differences are sub-pixel and visually invisible.