HEX vs RGB vs HSL: Color Formats Explained
HEX, RGB and HSL are three different ways of writing down the exact same color — none is more "correct" than another, but each makes a different kind of adjustment easy. Here's what's actually inside each one.
HEX: compact and copy-paste friendly
A HEX color like #3B82F6 packs the same red, green and blue values as RGB into six hexadecimal digits — two digits each, from 00 (none) to FF (full intensity). Its main appeal is compactness: it's short enough to paste into a stylesheet, a design tool, or a chat message without much friction, which is why it's the format most design tools display by default and the one people tend to memorize for a specific brand color.
RGB: three light values, plus alpha
RGB writes the same information as three separate decimal numbers from 0–255: rgb(59, 130, 246) is the same blue as the HEX example above. RGB models how screens actually produce color — mixing red, green and blue light at different intensities — which makes it a natural fit for anything working directly with pixel data. Its extended form, RGBA, adds a fourth value for alpha (opacity), letting you specify a color that's partially transparent without changing the color itself.
HSL: the one that's easy to reason about
HSL describes a color completely differently: Hue (a position around a 360° color wheel — 0/360 is red, 120 is green, 240 is blue), Saturation (0% is gray, 100% is fully vivid), and Lightness (0% is black, 100% is white, 50% is the purest version of that hue). The advantage shows up the moment you want to adjust a color rather than just specify one: to make a blue lighter, you raise the Lightness value and leave Hue and Saturation alone — with RGB, getting the same effect means recalculating all three channels by hand. Generating a matching set of shades and tints of one base color is dramatically easier by adjusting Lightness in HSL than by fiddling with three RGB channels at once.
Which one to actually use
- HEX — for storing, documenting, or quickly copy-pasting a specific known color.
- RGB / RGBA — when you need transparency, or you're working directly with pixel-level image data where red/green/blue channels are the natural representation.
- HSL — when you're generating or adjusting colors programmatically: building a palette of shades, creating hover/active states by nudging lightness, or picking a set of hues that are evenly spaced around the color wheel.
None of this is a one-way choice, either — converting between all three is lossless in principle, since they're just different descriptions of the identical underlying color. The only catch is rounding: HSL values rounded to whole numbers can shift an RGB channel by one step on the way back.
Frequently asked questions
Do HEX, RGB and HSL ever represent different colors?
No — they're three different ways of writing down the exact same color. Converting between them is lossless; nothing about the color itself changes.
Why does CSS support all three?
Because each is convenient for a different task: HEX for compact copy-pasting from design tools, RGB for direct control (and transparency via RGBA), and HSL for making a color lighter, darker or more saturated by eye.
What does the 4th value in RGBA or HSLA mean?
Alpha — the opacity of the color, from 0 (fully transparent) to 1 (fully opaque). It doesn't change the color itself, only how much of what's behind it shows through.
Which format should I use for a design system's color palette?
HEX is the most common choice for storing and documenting a palette since it's compact and universally recognized, but HSL is often easier to work from when generating a set of related shades or tints of the same base color.