HEX to RGB / RGBA / HSL Converter

The same colour needs three different spellings before a day of front-end work is done: hex for a design token, rgba() for a shadow that has to be semi-transparent, and HSL for the moment you want the same hue 10% darker. The HEX to RGB Converter shows all of them at once and lets you copy any one without retyping a thing.

A native colour picker sits beside the text field and the two stay in step, so you can nudge a hue by eye and read the exact value back, or paste a value and see it. Shorthand is accepted, so #0AFexpands to #00AAFF before conversion, and the leading hash is optional.

The alpha slider runs from 0 to 100 and feeds the RGBArow alone, formatted to 2 decimal places. Behind the preview swatch sits a grey checkerboard, which is how you actually judge a translucent colour rather than guessing at it against whatever the page background happens to be. Everything is arithmetic in the page.

A Real Example: One Violet in Four Notations

The field opens on #7C3AED. Its channels are 124, 58 and 237, so the RGB row reads rgb(124, 58, 237). Convert that to cylindrical coordinates and HSL gives hsl(262, 83%, 58%): a hue 262 degrees round the wheel, highly saturated, a little above mid lightness. Pull the alpha slider to 40 and RGBA becomes rgba(124, 58, 237, 0.40) while the other three rows stay exactly as they were.

How the Math Turns Hex Into HSL

• Each pair of hex digits is a base-16 number from 0 to 255. 7C is 7 times 16 plus 12, which is 124.
• Lightness is the midpoint of the largest and smallest channel once they are scaled to 0 to 1, which is why a colour with one channel at 255 and another at 0 always lands at 50%.
• Saturation uses two different divisors depending on which side of 50% lightness you are on. That discontinuity is inherent to HSL, not a quirk here, and it is why lightening a colour can appear to desaturate it.
• Hue comes from whichever channel is largest, and it is undefined for pure greys. A neutral resolves to hsl(0, 0%, N%), so do not read the 0 as red.
• All three HSL components are rounded to whole numbers, so converting hex to HSL and back can shift a channel by 1. Keep hex as the source of truth if exactness matters.
• Anything that is not 3 or 6 hex digits returns Invalid HEX color. Enter a valid 3 or 6 digit hex code. and the rows disappear rather than showing a stale result.