TL;DR: Build a lightness scale (shades & tints) first. That gives you hover/active/disabled states. Only then add complementary/analogous accents if you need them.
Key idea: a usable palette is a system (states + ramps), not just a pretty set of swatches
Most “palette generators” online optimize for aesthetics. Real UI palettes need something more boring: consistent variants that work across states.
Start from a base color. Generate a ramp of lighter and darker variants. This gives you a practical set for backgrounds, borders, hover states, and subtle highlights.
Then choose accents. Complementary colors create strong contrast; analogous colors feel smoother. Triadic palettes can be playful but are easier to overdo.
Common mistakes: choosing accents first and then struggling to create states, or making ramps that jump too hard in dark steps
You can do this quickly in the browser here: Palette Generator. Then refine with Shades & Tints if you want a tighter ramp.
What to track: can you create (1) default, (2) hover, (3) pressed, (4) subtle background, (5) border — without inventing new hues?
If you want to turn palette intuition into a game, try: Palette Guess Game.
For format sanity checks while building, keep this open: Color Converter.