color-expert

Use OKLCH or color-mix(in oklab) for CSS gradients because they avoid the mid-gradient darkening that occurs with RGB and HSL interpolation. OKLCH also keeps lightness uniform across hues when generating palette scales.

OKLCH is perceptually uniform, so equal lightness values look equally bright across hues, while HSL lightness is a mathematical average that makes yellow appear far brighter than blue at the same value. Use OKLCH for palette generation and OKHSL or HSLuv when you need HSL-like picker UX.

Use Kubelka-Munk spectral mixing via the open-source Spectral.js library or the commercial Mixbox SDK. Simple RGB averaging produces dull browns, while spectral mixing correctly yields results like blue plus yellow making green.

WCAG ratios are a baseline, but APCA is stricter and better models readability: only about 0.08% of random hex pairs pass APCA 90 for body text. Verify contrast with both, and consider text size, weight, polarity, and color vision deficiency.

HSL is fine for quick color pickers, simple CSS tweaks, and cases where perceptual accuracy does not matter. Switch to OKLCH, OKLAB, or HSLuv when generating palettes, gradients, or anything requiring uniform perceived lightness and saturation.