Discovered a color palette trick that actually saved my butt

Been building a design system for a healthcare app. Client wanted 12 shades of blue for their brand. I kept tweaking and tweaking. Nothing felt right. Then I tried this thing where I picked one base blue and just adjusted lightness in 10% steps. No hue shifting. Cleaned up the whole system in 2 hours. Before that I was manually picking every shade. Took me 3 days. Has anyone else found a simpler way to generate color scales without losing your mind?

3 comments

3 Comments

the_piper16d ago

My first healthcare app design system I used Google's Material 3 color tool and it saved me from that exact mess. Their color token generator lets you set a base hex and it handles the lightness curves automatically. I spent 4 hours manually tweaking blues once and they still looked uneven. That tool got me 12 shades in about 20 minutes and the accessibility contrast checks came built in. Just paste your base blue in and it spits out the whole scale with proper visual spacing. Saves you from having to think about the math yourself.

jackson.wesley17d ago

Yeah that's close but lightness isn't linear that way. If you're just moving a slider in 10% steps you're not actually getting evenly spaced visual steps.

sullivan.john16d ago

Honestly, I had the same headache with gradients once. Was building a dashboard and tried eyeballing it, ended up with a scale that looked like it had random jumps in brightness. Totally agree that your eyes are a bad judge of evenly spaced lightness without something like that tool.