Tailwind is great, but sometimes we want to use colors which are little bit different than original palette. Maybe less saturated.
I wanted an easy way to just generate full color palette, with all the shades, and copy the code into the configuration file and voila, that's it.
I have made one such tool and also found another 2 similar which I haven't seen anywhere before so I would like to present to you:
This one is awesome. Not only you can create palette and code, but you can choose how many hues you want, how many shades and the factor to create them by: luminosity, lightness, intensity.
It also has convenient display of text so you can easily see is it readable enough.
And lastly, you can easily export the code for Tailwind, CSS, and SCSS with the click of a button at the top.
If you don't need so many colors this one is for you. Doesn't offer creating the full palette from base color, but what does offer is fine tuning of each color. Saturation, brightness and hue are reflected to create shades of each color. You have to try to see 😊
While you are doing you can easily see how the buttons and alerts will look like.
There's an option to chose the function for brightness easing which we know is useful because some colors often don't match in brightness with other colors. (Looking at you Yellow 🟡)
After you are satisfied, export the code nicely and there you go!
This one is easy peasy too. Chose your color and it will create harmonious (to it's best abilities 😄) full color palette, with shades for each color.
Besides Tailwind it also creates code for Bootstrap. Which is basically SCSS so you can use it in other frameworks. 🛠
Edit: now available with CSS variables too!
I hope you will find these tools useful as I do and it will make working with colors little bit easier for you.
If you like them - share them , star them, and show some love ❤️ 😊