HEX to HSL Converter
Free, accurate, and instant conversion. Preview your color in real-time on digital and print mockups.
Source Input HEX
/* CSS Variable */ --color-primary: #000000; /* Standard */ color: #000000; background-color: #000000;
Unlock Your Color Palette with Hex to HSL
You found a Hex code you like, but it is just a little too dark, or maybe too saturated. Tweaking the Hex code directly (changing #A34421 to #B55532) is pure guesswork.
By converting Hex to HSL (Hue, Saturation, Lightness), you unlock the logical controls of color theory. Suddenly, "make it brighter" is just a slider away.
The Locked Box
Hex codes are static. They are great for storage, but rigid for creative exploration.
The Conversion
We extract the RGB components and map them onto a cylindrical coordinate system (HSL).
The Controls
HSL gives you three knobs: Change the color (Hue), the intensity (Sat), or the brightness (Light).
Building a Design System? Use HSL.
Modern CSS frameworks and design systems rely heavily on HSL because it allows for programmable themes.
Pro Tips: The "Primary Color" Trick
- • Store one HSL value instead of 10 Hex codes for button states.
- • Primary: hsl(210, 100%, 50%) — Hover: just change Lightness to 40%!
- • Disabled state: Set Saturation to 0% for instant greyscale.
- • CSS custom properties + HSL = dynamic, themeable design systems.
Common Hex to HSL Mappings
| Hex | HSL | Note |
|---|---|---|
| #FF0000 | hsl(0, 100%, 50%) | Pure Red |
| #00FF00 | hsl(120, 100%, 50%) | Pure Green |
| #0000FF | hsl(240, 100%, 50%) | Pure Blue |
| #808080 | hsl(0, 0%, 50%) | Grey (Notice Saturation is 0%) |
Who is This Tool For?
Design System Engineers
Build scalable color tokens using HSL for automatic shade generation and theming.
CSS Developers
Use HSL with CSS custom properties for dynamic, theme-aware stylesheets.
UI Designers
Create harmonious color palettes by adjusting hue, saturation, and lightness independently.
Dark Mode Implementers
Easily create dark variants by adjusting lightness values without recalculating colors.
Frequently Asked Questions
Why use HSL instead of Hex?
Hex is great for computers, but terrible for editing. If you have #882222 (Red) and want a 'lighter red', calculating the Hex is hard. In HSL, you just change Lightness from 33% to 50%. It is intuitive.
How is Hex converted to HSL?
First, we convert Hex to RGB (0-255). Then we analyze the R, G, and B values to find the dominant color (Hue), the difference between max/min values (Saturation), and the average brightness (Lightness).
Does this support alpha transparency?
Yes. If you provide an 8-digit Hex (e.g., #FF000080), we convert it to HSLA (Hue, Saturation, Lightness, Alpha).
Is HSL supported in Email HTML?
Support is mixed. While modern webmail often supports it, older clients (like Outlook on Windows) may not. It is safer to stick to Hex for emails, but use HSL for websites.
What is the range for Hue?
0 to 360 degrees. It represents a full circle. 0 is Red, 120 is Green, 240 is Blue, and 360 loops back to Red.
Can I convert 'white' to HSL?
Yes. #FFFFFF becomes HSL(0, 0%, 100%). Usually, Hue is undefined for white/black/grey, so it defaults to 0.
Why is my HSL different from Figma?
Figma uses HSB (Hue, Saturation, Brightness), which is actually HSV. HSL and HSV are different models. HSL has 100% lightness as white; HSV has 100% value as the pure color.
Is this tool free?
Yes, 100% free with no limits.
How many colors can HSL represent?
Ideally infinite, but in CSS it maps to the same 16.7 million colors as 24-bit RGB.
What is 'Saturation' in HSL?
It is the intensity of the color. 0% is grey. 100% is the full, vivid color. Reducing saturation makes the color look washed out or duller.
How do I create color palettes with HSL?
Keep the Hue constant and vary Saturation/Lightness for shade variations. For complementary colors, add 180° to the Hue. For triadic schemes, add 120° and 240°. This mathematical approach is impossible with Hex.
What's the difference between Lightness and Brightness?
In HSL, 50% Lightness is the pure color, 100% is white, 0% is black. In HSB/HSV (Brightness), 100% is the pure color and 0% is black. They're different models that produce different results at the same percentages.