HEX, RGB and HSL: Three Ways to Write the Same Color

CSS accepts colors in several formats, and design tools switch between them freely. They look very different, but HEX and RGB are exactly the same information, and HSL is a different way of describing the same color.

HEX is three numbers in base 16

A six-digit HEX code is three two-digit hexadecimal numbers in a row: one each for red, green and blue. Each pair runs from 00 (none of that color) to FF (the maximum, 255 in decimal).

Take #07804F, the green used on this site:

In hexadecimal, the letters A to F stand for 10 to 15, which is why F in 4F counts as 15.

Shorthand HEX

A three-digit code like #2B6 is shorthand. Each digit is doubled, so #2B6 becomes #22BB66. Shorthand can only reach 16 levels per channel instead of 256, so it only works for some colors.

HSL describes the color differently

HSL stands for hue, saturation and lightness. Hue is a position on the color wheel from 0 to 360 degrees: red at 0, green around 120, blue around 240. Saturation is how vivid the color is, and lightness runs from black at 0% to white at 100%.

The same green, #07804F, is hsl(156, 90%, 26%): a blue-leaning green, very saturated, and fairly dark. The yellow used to highlight answers on this site, #FFD43B, is hsl(47, 100%, 62%).

Which format to use

• HEX: compact and universal. Good for storing and sharing exact colors.
• RGB: useful when code needs to work with the channel values, or when you add transparency with rgb(7 128 79 / 50%).
• HSL: easiest to adjust by hand. To make a lighter or darker version, change only the lightness value.

All three produce the same color on screen, so the choice is about what is easiest to read and edit in your project.

Tip: Building a palette? Keep the hue fixed and step the lightness in HSL to get a family of shades that clearly belong together.