How it works
The HSL to Hex Converter translates HSL (Hue, Saturation, Lightness) color values to their hexadecimal CSS representation — converting hsl(220, 80%, 50%) to #1A5FCC, along with the RGB equivalent and a live color preview swatch.
HSL is the preferred model for programmatic color manipulation — creating tints, shades, complementary colors, and systematic palettes. Hex is the standard format for CSS stylesheets, design tokens, and HTML color attributes. This converter bridges the gap when designing a color system in HSL and needing hex output.
How to use it: enter the hue (0–360), saturation (0–100%), and lightness (0–100%) values. The hex code and RGB values update instantly. A color preview shows the result. Toggle between CSS hsl() output and raw hex.
Color system design: a typical button color system might define: primary = hsl(220, 80%, 50%), hover = hsl(220, 80%, 45%), active = hsl(220, 80%, 40%), disabled = hsl(220, 20%, 70%). Notice only one parameter changes in each variant — this is the advantage of HSL for design systems.
HSLA support: enter an optional alpha value (0–100%) to produce 8-digit hex (#RRGGBBAA) and hsla() output for colors with transparency.
Frequently Asked Questions
- Yes. hsl() has been supported in all major browsers since 2010. The modern syntax hsl(220 80% 50%) without commas is supported since 2020 in Chrome, Firefox, Safari, and Edge.
- Red = 0° (or 360°), Yellow = 60°, Green = 120°, Cyan = 180°, Blue = 240°, Magenta = 300°. These are the primary and secondary colors of the additive color wheel.
- In HSL, Lightness at 100% means fully mixed with white, which overrides the hue. At 0% it's fully mixed with black. Pure hue expression occurs at 50% Lightness with 100% Saturation.
- Yes. hsl(220, 80%, 50%) is valid CSS. The output field shows the ready-to-use CSS hsl() function string alongside the hex equivalent.