About the HEX to HSL Converter
What is HEX to HSL conversion?
A HEX code like #3B82F6 packs a color into six characters that stand for red, green, and blue. HSL describes that very same color in a way that's far easier to reason about: Hue is which color it is on the wheel, Saturation is how vivid or gray it looks, and Lightness is how close it sits to black or white. This converter reads your HEX value, works out the RGB behind it, and gives you the matching HSL, plus the RGB, HSB/HSV, and CMYK equivalents and a live preview.
The big draw of HSL is that CSS understands it natively, so hsl() values drop straight into a stylesheet. We built this so you can paste a brand HEX and instantly get the hsl() you can use in code, then drag the Hue, Saturation, and Lightness sliders to fine-tune it and watch the HEX follow along. Everything runs in your browser, so it's instant and nothing you enter is ever uploaded.
How to Use This Tool
- Enter your color. Type or paste a HEX code in full (
#FF5733) or shorthand (#F53), click the swatch to open your system picker, or use the eyedropper to grab a pixel from anywhere on screen.
- Read the HSL value. The moment a valid color lands you'll see Hue in degrees (0–360) with Saturation and Lightness as percentages, ready to copy as an
hsl() string.
- Fine-tune with the sliders. Nudge Hue, Saturation, or Lightness and the preview, the HEX field, and every other format update together.
- Explore and copy. Click any swatch in the shades, tints, or harmony rows to load it, then hit the copy button next to whichever value you need.
Common Use Cases
HSL is the format front-end developers reach for when they want to adjust a color rather than just store it:
- Writing CSS: Convert a brand HEX to an
hsl() value you can paste straight into a stylesheet, with no extra plugin needed.
- Building light and dark variants: Keep the Hue and Saturation fixed and change only the Lightness to generate hover, active, and disabled states that feel related.
- Creating themes with custom properties: Storing colors as HSL makes it easy to tweak a whole palette by shifting one channel.
- Muting or boosting a color: Lower the Saturation for a calmer background, or raise it for an accent that pops.
- Checking accessibility: The contrast panel shows how the color performs as text on white and black against WCAG thresholds.
Need the reverse, or a different model? Use our HSL to HEX converter, the HEX to RGB converter, or the HEX to HSB converter.
Frequently Asked Questions
What does HSL stand for?
HSL stands for Hue, Saturation, and Lightness. Hue is a position on the color wheel from 0 to 360 degrees (0 is red, 120 green, 240 blue), Saturation is how vivid the color is from 0% gray to 100% full color, and Lightness runs from 0% black through 50% (the pure color) to 100% white.
Can I use the HSL value directly in CSS?
Yes. Unlike HSB, HSL is a native CSS format, so you can paste the hsl(217, 92%, 60%) string straight into a stylesheet. Every modern browser supports it, and it also works with an alpha channel as hsl(217 92% 60% / 0.5).
What's the difference between HSL and HSB?
They share the Hue but treat the third value differently. In HSL, 100% Lightness is always white and 50% is the pure color. In HSB, 100% Brightness with full Saturation is the most vivid version of the color. HSL is handy for building lighter and darker shades; HSB maps better onto design tools like Photoshop.
How do you convert HEX to HSL by hand?
Split the HEX into red, green, and blue and divide each by 255. Take the largest (max) and smallest (min) of the three. Lightness is (max + min) / 2. If max and min are equal the color is gray, so Saturation is 0; otherwise Saturation depends on the Lightness and the gap between max and min. Hue comes from which channel is largest, then is scaled to 0–360 degrees. The tool above does all of this instantly so you don't have to.
Does converting HEX to HSL lose any color information?
No color is thrown away, since HEX and HSL describe the same range. The only catch is rounding: the H, S, and L here are shown as whole numbers for readability, so converting back can occasionally land one step away from the original HEX. Keep full precision and it's a perfect round trip.
Is this tool free and private?
Completely. There's no sign-up and no limit, and the conversion runs entirely in your browser with JavaScript, so the colors you enter are never uploaded or logged. It even keeps working offline once the page has loaded.
