Introduction
If you’ve ever customized colors in Tailwind CSS, you probably know the struggle—finding the perfect palette is fun, but turning that into a usable Tailwind config? Not so much.
That’s why I made a simple tool to help: a Color Palette Generator that not only gives you a nice set of colors, but also spits out a ready-to-use Tailwind config. Just copy, paste, and go.
No more manually converting hex codes or worrying about naming conventions. Whether you’re theming a new project or just want to speed things up, this tool’s designed to save time and keep things smooth.
How It Works
The generator isn’t just throwing together random shades — it’s built around color theory.
You start by picking a base color, and then choose a color pattern like:
-
Complementary
-
Triadic
-
Square
-
Analogous, and more
Once you pick a pattern, the generator creates a palette using that harmony rule. Then it turns those colors into a ready-to-go tailwind.config.js snippet — already formatted and named for easy copy-paste into your project.
Here is a screen shot of the project, you start from left side and get the snippet in right side like example below:
Example:
// tailwind.config.js
colors :{
primaryLighter :"#eb2b2b",
primary :"#c91313",
primaryDarker :"#a10f0f",
light :"#fce5e5",
dark :"#280404",
secondary :"#13c913",
tertiary :"#1313c9",
}
Tech Stack
Frontend
React-ts / Vite / Tailwind CSS
-
Vite: It is fast to spin up and reloads instantly while developing. The config is minimal, which keeps things simple and smooth.
-
Tailwind CSS: I like how quick it is to build UI with utility classes. It keeps styles consistent and lets me prototype without leaving my HTML/JSX.
State & Data
React Query /Zod / Zustand
-
Zustand: It is a small and easy-to-use state manager. No boilerplate, just define your store and start using it — perfect for a project like this.
-
Zod: I use Zod to validate color input and keep things safe. It works great with TypeScript and helps prevent weird bugs before they happen.
Conclusion
This was a fun little project to build — not just because I like working with colors, but also because I wanted something practical. Being able to instantly generate a ready-to-paste Tailwind config saves time and helps keep design systems consistent from the start.
It’s a small tool, but I hope it’s helpful for other developers looking to speed up their workflow or get inspired by different color combinations.
Github repo : https://github.com/ShoeheyOt/colorPaletteGenerator-react-ts
Future Improvements
There’s still a lot I want to improve:
UI polish: Right now it’s functional, but not the prettiest. I’d like to refine the layout and make the overall design feel more intuitive and clean.
Dark mode preview: Seeing how a palette looks in both light and dark themes could be super useful for Tailwind users.
Copy button UX: The config is easy to copy now, but I might improve feedback (like a toast or animation) so it feels nicer to use.