Building real palettes

A functional palette isn't just pretty colors — it's a system of roles. Whether you're designing an interface, a brand identity, an illustration, or a printed piece, you need: a primary (dominant identity color), a background/surface (the canvas), a foreground/text color (readable on the surface), an accent (emphasis and highlights), and semantic colors (status or meaning cues).

Each role needs multiple shades for variations — hover states, borders, subtle backgrounds, tonal depth. Generate these systematically from your base colors using HSL lightness steps rather than hand-picking unrelated values.

Don't pick shades by feel. Start with your base color at 50% lightness (the purest expression of the hue), then step lightness in even increments to generate a scale: 95%, 90%, 80%, 70%, 60%, 50%, 40%, 30%, 20%, 10%. Keep hue and saturation constant.

This gives you a predictable ramp where each step has a known luminance relationship to its neighbors — essential for consistent hover states, borders, and layered surfaces.

Switching between light and dark contexts isn't just inverting colors. Surfaces flip (light → dark), foreground flips (dark → light), but your primary and accent hues stay the same — adjust their lightness to maintain contrast on the new surface.

A common mistake: using pure black (`#000`) for dark backgrounds. Use a dark grey (`#121212` to `#1a1a2e`) instead — it reduces eye strain, preserves depth cues from shadows, and provides a more comfortable viewing experience.