HEX to HSL

Convert a HEX colour code to HSL (Hue, Saturation, Lightness) format for CSS.

🔒 Private — runs entirely in your browser ⚡ Instant conversion 🚫 No login required 🎯 Accurate W3C formulas

🎨 Color Picker 🔷 HEX to RGB 🔶 RGB to HEX 🌈 HEX to HSL 💠 HSL to HEX 🔲 RGBA to HEX 🖨 CMYK to RGB 🎭 Pantone to HEX 🌐 HTML Color Names 🏷 Color Name Finder 🎨 Color Scheme Generator 🔵 Complementary Color Finder 🌈 Gradient Color Picker 🖨 RGB to CMYK

📖How to Use the HEX to HSL

1
Enter your colour
Type or paste your colour value into the input field, or use the visual picker. Try the sample buttons for quick examples.
2
See the converted values
All output fields update instantly as you type. A colour preview swatch also updates in real time.
3
Copy what you need
Click any Copy button to copy that specific value straight to your clipboard — ready to paste into your CSS, design tool or code.

💡Colour Format Quick Reference

FormatExample

HEX#0a6aff

RGBrgb(10, 106, 255)

RGBArgba(10, 106, 255, 1)

HSLhsl(215, 100%, 52%)

CMYKcmyk(96%, 58%, 0%, 0%)

PantonePantone 286 C

Frequently Asked Questions

Is my data private?

Yes. All colour conversions happen entirely in your browser using JavaScript. No data is ever sent to a server.

Are the conversions accurate?

Yes. All maths follows the official sRGB colour space formulas defined by the W3C and ICC. Rounding is done to standard precision.

What is HSL?

HSL stands for Hue (0–360°), Saturation (0–100%) and Lightness (0–100%). It is a more human-readable way to describe colours than HEX or RGB.

Why use HSL in CSS?

HSL makes it easy to create colour variations — for example, adjusting only the lightness value lets you generate tints and shades without changing the hue.

HEX to HSL

📖How to Use the HEX to HSL

💡Colour Format Quick Reference

Frequently Asked Questions

Related Color Tools