Color Converter

Convert colors between HEX, RGB and HSL.

Input

Result

Was this tool helpful?

Thanks for the feedback!

This Color Converter takes one colour as a HEX code or as RGB values and shows it in all three common CSS notations at once: HEX, rgb() and hsl(). It suits web designers copying colours between Figma, CSS and brand guides, and anyone who needs the HSL version of a HEX code to build hover shades.

Formats it reads

HEX with six digits (#7C5CFF) or three (#f80), with or without the leading #, in upper or lower case.
RGB as any three whole numbers: rgb(124,92,255), 124, 92, 255 and 124 92 255 all work.

The result always lists HEX in lowercase, RGB with spaces after the commas, and HSL rounded to whole degrees and percentages, ready to paste into a stylesheet.

Worked example: #7C5CFF to HSL

The HEX pairs 7C, 5C and FF are 124, 92 and 255 in decimal. For HSL, each channel is divided by 255: R = 0.486, G = 0.361, B = 1.000.

Lightness is the midpoint of the largest and smallest channel: (1.000 + 0.361) ÷ 2 = 0.680, so 68%.
The spread Δ = 1.000 − 0.361 = 0.639. Saturation = Δ ÷ (1 − |2L − 1|) = 0.639 ÷ 0.639 = 1, so 100%.
Blue is the largest channel, so hue = 60 × ((R − G) ÷ Δ + 4) = 60 × 4.196 ≈ 252°.

The tool's output is hsl(252, 100%, 68%). A three-digit code is expanded first by doubling each digit, so #f80 becomes #ff8800, rgb(255, 136, 0) and hsl(32, 100%, 50%).

A handy reference: the tricolour

Colour	HEX	HSL
Saffron	#ff9933	30, 100%, 60%
Green	#138808	115, 89%, 28%
Navy (chakra)	#000080	240, 100%, 25%

These are the web values most often used for Independence Day and Republic Day graphics.

Why HSL is worth having

In HEX, making a button 10% darker means recalculating three numbers. In HSL you keep the hue and saturation and lower only the lightness, for example from hsl(252, 100%, 68%) to hsl(252, 100%, 58%) for a hover state. For a full ladder of lighter and darker versions, the Shades and Tints Generator does it automatically, and the Color Contrast Checker tells you whether text on that colour meets WCAG contrast ratios.

Inputs that give wrong answers

HSL input is not supported. Pasting hsl(250, 100%, 68%) doesn't fail; the three numbers are read as red 250, green 100, blue 68, giving an unrelated orange-red.
Transparency is dropped. Eight-digit HEX such as #7C5CFFAA is rejected, and the fourth value of rgba() is ignored.
Keep RGB values between 0 and 255. Larger numbers aren't caught and produce an invalid HEX code.
Rounding. Since HSL is rounded to whole numbers, converting it back can shift a channel by one or two units.

Frequently asked questions

Can I convert HSL to HEX with this tool?

Not directly. It reads HEX or RGB only, and an hsl() value would be misread as three RGB numbers. Use HEX or RGB as the starting point.

What does a three-digit HEX code like #f80 mean?

It is shorthand where each digit is doubled, so #f80 is the same colour as #ff8800.

Does the converter support transparency or alpha?

No. Eight-digit HEX is not accepted and the alpha part of rgba() is ignored, so you get the solid colour only.

Why does converting back from HSL give slightly different RGB numbers?

HSL is rounded to whole degrees and percentages, so a little precision is lost. Keep the HEX or RGB value as your master copy.

Is uppercase or lowercase HEX correct in CSS?

Both are valid and mean the same colour. The tool outputs lowercase, which many style guides prefer.