HEX, RGB, and HSL Color Formats

How the three main web color formats relate, when to use each, how to add transparency, and why HSL makes building palettes easier.

Updated July 2026 · 5 min read

Every color on the web can be written several ways, and they all describe the same thing. Knowing how HEX, RGB, and HSL relate — and which one fits a given task — makes it much easier to build consistent palettes, add transparency, and create hover states that actually look intentional. This guide walks through the three formats and when to reach for each.

They are three notations for one idea

A screen produces color by mixing red, green, and blue light. HEX and RGB both specify how much of each channel to use; they differ only in notation. HSL takes a different, more human angle — describing a color by its hue, how saturated it is, and how light it is.

Format	Example	What it specifies
HEX	`#3b82f6`	Red, green, blue in hexadecimal (00–ff each)
RGB	`rgb(59, 130, 246)`	Red, green, blue in decimal (0–255 each)
HSL	`hsl(217, 91%, 60%)`	Hue (0–360°), saturation %, lightness %

All three examples above are the same blue. A converter simply translates between the notations.

HEX: compact and everywhere

A HEX color is #RRGGBB, where each pair is a channel from 00 to ff (0–255). #3b82f6 means red 0x3b (59), green 0x82 (130), blue 0xf6 (246). The three-digit shorthand #f00 expands each digit, so it is equivalent to #ff0000. HEX is the default in most design tools and static CSS.

RGB: when you need channels or opacity

rgb() uses the same channels in decimal, which is handy when you are computing colors in code. Its main advantage is the alpha channel:

rgb(59, 130, 246)        /* opaque */
rgba(59, 130, 246, 0.5)  /* 50% transparent */

Modern CSS also accepts rgb(59 130 246 / 50%) with a slash for the alpha, unifying the syntax.

HSL: the format for building palettes

HSL is the one worth learning well because it maps to how designers think:

Hue (0–360°) — the color itself: 0 is red, 120 is green, 240 is blue.
Saturation (0–100%) — how vivid it is; 0% is grey.
Lightness (0–100%) — 0% is black, 100% is white, 50% is the pure hue.

The payoff: to make a hover state or a tint, keep hue and saturation fixed and change only lightness.

--brand:       hsl(217, 91%, 60%);
--brand-hover: hsl(217, 91%, 52%);  /* darker */
--brand-tint:  hsl(217, 91%, 92%);  /* lighter background */

Doing the same with HEX means guessing new digits for every channel. With HSL you adjust one number.

Which one should you use?

HEX — copying a single static color between a design tool and code.
RGB / RGBA — when you need opacity or are manipulating channels programmatically.
HSL / HSLA — when building a palette, theming, or generating light/dark variants.

In practice most codebases mix them, and that is fine — they are interchangeable. A converter lets you move between formats without doing hexadecimal math by hand.

Try it

The DevBox Color Converter shows HEX, RGB, and HSL side by side and updates live as you pick a color, so you can grab whichever notation your CSS needs. If you work with vector icons, the SVG optimization guide pairs well.

Frequently asked questions

What is the difference between HEX, RGB, and HSL?+

They describe the same colors in different ways. HEX and RGB both specify red, green, and blue channel values (HEX in hexadecimal, RGB in decimal). HSL describes a color by hue, saturation, and lightness, which is more intuitive for creating variations.

Which color format should I use in CSS?+

Any of them work. HEX is compact and common for static colors. RGB/RGBA is handy when you need opacity. HSL is best when building palettes or theming because you can adjust lightness to create tints and shades.

How do I add transparency to a HEX color?+

Use an 8-digit HEX (RRGGBBAA) where the last two digits are the alpha channel, or switch to rgba()/hsla() with an alpha value between 0 and 1.

What is the difference between HSL and HSB/HSV?+

HSL uses lightness (0% is black, 100% is white, 50% is the pure hue). HSB/HSV uses brightness/value (100% is the pure hue, and you reduce it toward black). Design tools often show HSB, while CSS uses HSL.

Are HEX and RGB colors identical?+

Yes. #3b82f6 and rgb(59, 130, 246) are exactly the same color — HEX is just the hexadecimal notation of the same three channel values.