How to Pick the Right Colors for UI

Most designers start with hex codes like #3B82F6 — but those are nearly impossible to reason about. What color is #6D28D9? You'd have to look it up.

HSL (Hue, Saturation, Lightness) maps directly to how we think about color. Hue is the color wheel (0-360°), saturation is how vivid it is (0-100%), and lightness is how bright (0-100%). Once you pick a hue, you can generate an entire palette just by adjusting lightness.

Here's the system: pick one hue for your brand. Then generate 10 shades by stepping through lightness values: 95, 90, 80, 65, 50, 40, 30, 20, 13, 7. That gives you everything from near-white tints to near-black shades.

For neutrals, use the same approach but with 0% saturation. This gives you a consistent gray scale that feels cohesive with your brand colors.

The biggest insight about dark mode: it's not about inverting colors. It's about using the bottom of your lightness scale. Your background becomes 5-7% lightness, cards sit at 10-13%, and elevated elements at 15-20%.

For light mode, subtract from 100 instead. Background at 100%, cards at 97%, elevated at 95%. Same system, opposite end of the spectrum.

Use your 500 shade as the primary button color. Use 50/100 shades for light backgrounds and badges. Use 800/900 shades for text on light backgrounds.

For text on dark backgrounds, don't use pure white — use 85-95% lightness for headings and 55-65% for body text. This creates natural hierarchy without changing font size.