Hex to Tailwind Converter
Instantly map any hex to the closest Tailwind class using perceptual color difference.
Ready to Convert?
Enter a hex color above or try a popular color to see instant Tailwind class recommendations.
Color Analysis
Your hex input is parsed and validated.
ΔE00 Calculation
We compute CIEDE2000 (ΔE00) in CIELAB space against Tailwind’s OKLCH palette.
Best Match
The smallest ΔE00 is selected as your Tailwind class.
Frequently Asked Questions
Everything you need to know about converting hex colors to Tailwind classes
How It Works: CIEDE2000 (ΔE00) vs. Euclidean Distance
Many developers convert colors by treating Red, Green, and Blue values as 3D spatial coordinates (X, Y, Z) and calculating the straight-line (Euclidean) distance between them. However, Euclidean distance in RGB or Lab space does not represent how humans perceive color differences.
For example, the human eye is much more sensitive to changes in green than in blue, and our perception of brightness changes dramatically depending on whether a color is highly saturated or pastel.
❌ Euclidean RGB Distance
Simple 3D distance: ΔE = √((R₁-R₂)² + (G₁-G₂)² + (B₁-B₂)²). Often yields visually mismatched suggestions (e.g., suggesting a dark grey color for a deep navy blue because the RGB numbers are close, even though they look entirely different to a human).
✅ Perceptual CIEDE2000 (ΔE00)
The industry standard (ISO/CIE 11664-6) used in professional imaging and textile dyeing. It maps colors to CIELAB space and applies complex scaling factors based on Lightness, Chroma, and Hue, mimicking human eye response.
hex2tailwind is built by developers and color professionals to ensure design handoffs are perfectly consistent. The algorithm precomputes the entire Tailwind CSS v4 OKLCH color scale in Lab space, returning accurate classes in under 0.1 milliseconds.
Love hex2tailwind?
Bookmark and share with your team. Make color chores instant.