Convert any hex color to the closest Tailwind CSS class using the CIEDE2000 (ΔE00) perceptual color difference algorithm. Supports the Tailwind v4 OKLCH palette. Free and unlimited.
No reviews yetBe the first to leave a review for hex2tailwind
Maker
📌
Hi Product Hunt community! 👋
I'm Abhay, the developer behind hex2tailwind.
The Problem: As a developer, I was constantly frustrated by the "guesswork" involved in mapping brand colors to Tailwind CSS. Standard RGB/HSL math often results in "muddy" matches because it doesn't account for how human eyes actually perceive light and color saturation.
The Solution: I built hex2tailwind to bring professional-grade color science to our everyday workflow. Instead of simple math, it uses the CIEDE2000 (ΔE00) algorithm—the gold standard in the imaging and printing industry-to find the visually nearest Tailwind class with mathematical precision.
With Tailwind CSS v4's shift toward OKLCH, I’ve also built a next-gen Palette Generator that ensures your 50–950 scales maintain perfect hue consistency and predictable contrast, even when moving from light surfaces to deep dark mode.
Why use it?
🎯 High-Precision Matching: Verified ΔE00 perceptual accuracy.
🎨 Tailwind v4 Ready: Built natively for the new OKLCH palette.
🛠️ Direct Export: Instant code for both the new CSS-first @theme and legacy JS configs.
🔒 Privacy by Design: 100% browser-based. Your colors never touch a server.
💸 Built for the Community: Totally free and open for feedback.
I’d love to know: How are you currently handling custom color scales in your projects? I’m here all day and would love to answer any technical questions about the math or the v4 implementation!
Looking forward to your feedback! 🚀