Free Developer Tool

Convert Any Hex Color to Tailwind CSS in Seconds

Find the closest Tailwind color class for your hex codes instantly - now powered by the Tailwind v4 OKLCH palette.

Try Converter NowBrowse Colors

Paste a hex like #262626 and get the closest Tailwind class like neutral/800.

How to Convert Hex to Tailwind in 3 Simple Steps

Lightning-fast conversion with perceptual accuracy

1
Paste Your Hex Code
Enter any hex color code - works with or without the # symbol.
2
Get Instant Results
We compare your color to Tailwind’s OKLCH palette using the CIEDE2000 (ΔE00) perceptual color difference algorithm.
3
Copy and Use
Copy the Tailwind class and paste it directly into your UI. Done!

Powered by CIEDE2000 (ΔE00) - the most accurate color difference formula used in modern color science.

Why Developers Choose hex2tailwind

The smart way to work with Tailwind colors

Save Development Time
Skip manual palette hunting - get the correct class instantly.
Perceptually Accurate Matching
Uses the CIEDE2000 (ΔE00) visual color difference model, not just math on RGB.
Stay Consistent
Always use real Tailwind classes instead of random hex values.
Free and Unlimited
No accounts. No ads. No rate limits.

Features That Make Color Conversion Effortless

Lightning Fast
Results update instantly as you type.
Tailwind v4 OKLCH Palette
Matches against the new Tailwind color system for better visual harmony.
One-Click Copy
Copy the matched class and paste it directly into your code.
Side-by-Side Preview
Compare your input color with the recommended Tailwind color visually.
Responsive UI
Works perfectly on desktop, tablet, and mobile.
Accurate Algorithm
Uses CIEDE2000 (ΔE00), the industry standard perceptual color difference formula.
New: Palette Generator

Build a Complete Design System from One Color

Don't just find one shade. Generate a full 50–950 Tailwind scale using OKLCH—ensuring your colors stay vibrant and perceptually uniform across your entire UI.

Open Palette Generator
brand-500
#3B82F6

Ready to Streamline Your Tailwind Workflow?

Convert your first color in seconds - and never guess a Tailwind shade again.

Start Converting Colors
No registrationUnlimited useAlways free

When to Use hex2tailwind

Real-world scenarios where this saves hours

Design to Code
Convert Figma / Sketch / XD hex colors to Tailwind instantly.
Brand Colors
Match brand identity colors to Tailwind equivalents.
Legacy Project Upgrade
Move old CSS projects to Tailwind smoothly.
Client Requests
Convert client-provided hex codes to correct Tailwind classes.
Rapid Prototyping
Apply visually matching Tailwind colors fast.
Learning Tool
Understand how hex maps to Tailwind’s OKLCH palette.

Frequently Asked Questions

How accurate is the conversion?
We use the CIEDE2000 (ΔE00) perceptual color difference algorithm - the same standard used in printing, digital imaging, and textile color matching - ensuring highly accurate results.
Which Tailwind versions are supported?
Fully supports the Tailwind CSS v4 OKLCH color palette. Works with earlier Tailwind projects too - just copy the matched class.
Can I just use arbitrary color values instead?
You can - but using official Tailwind classes improves maintainability, consistency, and reduces CSS bloat.
What if my hex color has no perfect match?
The closest visual match is selected automatically - based on real human color perception, not just math on RGB.
Is this tool really free?
Yes - completely free with no limitations or sign-ups.