HEX to Tailwind
Convert your HEX code to the closest color in the Tailwind color palette.
Tailwind color:
How does it work?
Type (or copy/paste) the HEX code in the input box on the left hand side. The code can be with or without the hashtag.
The website will then generate the closest Tailwind color on the right hand side, together with the corresponding HEX code. We use the Delta E algorithm, which is the official way to measure the difference between two colors.
You can quickly copy either of the two generated color codes by clicking or tapping on the clipboard icon, or by pressing the Space or Enter keys when focused on the icon. And you can compare the two colors visually.
We also highlight whether the difference between the HEX code input and the generated Tailwind color is visible to the human eye. We do this by checking whether the Delta E score is higher than 1, which is the official way to establish this fact.
About
Hi there! My name is Mihail and I'm a software engineer based in London, UK. I was initially sceptical of Tailwind, but I decided to give it a go last year and never looked back.
I often check out other websites for design inspiration, especially around colour themes. But not everyone uses Tailwind; in those instances, I have to figure out a way to fetch it from the HEX code found in the CSS. Hence why I decided to build this website :)
I'm using the Astro and React frameworks for the website, and it's hosted on Cloudflare Pages for free (woohoo!).
Open source
I've open-sourced the website! You can find the code on GitHub.
Contact me
Have questions/feedback? Send a message using the form below; include your email if you'd like me to get back to you.
You can also reach out to me directly on LinkedIn.