CSS Color Formats Explained: HEX, RGB, RGBA, and HSL

Every color on the web can be written four common ways: HEX, RGB, RGBA, and HSL. They can all describe the exact same pixel, so which you use is about readability and intent, not capability. Here's what each format means and when to reach for it.

To convert between them instantly, use our HEX to RGBA converter or pick a shade visually with the RGBA color picker.

HEX: #3B82F6

Six hex digits, two each for red, green, and blue (00–FF, i.e. 0–255). Compact, copy-paste friendly, and the default in most design tools. A modern extension adds two more digits for alpha: #3B82F680 is the same blue at 50% opacity. The downside: you can't eyeball it — nobody looks at #3B82F6 and knows it's a mid blue.

RGB: rgb(59, 130, 246)

The same three channels in decimal. Slightly more readable than HEX and easy to generate programmatically (three numbers 0–255). Functionally identical to the HEX above.

RGBA: rgba(59, 130, 246, 0.5)

RGB plus an alpha channel from 0 (fully transparent) to 1 (fully opaque). This is the format to know when you need semi-transparent overlays, shadows, and hover states. A crucial detail: alpha is not the same as opacity. The CSS opacity property fades the entire element and all its children; an RGBA alpha applies only to that one color (say, a background) while text on top stays fully opaque. That distinction trips people up constantly.

HSL: hsl(217, 91%, 60%)

Hue (0–360° around the color wheel), Saturation, and Lightness. HSL is the format humans can actually reason about: want a darker version of a color? Drop the lightness. Want a muted version? Drop the saturation. Building a palette of related shades is far easier in HSL than in HEX, which is why design systems often define colors in HSL. It also has an alpha variant, hsla().

Which Should You Use?

• HEX — pasting from a design tool, static brand colors.

• RGB — generating colors in code.

• RGBA — anything needing transparency: overlays, shadows, glass effects.

• HSL / HSLA — building palettes and computing hover/active variants by nudging lightness.

Don't Forget Contrast

Pretty colors that fail accessibility help no one. Whatever format you choose, check text against its background for WCAG contrast. Our color contrast checker tells you whether a pair passes AA and AAA, and the color name finder maps a hex value to the nearest named color.

The Bottom Line

HEX, RGB, RGBA, and HSL are four notations for the same colors. Use HEX/RGB for fixed values, RGBA for transparency, and HSL when you need to think in terms of "lighter" and "less saturated" — and let a converter handle the arithmetic.