Hex to HSL Converter
Convert a hex color code into HSL — hue, saturation, and lightness values that make hand-tuning shades and tints far easier than editing RGB.
How Hex to HSL Conversion Works
HSL describes a color by hue (0-360° around a color wheel), saturation (0-100%, how vivid it is), and lightness (0-100%, how close to black or white it is). Converting from hex means first decoding the red, green, and blue channels, then finding the hue from which channel is dominant, and deriving saturation and lightness from how spread out the channel values are. HSL is easier for hand-tuning color variations than RGB, since you can adjust lightness or saturation directly instead of recalculating three channels at once.
Hex to HSL Example, Step by Step
#2563EB = hsl(221, 83%, 53%)
#2563EB (hex) = hsl(221, 83%, 53%)
#2563EB -> rgb(37, 99, 235) Normalize: R=0.145, G=0.388, B=0.922 Max=0.922 (blue), Min=0.145 (red) Lightness = (Max + Min) / 2 = 0.53 -> 53% Saturation = 0.83 -> 83% Hue = 221 (blue-dominant)
| Step | Description | Result |
|---|---|---|
| Decode hex to RGB | #2563EB -> rgb(37, 99, 235) | R=37, G=99, B=235 |
| Normalize channels to 0-1 | divide each by 255 | 0.145, 0.388, 0.922 |
| Compute lightness | (max + min) / 2 | L = 53% |
| Compute saturation and hue | based on channel spread and dominant channel | S = 83%, H = 221° |
Blue is the dominant channel here, which is why the hue lands at 221° — in the 240° blue region of the color wheel, pulled slightly toward purple by the green channel.
Where Hex to HSL Actually Comes Up
Building a Tint and Shade Palette
Design systems that generate lighter and darker variants of a brand color do it by adjusting HSL lightness while keeping hue and saturation fixed — this is the conversion step from a starting hex color.
#2563EB -> hsl(221, 83%, 53%)
Setting Up a CSS Custom Property for Theming
Theming systems that store colors as hsl() so components can tweak lightness for hover or disabled states need this conversion from an existing hex design token.
hex token -> hsl() CSS variable
Comparing Two Colors' Perceived Brightness
Lightness gives a rough, quick way to compare how light or dark two colors are relative to each other — useful when eyeballing contrast before running a full accessibility check.
L=53% vs L=20% (relative brightness)
Common Mistakes With Hex to HSL
- Confusing HSL's lightness with HSV/HSB's value (brightness) — they're calculated differently and aren't interchangeable.
- Assuming hue alone identifies a color — the same hue at different saturation or lightness can look completely different.
- Expecting a perfect round trip through hex, since HSL's rounded whole-number output can shift the result by 1 unit when converted back.
Why Use This Calculator Instead of Doing It by Hand
- Handles 3-digit shorthand hex automatically, no manual digit-doubling
- Runs entirely in your browser — nothing you type gets sent anywhere
- Shows the RGB intermediate step, useful for understanding or debugging
- Saves you from the multi-step hue/saturation/lightness formula
Frequently Asked Questions
What does HSL stand for?
Hue (0-360°, the position on the color wheel), Saturation (0-100%, how intense the color is), and Lightness (0-100%, how close to black or white it is).
What's the HSL value of #2563EB?
hsl(221, 83%, 53%) — a blue hue around 221°, with fairly high saturation and mid-range lightness.
Why use HSL instead of hex or RGB when picking colors?
HSL separates color identity (hue) from intensity (saturation) and brightness (lightness), so you can create a lighter or darker version of a color by changing one number instead of recalculating three RGB channels.
Does this tool support 3-digit shorthand hex like #25E?
Yes — each digit is doubled first (2 becomes 22, 5 becomes 55, E becomes EE) before converting to HSL, matching how browsers interpret CSS shorthand hex.
Is hex to HSL conversion exact, or can there be rounding?
HSL values are rounded to whole numbers for hue, saturation, and lightness, so converting back to hex can occasionally land 1 unit off from the original — this is a display rounding artifact, not a bug.
How do I generate a lighter or darker shade of a brand color?
Convert the hex to HSL, then raise or lower the lightness percentage while keeping hue and saturation fixed — this produces a consistent tint or shade family from a single base color.
Why do CSS theming systems often use hsl() instead of hex?
Because adjusting lightness or saturation directly in hsl(221, 83%, 53%) is far easier than recalculating three RGB channels — many design systems store a base hue and generate variants by changing just the lightness value.