HSL Color Converter
Convert between HSL, HEX, and RGB color formats. Free online converter for designers building intuitive design systems.
How to Use the HSL Converter
Enter values in any of the three input groups (HSL, HEX, or RGB) and the other two formats update automatically. This three-way binding makes it easy to translate a color between formats during a design handoff or code review. Click any output value to copy it to your clipboard.
Understanding HSL: Hue, Saturation, Lightness
Hue is the angle on a color wheel: 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta. Saturation is how vivid the color is — 0% is grayscale, 100% is the purest form of the hue. Lightness controls how light or dark — 0% is black, 50% is the pure color, 100% is white. Mastering these three axes gives you precise control over your entire palette.
HSL in Modern Design Systems
Tailwind CSS, Material Design, Radix UI, and many other systems express their color tokens in HSL internally because it makes scale generation trivial — same hue and saturation, just shift the lightness. If you are building a custom design system, defining your colors in HSL from the start saves hours of manual tuning.
Practical HSL Tricks
Need a hover state? Decrease lightness by 5–10%. Need a disabled state? Drop saturation by 60% and increase lightness by 20%. Need a complementary color for accents? Add 180° to the hue. These quick recipes are why HSL becomes addictive once designers try it.