Color formats: hex, rgb, hsl, oklch

Four ways to write the same color

.a { color: #3B82F6; }                /* hex — short, opaque (or #3B82F6ff for full alpha) */
.b { color: rgb(59 130 246 / 0.8); }  /* modern rgb (no commas, slash for alpha) */
.c { color: hsl(217 91% 60% / 0.8); } /* hue saturation lightness */
.d { color: oklch(0.66 0.18 252 / 0.8); } /* OKLCH — modern, perceptually uniform */

When to use each

• `#hex` — copy-paste from Figma. Familiar. Fine for static brand colors.
• `rgb()` — when you need alpha and the color came from a designer as RGB. Use the modern slash syntax: rgb(255 0 0 / 0.5).
• `hsl()` — when you want to MANIPULATE the color (lighten, darken, shift hue) by tweaking one channel.
• `oklch()` — when you want perceptual uniformity across hues. Best modern default.

What's wrong with hsl?

HSL was meant to be intuitive: "blue at 50% lightness, green at 50% lightness." But human vision isn't proportional to RGB lightness — at the same HSL lightness, yellow looks WAY brighter than blue. Algorithmic palette generation in HSL produces lumpy results.

What OKLCH fixes

• L (lightness) — perceptual lightness. 0.5 looks like 0.5 across every hue.
• C (chroma) — saturation. 0 = grey, ~0.3 = vivid.
• H (hue) — degree on the color wheel (0-360).

Same L → same perceived brightness across blue, green, red. Critical for design-system palettes.