← All guides

What are HEX, RGB and HSL color codes? Differences and conversion

· 2 min read

On the web and in design the same color can be written in three formats: HEX, RGB and HSL. All three describe the same color, but each is more comfortable for different jobs.

RGB: mixing light

RGB reflects how screens produce color: a mix of red, green and blue light. Each channel takes a value from 0 to 255. 0 means none of that light and 255 means full brightness.

rgb(255, 0, 0)     red
rgb(0, 0, 0)       black
rgb(255, 255, 255) white
rgb(59, 130, 246) a shade of blue

HEX: the short way to write RGB

A HEX code writes the same three channels in hexadecimal, two digits each, preceded by #. Split the six digits into pairs to find the red, green and blue channels.

#3b82f6
  3b → 59   (red)
  82 → 130  (green)
  f6 → 246  (blue)

= rgb(59, 130, 246)

Colors whose pairs are identical can be written with 3 digits: #38f is the same as #3388ff. An 8-digit HEX carries transparency in its last two digits.

HSL: the way people think

HSL describes a color as hue, saturation and lightness. Hue is the position on a 360-degree color wheel, and saturation and lightness are percentages.

When you want a slightly lighter or duller version of the same color, in HSL you change just one number. In RGB and HEX you have to adjust all three channels.

hsl(217, 91%, 60%)   the blue above
hsl(217, 91%, 40%)   the same blue, darker
hsl(217, 30%, 60%)   the same blue, duller

When to use which

All three work the same way in browsers, so the choice is mostly habit:

Try it yourself

Type a code into the HEX, RGB and HSL converter: all three formats appear at once and copy in one click. With the color picker you can also grab a color from the screen with the eyedropper. Nothing leaves your browser.

This article is general information.

More guides