Design systems should be
predictable, not painful.
hex2tailwind was born out of a simple frustration: why is it so hard to map brand colors to Tailwind CSS classes accurately?
The Problem
Most developers spend hours manualy comparing hex codes to the Tailwind palette, often picking "good enough" matches that lead to inconsistent UI.
Standard RGB math doesn't account for how humans actually perceive color. A "mathematical" match often looks wrong to the human eye because it ignores lightness and chroma perception.
Lightning Fast
Stop hunting through documentation. Paste and go.
Input
#3b82f6
Result
bg-blue-500"Matches with 99.9% perceptual accuracy using Delta-E 2000."
Driven by Science
We didn't just build a color wrapper. We built a bridge between color science and developer productivity.
CIEDE2000 (ΔE00)
The industry standard for color difference. We calculate the distance between colors based on human vision, not just computer numbers.
Tailwind v4 Native
Built for the future of CSS. We fully support the OKLCH palette used in Tailwind CSS v4, ensuring your projects stay ahead of the curve.
Privacy by Design
Your data is yours. We process all color conversions and palette generations directly in your browser. Privacy by default.
Community First
hex2tailwind is and will always be a free resource for the global developer community.
Open Access
No paywalls. No restricted features. No accounts required. We believe the best tools should be accessible to every student, freelancer, and pro developer.
Created by Abhay Vachhani
Created and maintained by Abhay Vachhani, a Full Stack Software Engineer. Built for developers who care about visual precision, accessibility, and high-performance design systems.