Every color you pick in CSS eventually resolves to the same underlying data — but hex, RGB, and HSL represent that data in ways that make different tasks easy or hard. Knowing when to reach for which one saves a lot of trial-and-error clicking in a color picker.
Hex: Compact, Not Human-Reasoned
A hex color is six hexadecimal digits, split into three pairs for red, green, and blue:
color: #3b82f6;
/* ^^ ^^ ^^
R G B */
Each pair ranges from 00 to ff (0–255 in decimal). Hex is compact and universally supported, which is why it dominates design tools and CSS — but it's genuinely hard to reason about by eye. Looking at #3b82f6, most people can't immediately tell you how bright it is or what happens if you lighten it 20%. That's not a personal failing — base-16 digit pairs just aren't a format built for human intuition about color relationships.
Shorthand hex (#fff for #ffffff) works when each pair is a repeated digit, and an 8-digit form (#3b82f6cc) adds an alpha channel as a fourth pair — useful, but not supported quite as universally as the base 6-digit form, worth checking your browser support target before relying on it.
RGB: The Same Data, More Legible
rgb() expresses the identical red/green/blue values as hex, just in decimal instead of hex pairs:
color: rgb(59, 130, 246);
color: rgb(59 130 246 / 0.8); /* modern syntax with alpha */
This is more legible than hex at a glance (you can tell 246 is close to max-brightness blue faster than you can parse f6), but it still doesn't answer the question people usually actually have: "how do I make this color a bit lighter" or "give me the same hue but less saturated." RGB values don't map cleanly onto those adjustments — lightening a color in RGB means adjusting three numbers in a way that isn't obvious without a formula or a tool.
HSL: Built for the Adjustments People Actually Want
HSL — Hue, Saturation, Lightness — represents color the way people tend to think about it:
color: hsl(217, 91%, 60%);
- Hue (0–360°) — the base color, positioned on a color wheel (0/360 = red, 120 = green, 240 = blue).
- Saturation (0–100%) — how intense vs. gray the color is. 0% is grayscale regardless of hue.
- Lightness (0–100%) — how close to black (0%) or white (100%) the color is, with 50% being the "pure" version of that hue.
The practical payoff: if you want a lighter shade of a brand color for a hover state, you don't need a formula or a picker — you just increase the lightness value, hue and saturation stay put:
--brand: hsl(217, 91%, 60%);
--brand-hover: hsl(217, 91%, 70%); /* same color, just lighter */
--brand-muted: hsl(217, 40%, 60%); /* same color, less saturated */
This is precisely why HSL is often the more useful model for building a design-system color palette by hand — a full range of tints and shades of one brand hue is just one number changing, not a full recalculation.
Converting Between Them
You rarely need to do this math by hand, but understanding the shape of it helps explain why direct conversion isn't trivial: RGB-to-hex is a simple decimal-to-hex conversion per channel, while RGB-to-HSL involves finding the max/min channel values and computing hue as an angle based on which channel is dominant — genuinely more involved than a lookup. Our Color Converter handles all three directions instantly with a visual picker, which is the practical answer most of the time — but knowing what's happening underneath is what lets you predict, without opening a tool, what adjusting one HSL value will actually do to a color.
Where Each Format Actually Wins
- Hex — copy-pasting a color between design tools and code; it's the lowest-friction universal format.
- RGB — when you need to do arithmetic on individual channels (rare outside of graphics programming) or interoperate with something that only speaks RGB, like
<canvas>pixel data. - HSL — building or adjusting a palette by hand, generating consistent tints/shades of a base color, or any time a designer's instruction is phrased in terms humans use ("make it 15% darker").
Summary
- Hex and RGB encode the exact same red/green/blue data in different notations — neither makes color adjustments intuitive.
- HSL separates hue from saturation and lightness, so common adjustments (lighter, more muted) change one number instead of three.
- Use our Color Converter to move between formats instantly, but reach for HSL specifically when you're the one hand-tuning a palette.
- There's no "best" format universally — pick based on whether you're copy-pasting (hex), doing channel math (RGB), or adjusting a color by feel (HSL).