HEX to HSL Converter
Paste a hex color to get its HSL value instantly. HSL describes a color by hue, saturation and lightness, which makes it easy to tweak shades. Everything runs in your browser.
How to convert HEX to HSL
- Type or paste your hex code, or pick a color with the swatch.
- Read the HSL value below as hue, saturation and lightness.
- Copy the HSL string straight into your CSS or design tool.
Examples
Red
#ff0000
hsl(0, 100%, 50%)
Brand blue
#3b82f6
hsl(217, 91%, 60%)
Frequently asked questions
What is HSL?
HSL stands for hue, saturation and lightness. It is a color model that describes a color by its position on the color wheel and how vivid and bright it is, which is often more intuitive than hex.
Why do designers use HSL?
HSL makes it easy to create related colors. You can keep the hue fixed and adjust lightness for tints and shades, or change saturation to make a color more or less vivid, without guessing hex digits.
What do hue, saturation and lightness mean?
Hue is an angle from 0 to 360 degrees on the color wheel (0 is red, 120 is green, 240 is blue). Saturation from 0 to 100 percent sets how vivid the color is, and lightness from 0 to 100 percent goes from black to the pure color to white.
Why are the numbers rounded?
The hue, saturation and lightness are rounded to whole numbers so the result is short and easy to paste into CSS. The rounding is tiny and not visible on screen.
Is my color sent to a server?
No. The conversion runs entirely in your browser, so your color values never leave your device.
Does it accept shorthand hex?
Yes. Three-digit hex like #f00 is expanded to its six-digit form, and a leading hash is optional.
Related tools
HSL to HEX
Convert HSL colors to HEX instantly. Paste hsl(217, 91%, 60%) or 217,91,60 and get the #hex code, with a live swatch. Runs in your browser.
HEX to RGB
Convert HEX color codes to RGB online. Paste a hex value like #ff0000 and get the rgb() string instantly. Supports shorthand. Runs in your browser.
Binary to Decimal
Convert binary to decimal online. Paste any binary number, with or without spaces, and get the exact base-10 value instantly. Runs in your browser.
Binary to Hex
Convert binary to hexadecimal online. Paste a binary number and get exact hex, with optional uppercase. Handles huge values. Runs in your browser.
Celsius to Fahrenheit
Convert Celsius to Fahrenheit instantly. Type a temperature in C and get F, with the formula and a quick reference table. Runs in your browser.
Centimeters to Inches
Convert centimeters to inches instantly. Type a length in cm and get inches, with the formula and a quick reference table. Runs in your browser.