Color Tools
Inar HEX to HSL Converter
Convert HEX colors to HSL instantly with the free Inar HEX to HSL Converter. Enter a HEX color code to get accurate HSL values for web design, CSS, UI development, and color styling.
Inar HEX to HSL Converter
Turn HEX color codes into HSL — and HSL back into HEX
Paste a HEX code such as #ff5733 and read its hue, saturation and lightness
instantly. Drag the H, S and L sliders to build a color and watch the HEX update live, then
copy the HSL, HSLA, RGB, HSV or CMYK equivalent. This converter also handles bulk
conversion, checks WCAG contrast against white and black, and stores recent colors locally.
Everything runs in your browser — nothing is uploaded and no sign-up is required.
HEX input
#ff5733HSL values
hsl(11, 100%, 60%)Bulk HEX to HSL
one color per lineConverted formats
liveContrast & accessibility
WCAG 2.1Recent colors
0 savedWhat Is a HEX to HSL Converter?
From a machine-readable code to a human-readable description of color.
A HEX to HSL converter takes a hexadecimal color code such as
#ff5733 and rewrites it as hue, saturation and lightness —
hsl(11, 100%, 60%). HEX is compact but opaque: it tells you three byte values
and nothing about how the color behaves. HSL, by contrast, describes the color the way a
designer thinks about it: which hue it sits on, how vivid
it is, and how light or dark it is.
That makes HSL far easier to manipulate. Want a lighter version of a brand color? Raise the lightness. Want it muted? Lower the saturation. Want a complementary accent? Add 180 to the hue. None of those operations are intuitive in HEX, but they are a single number change in HSL — which is why design systems increasingly store colors as HSL triplets and convert to HEX only at the point of output.
This converter runs entirely inside your browser. No color value is ever uploaded — there is no server call and no third-party processing.
The Conversion Formula
Two short steps: HEX to RGB, then RGB to HSL.
First, split the HEX code into three pairs and parse each pair as base 16 to get the red, green and blue channels. Then normalise those channels to the range 0–1 and compute the maximum, the minimum and the difference between them.
#ff5733 → r = 255, g = 87, b = 51
→ r' = 1.000, g' = 0.341, b' = 0.200
max = 1.000 min = 0.200 delta = 0.800
Lightness L = (max + min) / 2
= (1.000 + 0.200) / 2 = 0.600 → 60%
Saturation S = delta / (1 − |2L − 1|)
= 0.800 / (1 − 0.200) = 1.000 → 100%
Hue max is red, so
H = 60 × ((g' − b') / delta)
= 60 × (0.141 / 0.800) = 10.6 → 11°
Result: hsl(11, 100%, 60%)
The hue formula depends on which channel is the maximum. If red is largest, the hue starts from the green-minus-blue difference; if green is largest, it starts at 120°; if blue is largest, it starts at 240°. Any negative result is wrapped by adding 360.
Lightness is the midpoint between the largest and smallest channel, which
is why l = 0% is always black and l = 100% is always white no
matter what the hue and saturation are. Saturation is the delta scaled
against the maximum possible delta at that lightness — it reaches 0% for any pure gray,
because all three channels are equal and the delta is zero.
Note on precision: HSL values are usually rounded to whole numbers for readability. Because HSL and RGB describe different geometry, an HSL value rounded to integers and converted back to HEX can differ by one unit in a channel. This converter keeps full precision internally, so a HEX code you paste in comes back out unchanged.
Features
Everything the conversion needs, and nothing it does not.
Two-way conversion
Type HEX to get HSL, or drag the HSL sliders to get HEX. Both directions stay in sync.
Hue, saturation & lightness sliders
Each track is painted with the actual range it controls, so you see the color move as you drag.
Live preview
A checkerboard-backed swatch shows the true result, including transparency.
Eleven output formats
HSL, HSLA, modern space-separated HSL, HEX, 8-digit HEX, RGB, RGBA, HSV, CMYK, CSS variables and JSON.
Bulk conversion
Paste a list of HEX codes and convert the whole list to HSL in one click.
Contrast check
See the WCAG ratio against white and black with AA and AAA pass/fail badges.
Eyedropper
Sample any pixel on screen with the native EyeDropper API where supported.
Alpha channel
Add transparency and read it back as HSLA or 8-digit HEX.
Color history
Saved colors are stored locally so you can return to one you liked.
Named color library
Search a curated set of CSS named colors and load their HEX or HSL instantly.
Conversion tables
A HEX-versus-HSL reference for common colors plus a hue angle cheat sheet.
Privacy first
100% client-side. Your colors never leave your browser.
How to Convert HEX to HSL
Four steps, no math required.
Paste the HEX code
Type or paste a code into the HEX field — with or without the
#, upper or lower case, three or six digits. The converter normalises it and immediately shows the HSL equivalent.Read the HSL values
The hue, saturation and lightness sliders snap to the converted color. The HSL string at the top of the converted formats panel is what you would paste into CSS.
Adjust if needed
Drag any slider to fine-tune. Raising lightness moves toward white, lowering it moves toward black, and dropping saturation to 0% produces a gray at the same lightness. The HEX updates live.
Copy the format you need
Use Copy HSL in the toolbar, or the copy icon beside any format. For a whole list of codes at once, use the bulk panel.
Conversion Tips
Things worth knowing before you paste.
HSL is not a different color
HEX and HSL describe the same point in the same color space. Converting between them changes the notation, never the color itself.
Think in hue for palettes
Keep saturation and lightness fixed and step the hue by 30° for an analogous palette, or by 120° for a triadic one. It is far faster than guessing HEX codes.
Lightness is not perceived brightness
Two colors with the same HSL lightness can have very different contrast ratios, because the eye is more sensitive to green than to blue. Always check the ratio, not the lightness value.
Frequently Asked Questions
The questions people ask most about HEX and HSL.
How do I convert HEX to HSL?
Split the HEX code into three pairs and parse each as base 16 to get red, green and blue. Normalise those to 0–1, then compute lightness as the midpoint of the largest and smallest channel, saturation from the difference between them, and hue from whichever channel is largest. This converter does all of it instantly as you type.
Can I convert HSL back to HEX?
Yes. Drag the hue, saturation and lightness sliders, type into the HSL field, or paste an hsl() string — the HEX value updates on every change.
Why does my HEX to HSL conversion look slightly off?
Most tools round HSL to whole numbers. Because HSL and RGB have different geometry, rounding can shift a channel by one unit when converted back. This converter keeps full precision internally, so pasting a HEX code and copying it straight back returns exactly the code you started with.
What is the difference between HSL and HSV?
Both use hue and a saturation-like value. HSL's lightness runs from black through the pure color to white, while HSV's value runs from black to the fully bright color. HSL matches how CSS describes colors; HSV is closer to how color pickers are drawn.
What does the lightness value mean?
Lightness is the midpoint between the strongest and weakest RGB channel. l = 0% is always black regardless of hue, l = 100% is always white, and l = 50% is the most vivid the color can be at that saturation.
Why is saturation 0% for gray colors?
Saturation measures how far apart the RGB channels are. For any gray, red, green and blue are equal, so the difference is zero and saturation collapses to 0%. The hue value becomes meaningless at that point.
Does HSL support transparency?
Not on its own, but hsla() adds a fourth alpha value from 0 to 1, and modern CSS also accepts hsl(11 100% 60% / 0.5). This converter outputs both forms.
Can I convert several HEX codes at once?
Yes. The bulk panel accepts one HEX code per line and returns the matching hsl() value for each, along with a swatch preview of every color it recognised.
Is HSL supported in all browsers?
Yes. hsl() and hsla() have been supported in every major browser for many years, and the modern space-separated syntax is supported in all current versions.
Is this converter free?
Yes. It is completely free to use, with no account, no sign-up and no usage limits.
More Inar Developer Tools
More free, privacy-friendly tools from Inar Learn — built for developers and learners.
Inar Learn