HEX vs. RGB vs. HSL: Color Formats Explained

HEX, RGB, and HSL all describe the exact same set of colors — they differ only in how they express that color to a human reading the code.

HEX: compact and common

A HEX color code packs red, green, and blue values into a six-digit hexadecimal string, like `#3B82F6`. It's compact and extremely common in design tools, style guides, and CSS, though the numbers themselves don't give an intuitive sense of the resulting color without some practice.

RGB: explicit channels

RGB expresses the same red, green, and blue values as three separate base-10 numbers from 0–255, e.g. `rgb(59, 130, 246)`. It's useful when you want explicit, separately readable channel values, and pairs naturally with an alpha channel via `rgba()` for transparency.

HSL: designed for human intuition

HSL describes color by Hue (position on a 360° color wheel), Saturation (intensity), and Lightness. Because these three properties are independent, HSL makes it much easier to reason about adjustments — "make this a bit darker" is just lowering the lightness value, without needing to recalculate three separate RGB channels.

They're all equivalent — pick based on workflow

None of these formats has a "larger" range of colors than the others — they are just different ways of expressing the same underlying color space. HEX is often the default from design tools; HSL tends to be preferred when programmatically generating a consistent palette of shades and tints.