Blog
New Essential Tool: Tailwind CSS Color Generator
Jan 20, 2025
Tools
Take the guesswork out of finding color steps
TL;DR: Tailwind CSS Color Generator takes the guesswork out of identifying color steps.
I'm going to admit something embarrassing. I never really understood how to properly identify color steps.

I would use the base color, let's say 900 in this case, and then I would drop the opacity by arbitrary increments that looked good. THEN, I would take a screen shot of the new transparent color, and eye drop tool grab the color from the screenshot. It worked ok but it wasn't great.

I recently had to identify some color steps for a design system I am working on, and only had a handful of colors to go off of. Using Tailwind CSS Color Generator, I was quickly able to identify colors to use as a starting point to discuss with the design team at large.