DEV Community

loading...

3 new Tailwind color palette generators

tombohub profile image tombohub Updated on ・2 min read

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:

Huey

Link: https://huey.design
Github: https://github.com/sparkpunk/huey

Screenshot_2

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.
Nice. 🌈

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.

UI Colors

Link: http://sitehero.nl/uicolors/

Screenshot_3

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!

Palettolithic

(created by me)
Link: https://palettolithic.com/
Github: https://github.com/tombohub/palettolithic

Screenshot_10

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!

Final word

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 ❤️ 😊

Discussion (2)

pic
Editor guide
Collapse
shackra profile image
Jorge Araya Navarro

I'll use yours, thank you

Collapse
tombohub profile image
tombohub Author

Thanks! Let me know if you have some suggestions, I hope it serves you good