HEX, RGB, HSL: one color, three spellings.

Color notation is one of those topics where everyone knows enough — you can read #FF0000 as red — but the details (why six digits? what does the L in HSL actually measure? why does 50% lightness yellow look nothing like 50% lightness blue?) stay fuzzy. The details are worth fifteen minutes: they make you faster with every color you'll ever touch.

RGB: what's actually underneath.

Screens make color by mixing red, green, and blue light — an additive system, where all three at full blast make white and all three off make black. The standard web color space, sRGB, gives each channel 8 bits: an intensity from 0 to 255. A color is just those three numbers.

rgb(244 169 64)      lots of red, a good deal of green, a little blue
                     = a warm amber

rgb(0 0 0)           black        rgb(255 255 255)   white
rgb(255 0 0)         pure red     rgb(128 128 128)   middle gray

Three channels × 8 bits = 24 bits, which is where "16.7 million colors" comes from: 256³ = 16,777,216 combinations. Every other notation in this article is a different way of writing these same three numbers.

HEX: RGB in compact clothing.

A hex color is the same three channels written in base 16, two hex digits per channel, glued together behind a #: #F4A940 is F4 red, A9 green, 40 blue — 244, 169, 64. Two hex digits cover exactly 0–255 (16² = 256), which is the entire reason the format works so neatly; if hex is unfamiliar territory, the number-bases guide covers why one hex digit is four bits.

The three-digit shorthand #fa4 expands by doubling each digit — #ffaa44, not #fa4000 — so it can only express colors whose channels happen to be doubled pairs. Case never matters. HEX's virtues are compactness and ubiquity: it's the copy-paste currency of design tools, brand guides, and CSS. Its vice is opacity to humans — quick, is #4A7C59 greenish or purplish? You can't steer a hex code without converting it first.

HSL: numbers a human can steer.

HSL is a re-projection of the same RGB values into three axes that match how people talk about color:

Hue — where on the color wheel, in degrees: 0° red, 60° yellow, 120° green, 180° cyan, 240° blue, 300° magenta, wrapping back to red at 360°. Saturation — how far from gray, 0% (no color) to 100% (fully vivid). Lightness — 0% is always black, 100% always white, 50% is the most vivid version of the hue.

The payoff is editability. Want this site's amber, but darker for a border? Drop the lightness: hsl(35 89% 45%). A desaturated hover state? Lower the S. The complementary color? Add 180 to the hue. A whole palette from one brand color? Hold H and S, step the L. These are one-number edits in HSL that would be three-channel algebra in RGB — which is why design systems and CSS custom properties lean on it so heavily.

Alpha, shorthand, and other syntax.

Notation	Example	Notes
6-digit hex	#F4A940	The workhorse
3-digit hex	#fa4	Each digit doubles: #ffaa44
8-digit hex	#F4A94080	Last pair is alpha: 80 ≈ 50% opaque
rgb()	rgb(244 169 64)	Modern space-separated; commas still parse
rgb() + alpha	rgb(244 169 64 / 0.5)	The slash form replaces old rgba()
hsl()	hsl(35 89% 60%)	Hue is unitless degrees; also takes / alpha
Named	rebeccapurple	~148 CSS keywords; fine for prototypes

Alpha — the fourth channel — is transparency, 0 (invisible) to 1 (solid). All three families carry it now, and the modern CSS syntax has converged on the slash: rgb(244 169 64 / 0.5), hsl(35 89% 60% / 0.5), no rgba/hsla function names needed (though they still work everywhere).

The perceptual gotcha (and OKLCH).

Here's the limitation all three notations share: equal numbers are not equal to your eyes. hsl(60 100% 50%) (yellow) and hsl(240 100% 50%) (blue) have identical saturation and lightness — and the yellow looks blazingly bright while the blue reads as nearly dark. HSL's "lightness" is a formula over RGB values, not a measure of perceived brightness; human eyes weight green and yellow far more heavily than blue.

Two practical consequences. First, you cannot judge text contrast from HSL numbers — accessibility contrast uses a different, perception-weighted formula entirely (what WCAG contrast ratios actually mean walks through it). Second, palettes built by stepping HSL lightness come out uneven across hues. The modern fix is OKLCH, a perceptually-uniform color space now supported in CSS: same steer-able hue/chroma/lightness shape as HSL, but its lightness actually tracks how bright colors look, and it can address colors beyond sRGB on wide-gamut displays. For everyday work HSL remains perfectly serviceable — just know its L is a computational convenience, not a promise to your retina.

Takeaways.

Learn to read all three and color stops being a guessing game: you'll glance at #4A7C59, think "mid green, muted," and be right. That fluency costs one afternoon and pays out for the rest of your career.