HEX to HSL — Convert HEX Color Codes to HSL Values
Convert HEX color codes to HSL values. Live swatch preview, runs entirely in your browser. No uploads, no accounts, no limits.
HEX to HSL
Convert HEX color codes to HSL values online. Enter a hex code and get HSL instantly. Works entirely in your browser.
HEX is the language web developers speak when writing CSS: #3B82F6 is six characters that map to three pairs of hex digits, each pair encoding the red, green, or blue channel from 00 to FF. HSL is the language designers speak when picking colors: hsl(217, 91%, 60%) is a hue (217 degrees, in the blue range), a saturation (91 percent, very vivid), and a lightness (60 percent, slightly brighter than middle gray). The two notations describe the same color — the same sRGB value — but the HSL form is more useful for the design tasks that come up most often: building a palette from a single hue, picking a tint or a shade, or adjusting a color’s brightness without affecting its hue or saturation.
The non-obvious thing about HEX-to-HSL is the conversion math. The HEX pair 3B is 59 in decimal; 82 is 130; F6 is 246. Divide by 255 and you have the RGB triplet (0.231, 0.510, 0.965) on a 0-1 scale. The HSL conversion is then a series of steps: find the maximum and minimum of the three channels, compute the range (max - min), and derive hue, saturation, and lightness from those. The hue calculation has six cases depending on which channel is the maximum — the formula picks the right one. The result is a hue between 0 and 360, a saturation between 0 and 100, and a lightness between 0 and 100. The full conversion is about ten lines of code; the tool handles it in a fraction of a second.
For a final hand-off: if the goal is picking a palette, the HSL output is the input to systematic palette generation — increase the lightness for tints, decrease it for shades, rotate the hue for analogous colors. If the goal is matching a design tool’s output, the HSL string is what Figma, Sketch, and Adobe XD export as ‘HSL’ in their color panels. If the goal is CSS, the HSL syntax is the most readable form for a developer — background: hsl(217, 91%, 60%) is easier to scan than background: #3B82F6 because the lightness and saturation are visible at a glance.
How to use
Enter a HEX code
Type a 3-digit HEX (#3B8) or 6-digit HEX (#3B82F6) into the input. The input is auto-prefixed with # if you omit it, and short-form HEX is expanded to long-form before parsing.
Read the HSL breakdown
The output shows hue (0-360 degrees), saturation (0-100%), and lightness (0-100%). The live swatch on the right updates as you type, so you can see the color in real time.
Copy the HSL string
Copy the value as a CSS-ready `hsl(217, 91%, 60%)` or `hsla(217, 91%, 60%, 1)` declaration. Paste it into a stylesheet, a design tool, or a CSS-in-JS template literal.
Frequently asked
What is HSL used for?
HSL (Hue, Saturation, Lightness) is a more intuitive color model than RGB for design tasks. Picking a hue (0-360) gives you a base color; adjusting saturation (0-100%) controls intensity; adjusting lightness (0-100%) controls brightness. Designers use HSL to create tints and shades systematically.
Is the conversion lossless?
Yes — HEX, RGB, and HSL are mathematically equivalent representations of the same sRGB color. There is no rounding, no clipping, and no information loss. The conversion is a series of arithmetic operations that produce the exact same color in a different notation.
What does the hue number mean?
Hue is the color's position on the color wheel, in degrees: 0 is red, 60 is yellow, 120 is green, 180 is cyan, 240 is blue, 300 is magenta, 360 is back to red. The full range is 0-360, with 0 and 360 representing the same color (red).
Why does my HEX look different in print?
HEX and HSL both refer to sRGB colors, which is what screens display. Print uses CMYK, which has a smaller gamut. Saturated blues and greens that look vivid on screen may print as muddier versions. The HEX-to-HSL conversion is exact; the sRGB-to-CMYK conversion is approximate.
Can I enter RGB values instead?
The HEX-to-HSL tool accepts HEX input specifically. For RGB input, use the Color Converter tool, which accepts HEX, RGB, HSL, and CMYK in one interface and shows all four simultaneously. The underlying conversion is the same.
Limitations
- sRGB onlyThe tool assumes sRGB color space, which is the default for the web. HEX codes that reference Display P3 or Rec.2020 colors (rare, used in some Apple design tools) are treated as sRGB, which clips out-of-gamut values.
- No alpha channelThe tool handles 3-digit and 6-digit HEX (no alpha). For HEX with alpha (8-digit like #3B82F680), the alpha is ignored in the HSL output. Use the Color Converter for HEXA-to-HSLA conversions.
- Integer hue onlyThe output rounds the hue to the nearest integer degree. Saturation and lightness are rounded to the nearest integer percent. For higher precision, the underlying values are available in floating-point — toggle the option in the settings.
Platform notes
- macOS
- Digital Color Meter (in Applications > Utilities) reads the color under the cursor. The browser tool is the right pick for converting the sampled color to HSL, which the macOS color picker does not expose in its main panel.
- Windows
- PowerToys' Color Picker reads any pixel on screen. The browser tool is the right pick for converting the picked color to HSL, which most Windows design tools do not show in their color picker.
- Linux
- GIMP's color picker shows HEX, RGB, and HSV. The browser tool adds HSL output, which is the model CSS uses natively. Pair the tool with GIMP for a complete pick-and-convert workflow.
- Web
- Runs entirely client-side. Works offline once the page has loaded. The HSL output is a valid CSS color value — paste it into any stylesheet, CSS-in-JS template, or design tool that supports the HSL syntax.