HEX, RGB and HSL: how CSS color formats relate

Open any design tool and the same color shows up wearing three different outfits: #6c72ff, rgb(108, 114, 255) and hsl(237, 100%, 71%). They look nothing alike, but they're the exact same color described three ways. Knowing how they relate turns picking and tweaking colors from guesswork into something predictable.

HEX is just RGB in disguise

A hex color like #6c72ff is three pairs of hexadecimal digits: 6c, 72, ff — red, green, blue. Hexadecimal is base 16, so each pair runs from 00 (0) to ff (255). Convert each pair to a normal number and you get rgb(108, 114, 255). That's the whole trick: hex and RGB are the same three numbers, one written in base 16 and one in base 10. The shorthand #fff is just #ffffff with each digit doubled.

RGB: mixing light

RGB describes a color by how much red, green and blue light to mix, each from 0 to 255. It maps neatly onto how screens actually work, which is why it's everywhere. The downside is that it isn't very human: given rgb(108, 114, 255) and a wish for "the same color but a bit darker," it's not obvious which numbers to change or by how much.

HSL: built for tweaking

HSL rearranges the same information into hue, saturation and lightness. Hue is an angle on the color wheel from 0 to 360 degrees (red at 0, green at 120, blue at 240). Saturation is how vivid it is, from grey to full color. Lightness runs from black to white. The payoff is intuitive edits: want a darker shade of the same color? Drop the lightness and leave hue and saturation alone. Want a matching palette? Hold lightness and saturation steady and step the hue around the wheel. That's why HSL is the friendliest of the three for actually designing.

One color, three views

None of these is "better" — they're views of the same point in color space, and good tools let you bounce between them. Our color picker shows HEX, RGB and HSL together and updates all three as you adjust, and there are direct converters like HEX to RGB when you just need to translate one value. The full set lives on the color tools page.