HEX to HSL Converter
Paste a hex code and get HSL - the format that makes CSS theming, hover states and color scales far easier to keep consistent.
Example conversion
#dc143c
converts to
hsl(348, 83%, 47%)
About HEX to HSL conversion
Hex codes are excellent at storing a color and useless at explaining it.
Nothing in #0d6efd tells you it is a saturated blue, and
nothing about #0b62e2 makes it obvious that it is the same blue
slightly darkened. HSL fixes that: the same color becomes hsl(216, 98%,
52%), where 216 is the hue angle, 98% the saturation and 52% the lightness.
Now the relationship between your colors is visible in the numbers
themselves.
This is why HSL has become the format of choice for CSS theming. Store
the hue and saturation once, vary the lightness, and an entire scale of
tints and shades falls out of a single base color. Hover states become "10%
darker" instead of a second hard-coded hex code that nobody remembers how to
regenerate. And since hsl() is native CSS with universal
browser support, no build step is involved.
When should you use HEX to HSL?
- Setting up CSS custom properties - splitting a
brand color into
--brand-h,--brand-sand--brand-lso lightness can be composed at use time. - Generating hover, focus and active states - derive them from the base color instead of inventing new hex codes.
- Building a design system scale - the familiar 50-to-900 ladder of one color is a lightness sweep.
- Building a dark theme - often the same hue and saturation with the lightness scale inverted.
- Understanding an inherited palette - convert a list of hex codes to HSL and the structure (or lack of it) becomes obvious.
How the conversion works
Two steps. The hex code is decoded pair by pair into red, green and blue
values - 0d to 13, 6e to 110, fd to
253 - and those channels are then transformed into HSL. Lightness is the
midpoint of the largest and smallest channel, saturation measures how far
apart they are, and hue is the angle of whichever channel dominates,
measured in 60-degree sectors from red at 0 through green at 120 to blue at
240.
Shorthand codes are expanded first, so #abc is read as
#aabbcc. Grey codes, where all three pairs are equal, come out
with saturation 0 and hue 0, because a grey has no hue to report.
HEX vs HSL
- Legibility - HSL says what the color is; hex just stores it.
- Editing - changing one HSL number produces a predictable result. Editing a hex digit is guesswork.
- Length - hex is far more compact, which is why it dominates brand guides and design handoff.
- Both are CSS-native - use whichever fits;
hsl()and hex are equally well supported. - Precision - hex is exact; HSL values are rounded for readability, so a round trip may land one channel step away.
Named CSS colors in HEX and HSL
The sixteen basic CSS color keywords plus eight more that come up constantly, each shown in both models side by side. Pick any row to drop that color into the converter and read it in the other eight models too.
Frequently asked questions
Why use HSL instead of hex in CSS?
Because HSL colors can be reasoned about and derived. A palette written in HSL shows its own structure, hover states can be generated by changing lightness, and a whole theme can hang off two custom properties. Hex is better for storing a fixed brand value; HSL is better for building systems out of it.
How do I build a color scale from one hex code?
Convert it to HSL, keep the hue and saturation, and step the lightness - for example 95%, 85%, 70%, 55%, 40%, 30% and 20% for a seven-step ladder. Very light and very dark steps often look better with saturation nudged slightly, since extreme lightness can make a color look washed out.
Does the conversion change the color at all?
No. HSL and hex describe the same sRGB color; only the notation differs. HSL numbers are rounded to whole degrees and percents for readability, which can shift a channel by one on the way back - visually identical.
Can I use HSL with transparency?
Yes. hsla(216, 98%, 52%, 0.5) works, and modern CSS also
accepts hsl(216 98% 52% / 50%). Both are widely
supported.
My hex code is a grey and HSL reports hue 0. Is that right?
Yes. When all three channels are equal there is no hue to measure, so saturation is 0 and hue defaults to 0. It does not make the grey reddish - with zero saturation the hue has no effect.