Find Colors In The Tailwind CSS Using This Tool
now you find colors In The Tailwind CSS, using this Tool, that i have created, and i called it Tailwind CSS color matcher, with one goal in mind, is to help me (and you if you want to) to get the best matches for your colors in tailwind color pallet, the way it work is easy, in the website you just need put your Hex Code color in the input field, after that edit the ranges to find the closes match to your color from the tailwind CSS color pallet,
the main reason i made this website is to help me use tailwind css colors without the need to make a lot of hexcodes in the configuration, basically i wanted to use the already defined pallet, but i coudn’t find a way to match the closest colors that i want, and i can’t guess theme too even though i know every time i choose one color, that it’s not the color that i want.
Specially this purple or indigo one here, i have been using this one in a Figma design and when i wanted to start working on the website i hated that i didn’t know the best match for it in tailwind css. so i made it, well it took me few hours but i made is and i hope if you are reading this that i will help you too
I’m using the HSL value to compare and find the best match for the color that you want to find.
The Background of the result section will use the input value as color, this will help you compare visually to see the best match
you can also see the tailwind color pallet
Tools
I have used Vue 3 with Vite to make this page and yarn in PhpStorm and i have posted the source code in github
it was my first vue3 app and it was a nice practice, to see the changes in vue3 since i only used vue2 till now, but i kinda like it and i will be using it from now on