HEX to HSL Converter

1. Enter a hex code such as #6366F1.
2. Read the HSL card: hue 239°, saturation 84%, lightness 67%.
3. Press Copy to get hsl(239, 84%, 67%), ready to paste into CSS.
4. To test a variant, edit the lightness in that hsl() string, paste it back into the input and read its new HEX.

Start by converting the hex pairs to RGB and dividing each channel by 255. #6366F1 is rgb(99, 102, 241), which gives R = 0.388, G = 0.400 and B = 0.945.

• Lightness is the average of the highest and lowest channel: (0.945 + 0.388) ÷ 2 = 0.667, or 67%.
• Saturation is the difference between them, 0.557, divided by 1 − |2L − 1|, which is 0.667. That gives 0.835, or 84%.
• Hue depends on which channel is highest. Here it is blue, so H = 60 × ((R − G) ÷ 0.557 + 4) = 60 × 3.979 ≈ 239°.

Rounding to whole numbers is standard, but it costs precision. Convert hsl(239, 84%, 67%) back and you get #6467F2, one step off in every channel, so keep the original hex as your source of truth.

HSL gives hue its own number, which makes quick theme work in CSS easy to read. Store the hue once and derive states from it:

• --brand-h: 239;
• Base: hsl(var(--brand-h) 84% 67%)
• Hover: hsl(var(--brand-h) 84% 57%)
• Subtle background: hsl(var(--brand-h) 84% 95%)

Changing --brand-h re-colors the whole set, which helps with multi-brand themes or a user-selected accent. For a fuller ladder of lighter and darker steps, the shades, tints and tones generator produces 10% increments from one color.

HSL is a cylindrical re-mapping of sRGB, not a model of vision, so the same L does not mean the same perceived lightness. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) both have L = 50%, yet yellow on white measures 1.07:1 and blue on white 8.59:1. OKLCH puts the same two colors at 96.8% and 45.2% lightness.

In practice, an HSL scale that looks even for one hue looks uneven for another, you cannot predict text contrast from L, and blues drift toward purple as you lighten them. For scales that need to look consistent across hues, convert to OKLCH instead, and verify text pairs in the contrast checker.