HEX to HSL

Convert HEX color to HSL

HEX to HSL

Convert HEX while keeping a visual preview and related formats nearby.

Working color

Use a color-aware form instead of a generic input/output template.

Source input

Color picker

Swatch

Result

The tool-specific output stays visible together with derived color formats.

Waiting for a valid color value...

HEX

#4F46E5

RGB

rgb(79, 70, 229)

HSL

hsl(243, 75%, 59%)

HSV

hsv(243, 69%, 90%)

CMYK

cmyk(66%, 69%, 0%, 10%)

OKLCH

Unavailable

Palette preview

What is HEX to HSL

Last reviewed: April 18, 2026

Hexadecimal (base 16) uses digits 0-9 and letters A-F to represent bytes compactly, widely used for colors, hashes, and low-level binary data.

HEX to HSL Converter reads a hex color (#RGB, #RRGGBB, or #RRGGBBAA) and returns the equivalent hsl() triple — hue in degrees (0–360), saturation and lightness as percentages.

HSL is the preferred notation when you're tuning a color palette because lightness and saturation are intuitive sliders, unlike RGB where you need to adjust three coupled channels at once.

Why use it

Derive a palette of lighter/darker shades from a brand hex by adjusting the L value in HSL.
Convert Tailwind-generated hex tokens into hsl() for use with modern CSS hsl-based color-mixing.
Read the hue number of an existing color so you can pick complementary or triadic hues on the color wheel.

Features

Accepts 3-, 6-, and 8-digit hex with or without the leading #
Emits hsl() with the modern space-separated syntax (hsl(20 100% 63%)) and legacy comma form
Preserves alpha channel from 8-digit hex (#RRGGBBAA) as hsla()
Hue rounded to the nearest integer; saturation and lightness rounded to 1 decimal
Live color swatch plus a visual HSL slider preview so you can see why the conversion looks the way it does

How to use HEX to HSL

Enter a hex color. Paste #ff8040 or any 3-, 6-, or 8-digit hex value. The tool accepts values with or without the leading #.
Read the HSL breakdown. Hue, saturation, and lightness appear separately — useful when you want to tweak one channel and see the effect before copying.
Adjust via sliders (optional). Use the slider preview to nudge lightness or saturation; the hex output updates live so you can round-trip.
Copy the hsl() string. Click copy on the hsl() output. The tool provides both 'hsl(20 100% 63%)' and the legacy 'hsl(20, 100%, 63%)' forms.

Example (before/after)

HEX input

Paste your HEX input so it can be converted into HSL for your next step.

HSL output

Get HSL output converted from HEX that is ready to review, copy, or export into the next step of your workflow.

Common errors

Source format does not match the tool

Conversions fail when the pasted input is not actually in the expected source format.

Fix: Verify the source format first, then paste it into the correct converter.

Partial or inconsistent data

Broken rows, missing fields, or incomplete markup can block conversion.

Fix: Use a complete input sample with the structure intact before converting it.

Unexpected output assumptions

Different target formats can flatten, restructure, or serialize values differently.

Fix: Review the converted output and confirm it matches the target system before using it downstream.

FAQ

Why does HSL hue go from 0 to 360 instead of 0 to 255?

Hue is measured in degrees around the color wheel — a full rotation back to red is 360°. This matches how artists and designers describe color (red=0°, green=120°, blue=240°) and makes finding complementary colors straightforward: add 180° to the hue.

What's the formula this converter uses for HSL?

The standard sRGB-to-HSL formula: normalize RGB to 0–1, find max and min channels, compute lightness as (max+min)/2, saturation from the max-min delta divided by the chroma denominator, and hue from the dominant channel. The result is identical to Chrome DevTools, Figma, and CSS hsl() values.

Is HSL the same as HSV or HSB?

No — HSL uses Lightness where 50% is a pure hue and 100% is white. HSV (also called HSB) uses Value/Brightness where 100% is a pure hue and 0% is black. They're different conversions with different formulas, so mixing them up leads to unexpected output.

Will HSL values preserve after a round-trip back to hex?

Yes, within 1 unit of rounding. HSL channels are continuous (0–360, 0–100%, 0–100%) while hex is 256 discrete steps per channel, so converting hex → HSL → hex is lossless within display precision. You'll see at most ±1 rgb unit drift in edge cases.

Does the hsl() syntax I get work in Tailwind or styled-components?

Yes. Modern Tailwind v3+ and every major CSS-in-JS library support native hsl() — paste the output directly. If you're locking to a legacy stylesheet that only accepts hex, use our HSL to HEX converter as the round-trip pair.

Can I use hsl() inside a CSS variable?

Yes — and it's especially powerful because you can parametrize each channel separately: `--primary: hsl(var(--primary-hue) 80% 50%);` lets you theme by only swapping the hue token. The tool output is ready to drop straight into that pattern.

Related tools

Continue the workflow with related tools for hEX to HSL, adjacent input and output steps, or other utilities in the same category. You can also browse the full Color Converters category for more options.

HSL to HEX

Convert HSL color to HEX

HEX to HSV

Convert HEX color to HSV

HEX to RGB

Convert HEX color to RGB

HEX to CMYK

Convert HEX color to CMYK

HEX to OKLCH

Convert HEX color to OKLCH (CSS native)

HSL to RGB

Convert HSL color to RGB

HSV to HEX

Convert HSV color to HEX

RGB to HEX

Convert RGB color to HEX

RGB to HSL

Convert RGB color to HSL

CMYK to HEX

Convert CMYK color to HEX

OKLCH to HEX

Convert OKLCH color to HEX

HSV to RGB

Convert HSV color to RGB