HEX to HSL Converter
Convert HEX colors to HSL instantly
HEX, RGB, HSL, HWB, Lab, LCH, Oklab, OKLCH, Display P3, and CSS names
Everything is processed locally in your browser.
CSS HEX uses RRGGBBAA; Android and Flutter use AARRGGBB.
Converted colors will appear here.
Overview
Convert HEX colors directly to HSL while preserving the represented sRGB color and alpha where the target syntax supports it. This page starts with HEX input and places the HSL result first.
How it works
Enter HEX such as #5CCC7F. The shared browser engine validates the channels, converts through one canonical color model, and updates the focused HSL value, preview, contrast, and additional developer formats instantly.
Examples and uses
Use HEX to HSL conversion when moving colors between CSS, design handoffs, application code, or print-oriented specifications. Copy the focused result without uploading the color value.
Edge cases and limitations
HEX supports 3, 4, 6, and 8 digits; 8-digit CSS values use RRGGBBAA ordering. HSL hue wraps around 360 degrees, while saturation and lightness require percentages.
Reverse conversion
Need the opposite direction? Use the linked HSL to HEX converter. Swapping keeps the URL, heading, initial input, and primary result aligned with that intent.