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.