Color Formats Explained: HEX, RGB, and HSL

On the web, the same color can be written several ways — #3498db, rgb(52, 152, 219), and hsl(204, 70%, 53%) are all the exact same blue. Knowing what each format means (and when to reach for which) makes picking, tweaking, and matching colors far easier. This guide breaks down HEX, RGB, and HSL, and how they relate.

It all starts with red, green, and blue

Screens create color by mixing three colored lights: red, green, and blue. Every color you see is some combination of those three channels, each set to an intensity from 0 (off) to 255 (full). All black is 0, 0, 0; all white is 255, 255, 255. HEX and RGB are just two notations for these same three numbers.

RGB

RGB states the three channel values directly:

rgb(52, 152, 219)
     R    G    B

It's the most human-readable of the three because the numbers map straight onto “how much red, green, blue.” Great when you want to reason about the channels themselves.

HEX

HEX encodes the very same 0–255 channel values in hexadecimal (base 16), as a # followed by three pairs:

#3498db
 34 98 db
 R  G  B     →  R=52, G=152, B=219

Each pair runs from 00 (0) to ff(255). HEX is compact and is the default in most design tools and CSS, which is why it's the format you'll copy and paste most. A shorthand also exists: #39f expands to #3399ff by doubling each digit.

HSL

HSL describes color the way people intuitively think about it, with three different axes:

• Hue (0–360°) — the color itself on a wheel: 0° red, 120° green, 240° blue.
• Saturation (0–100%) — how vivid it is, from gray to full color.
• Lightness (0–100%) — how bright, from black through the color to white.

hsl(204, 70%, 53%)
    hue  sat  light

HSL's superpower is adjustingcolor. Want a darker version of a color? Lower the lightness and leave hue and saturation alone. Want a set of matching shades? Keep the hue fixed and vary lightness. Doing that in HEX or RGB means recomputing all three channels; in HSL it's one number.

Alpha: adding transparency

Each format has a variant with an alpha channel for opacity, from 0 (fully transparent) to 1 (fully opaque): rgba(52, 152, 219, 0.5) and hsla(204, 70%, 53%, 0.5). Modern CSS also allows an 8-digit HEX where the last pair is alpha — #3498db80 is the same blue at 50%.

Which should you use?

• HEX — copying a fixed brand color, or pasting into a design tool. Compact and universal.
• RGB / RGBA— when you're reasoning about the raw channels or need simple transparency.
• HSL / HSLA — when you're designing: building palettes, hover/active shades, or tweaking a color by feel.

The good news is you don't have to convert by hand. Our HEX to RGB converter translates between formats instantly, and the color picker lets you choose a color visually and read off its HEX, RGB, and HSL values at once — plus build gradients and palettes. Need to lift a color out of an image? The image color picker does exactly that.