Tailwind Color Converter
Paste any HEX color and instantly find the nearest Tailwind CSS class. Uses OKLAB perceptual color matching for accurate results — plus OKLCH values ready for Tailwind v4.
Nearest Tailwind colors:
#3B82F6
oklch(62.31% 0.1880 259.81)
#6366F1
oklch(58.54% 0.2041 277.12)
#0284C7
oklch(58.76% 0.1389 241.97)
#818CF8
oklch(68.01% 0.1583 276.93)
#2563EB
oklch(54.61% 0.2152 262.88)
Related Developer Tools
Last updated: May 24 2026
Reviewed by the QuickTooly Team
Tailwind Color Converter Guide
Why Use QuickTooly's Tailwind Color Converter?
- OKLAB perceptual matching: Finds the color that looks closest to the human eye, not just the numerically nearest in RGB.
- Tailwind v4 ready: Every result includes an OKLCH value — the native format for Tailwind CSS v4.
- Instant results: Matches update as you type. No button click required.
- Full palette coverage: All 22 Tailwind color families across 11 shades (50–950) plus black and white.
- One-click copy: Copy the class name, HEX value, or OKLCH string directly to your clipboard.
- 100% client-side: Your colors never leave your browser. No tracking, no server uploads.
What Is OKLAB and Why Does It Matter?
OKLAB is a perceptual color space designed by Björn Ottosson to match how human vision perceives differences between colors. Unlike RGB or HSL, equal distances in OKLAB correspond to equal perceived color differences — which makes it ideal for finding the "closest looking" color rather than the mathematically nearest one.
Tailwind CSS v4 adopted OKLCH (the cylindrical form of OKLAB) as its primary color format. This converter bridges both worlds: it shows you the Tailwind v3 class name bg-blue-500 alongside the Tailwind v4 equivalent oklch(60.83% 0.1993 255.42).
How to Use This Converter
- Enter a HEX code — type or paste any 6-digit HEX value (e.g.
#3b82f6) - Or use the color picker — click the swatch on the left to open your browser's native color picker
- Review the top matches — the closest Tailwind color is highlighted with a green ring
- Copy what you need — click class for the utility name, hex for the raw value, or v4 for the OKLCH string
Understanding the Match Quality Badges
Each result shows a perceptual distance badge based on the OKLAB ΔE (delta-E) value:
- Exact — ΔE < 0.01, visually indistinguishable
- Very close — ΔE < 0.05, nearly identical to the eye
- Close — ΔE < 0.15, perceptibly similar
- Approximate — ΔE ≥ 0.15, best available match but noticeably different
Frequently Asked Questions
Can I convert any HEX color to a Tailwind class?
Yes. The converter searches the entire Tailwind v3 default palette — 242 colors across 22 families — and returns the five closest matches. If your color falls outside the palette (e.g. a custom brand color), the tool will show the nearest available option along with a match quality badge so you can judge the fit.
Why does the top match look different from my color?
Tailwind's built-in palette has a finite set of values. If you're using a custom or brand-specific color, there may not be an exact match. The tool shows the perceptually closest option using OKLAB distance — but for precise brand colors, you should add a custom color to your Tailwind config rather than using the nearest default.
What is the difference between Tailwind v3 and v4 color formats?
Tailwind CSS v3 uses named utility classes like bg-blue-500 backed by HEX values in its default theme. Tailwind v4 moves to OKLCH as the native color format, enabling wider gamut colors (P3) and more consistent design tokens. This converter shows both so you can migrate or use either version confidently.
Does this tool support RGB or HSL input?
Currently the text input accepts HEX codes. You can use the browser's native color picker (the swatch on the left) which supports any color selection method your OS provides. RGB/HSL direct input is on the roadmap.
Is my color data sent to a server?
No. All conversion and matching happens locally in your browser using JavaScript. The full Tailwind palette is bundled with the page. No data is transmitted to any server.