Colors

Overview

Colors is a web tool designed to simplify the process of working with Tailwind CSS color palettes.

After working on several projects styled with Tailwind CSS, I noticed how tedious it was to manage and translate colors into different formats for various use cases. This inspired me to build a tool that could streamline the workflow and eliminate repetitive tasks.

Building Colors

The application is built with Next.js using Tailwind and shadcn UI.

One interesting thing about Tailwind is that colors aren't meant to be using dynamically. What this means is that, you would have to manually create divs for every single color. That is unless you use tailwind safelist. I wrote a simple script that would create tailwind class strings for every single color and by saving them in safelist, I can then use these classes dynamically.

Future

I originally intended for Colors to be a very large-scale project where I would give people the ability to create their own color palettes and then import them into their projects. I really just never got around to building it. Maybe I will eventually build that Colors expansion or maybe someone will beat me to it. Who knows.

Takeaways

Although Colors is an incredibly simple project, I am still very proud of what I built. I still use Colors whenever I work on a new project and I still believe it is the fastest tool for this purpose. This project reinforced my belief in building solutions that prioritize usability and solve specific pain points.