Skip to main content
WebColorTools

HEX to HSL Converter

Convert HEX color codes to HSL instantly. Free, in your browser.

Instant 100% Private Free Forever
HEX HSL CSS Converters
Swap to HSL → HEX
#FF5733

HSL output

hsl(11, 100%, 60%)
Raw 11, 100%, 60%
RGB rgb(255, 87, 51)

Examples

How to use the HEX to HSL Converter

Four steps to turn any hex code into HSL values.

  1. 1

    Enter a HEX code

    Type in the field (with or without #) or pick a color with the swatch. 3- and 6-digit codes are supported.

  2. 2

    See the live preview

    The large swatch updates instantly so you can confirm you have the right color.

  3. 3

    Copy the HSL value

    Click Copy next to the main hsl() output, or grab the raw numbers or RGB bonus value.

  4. 4

    Try an example

    Use Load example or the gallery chips (#FF5733, #000000, #FFFFFF) to explore common colors.

What is HEX to HSL conversion?

HEX to HSL conversion bridges the gap between compact hex codes used in design tools and the human-readable HSL model that makes color adjustment intuitive. Designers and developers often receive colors as HEX values like #FF5733 from Figma, brand guidelines, or CSS — but when you need to lighten a theme, mute a palette, or build accessible variants, HSL (Hue, Saturation, Lightness) is far easier to reason about. This free converter turns any valid hex code into precise HSL values instantly, with a live preview and one-click copy.

A HEX color code uses hexadecimal (base-16) notation. The familiar six-digit format #RRGGBB packs red, green, and blue into six characters. CSS also accepts three-digit shorthand (#F53 expands to #FF5533). HEX is compact and universal — but it tells you nothing about how vivid or light a color appears without converting it first.

HSL describes color in terms humans understand. Hue (0–360°) is the position on the color wheel — red near 0°, green near 120°, blue near 240°. Saturation (0–100%) measures vividness: 0% is gray, 100% is fully vivid. Lightness (0–100%) is how bright the color is — 0% is black, 50% is a “pure” mid-tone, 100% is white. In CSS you write hsl(11, 100%, 60%) for a vibrant orange. Search terms like hex to hsl, hex to hsl converter, convert hex to hsl, and hex color to hsl all describe this practical conversion need.

The conversion concept works in two stages — the same math this tool uses from colorConvert.js. First, HEX is parsed into RGB integers (each pair of hex digits becomes a 0–255 channel). Then RGB is transformed into HSL using standard color-space formulas. For example, #FF5733 becomes RGB (255, 87, 51), which maps to approximately HSL (11°, 100%, 60%). The result is exact and reversible within normal rounding.

Why HSL is useful: Want a lighter button hover state? Increase lightness by 10% and keep hue and saturation. Need a muted background? Drop saturation to 20% without guessing RGB values. Building a dark theme? Reuse the same hue with lower lightness across your palette. HSL makes these adjustments predictable — something HEX and raw RGB make painful. Design systems like Tailwind and many CSS frameworks expose HSL-friendly workflows for exactly this reason.

Common use cases include: converting brand HEX tokens into HSL for CSS custom properties; generating tint and shade ramps by tweaking L and S; debugging theme colors in DevTools; preparing colors for Sass hsl() functions; teaching color theory with wheel-based vocabulary; and translating Figma hex exports into HSL for animation libraries that interpolate in cylindrical space.

This tool runs entirely in your browser — no signup, no upload, no delay. Enter a HEX code, use the saturation/brightness picker, adjust hue, or try an example. Copy the full hsl() string, the raw comma-separated values, or the bonus RGB output. For related conversions, see our HEX to RGB, RGB to HEX, and Color Converter tools.

Frequently asked questions

What's the difference between HSL and HEX?
HEX encodes a color as base-16 digits — typically #RRGGBB — without describing how the color feels. HSL (Hue, Saturation, Lightness) expresses the same color in human-friendly terms: hue as an angle 0–360°, saturation and lightness as percentages. They are equivalent representations; HSL is easier for adjusting brightness or muting a color without touching RGB math.
What is HSL good for?
HSL excels at thematic color work: generating lighter tints by raising lightness, darker shades by lowering it, or muted tones by reducing saturation — all while keeping the same hue. Design systems, CSS custom properties, and theme switches often store base hues in HSL so dark mode can reuse the same hue with different lightness values.
How is HSL different from HSV?
Both use hue, but they model brightness differently. HSL Lightness is the midpoint between the darkest and lightest channel — intuitive for “how light is this color?” HSV Value is the brightest channel — closer to how pickers and Photoshop often behave. The same RGB color yields different S/L vs S/V numbers; neither is wrong, but HSL is more common in CSS via hsl().
Is my color data private?
Yes. Conversion runs entirely in your browser. Your HEX values are never uploaded, stored on a server, or sent to any API. You can use this tool offline after the page loads.
Can I convert HSL back to HEX or HEX to RGB?
Yes. Use our RGB to HEX Converter or the all-in-one Color Converter for any direction. For RGB integers from a hex code, try the HEX to RGB Converter.

Related tools

More free tools — all run in your browser.

HEX to RGB

Convert HEX color codes to RGB values instantly.

RGB to HEX

Convert RGB values to HEX color codes instantly.

Color Converter

Convert between HEX, RGB, HSL, HSV, CMYK, and OKLCH.

Palette Generator

Generate beautiful color palettes instantly. Lock colors, explore schemes, export to CSS.

Gradient Generator

Create beautiful CSS gradients visually. Linear, radial, conic — copy the code instantly. Free, in your browser.