HEX to HSL Color Converter (Hue, Saturation, Lightness)
HSL is the most intuitive color model for web designers because tweaking lightness and saturation is effortless. Convert any 3, 6, or 8-digit Hex code to clean CSS HSL syntax.
How to Use HEX to HSL Color Converter
Input HEX Code
Type or paste any hex string (e.g. #3B82F6 or #333).
Inspect HSL Values
View exact Hue (0-360°), Saturation (0-100%), and Lightness (0-100%).
Fine-Tune or Copy
Use interactive sliders to tweak values and copy clean CSS code.
About HEX to HSL Color Converter
Normalizes RGB channels to [0, 1], determines maximum and minimum values, computes Lightness L = (max + min)/2, derives Saturation S from chromatic delta, and calculates Hue from the dominant color sector.
Supported Formats
Operational Limits
- •Calculations conform strictly to the sRGB color space definition.
Key Features
- Supports 3-digit (#RGB), 6-digit (#RRGGBB), and 8-digit (#RRGGBBAA) hex codes
- Interactive H, S, and L slider controls with live swatch updates
- Generates modern CSS syntax: hsl(217 91% 60%) and legacy hsl(217, 91%, 60%)
- Calculates perceptual luminance and complementary color code
- One-click copy for all CSS formats
Frequently Asked Questions
Related Tools
More in Color ToolsComplementary Color Generator
Generate the exact 180° complementary opposite color on the color wheel with split-complementary harmonies and contrast preview.
Monochromatic Color Scale Generator
Generate a smooth 9-step luminance color scale (50 to 900) of tints, tones, and shades from a single brand color for UI design systems.
RGB to CMYK Color Converter
Convert digital RGB screen colors to 4-color process CMYK (Cyan, Magenta, Yellow, Key/Black) percentages for print production.