Color Converter

One color, three notations

HEX, RGB, and HSL all describe the same screen colors, just in different formats. HEX packs red, green, and blue into a six-digit hexadecimal string. RGB spells out the same three channels as numbers from 0 to 255. HSL instead uses hue, saturation, and lightness, which maps more closely to how people think about adjusting a color.

Example

#3498db
= rgb(52, 152, 219)
= hsl(204, 70%, 53%)

Each pair of hex digits is one channel: 34 is 52 in decimal (red), 98 is 152 (green), db is 219 (blue). HSL describes the same color as a hue of 204 degrees on the color wheel, 70 percent saturation, and 53 percent lightness.

Why HSL is handy

To build a lighter or darker shade of a brand color, HSL lets you keep the hue and saturation and only nudge the lightness, which keeps the colors feeling related. Doing the same in RGB means recalculating all three channels and often drifting off-hue. That is why many design systems define palettes in HSL.

Shorthand and alpha

A three-digit hex like #39d expands by doubling each digit to #3399dd. Eight-digit hex and the rgba or hsla forms add an alpha channel for transparency, where 0 is fully transparent and 1 (or ff) is fully opaque.

FAQ

Why do HEX and HSL round-trips drift slightly? HSL values are often rounded to whole numbers, so converting back and forth can shift a channel by one. It is a rounding artifact, not a conversion error.

Is #FFF the same as #FFFFFF? Yes. The three-digit form is pure shorthand that expands to the six-digit value.

Which format should I store? HEX is compact and great for static values; HSL is better when you plan to compute variations programmatically.