Tailwind Color Converter takes any color you paste — hex like #3B82F6, an rgb() triplet, or an hsl() value — and finds the nearest match in Tailwind's default palette, returning a usable class name such as bg-blue-500 or text-slate-700. It's built for the moment you have a raw color from a design file or a legacy stylesheet and need to express it with a utility class instead of an arbitrary value.
Under the hood the tool doesn't just string-match hex codes. Tailwind's palette is a fixed grid of roughly 22 hues times 11 shades (50 through 950), each with a defined value. To find the "closest" color, the converter measures perceptual distance between your input and every swatch — ideally in a uniform space like CIELAB or OKLab rather than raw RGB, because Euclidean distance in sRGB overstates differences in green and understates them in blue. The smallest distance wins, and that swatch's name becomes your class.
The payoff is consistency. Instead of scattering bg-[#3b82f6] arbitrary values across your markup, you snap colors to the tokens your design system already defines, which keeps your theme coherent and lets a single tailwind.config change ripple everywhere.
Converting a color to a Tailwind class
- 1
Paste or type your source color into the input field. The converter accepts hex (#RRGGBB or shorthand #RGB), rgb()/rgba(), and hsl()/hsla() notations.
- 2
The tool normalizes your input to a common color space and compares it against every swatch in Tailwind's default palette in real time.
- 3
Read the closest match: it shows the Tailwind color name and shade — for example blue-500 — alongside a swatch preview so you can eyeball how tight the match is.
- 4
Copy the class prefix you need (bg-, text-, border-, ring-, etc.) plus the returned color-shade, and drop it into your markup.
- 5
If the match isn't close enough, compare against neighboring shades or fall back to an arbitrary value like bg-[#hex] for that one exact color.
When you'll reach for this
Translating a design handoff
A Figma or Sketch file hands you exact hex values. Convert each one to the nearest Tailwind token so your build uses named shades instead of dozens of arbitrary bracket values.
Migrating legacy CSS to Tailwind
When porting an old stylesheet, run its color declarations through the converter to map hard-coded rgb() and hex values onto Tailwind classes during the refactor.
Sanity-checking a custom brand color
Before adding a bespoke color to tailwind.config, check how close it already is to a stock shade — sometimes blue-600 is near enough to skip a custom token entirely.
Debugging an off-looking UI
Spot-check a rendered color from DevTools against the palette to confirm whether a component is using the intended shade or drifted to a neighboring one.
Notes from working with the palette
- "Closest" is not "exact." A match can be visually off even when it's numerically nearest, so always confirm with the swatch preview before committing — especially for brand colors where a small hue shift is noticeable.
- The returned name is only half a class. Tailwind color names carry no property; you prepend the utility (bg-, text-, border-, ring-, divide-, from-/via-/to- for gradients) to make it real, e.g. border-slate-200.
- Watch the shade scale direction: 50 is the lightest, 950 the darkest. Tailwind added the 950 shades in v3.3, so if you're on an older version a 950 suggestion won't resolve.
- For accessible text, don't trust proximity alone — check the actual contrast ratio. WCAG AA needs 4.5:1 for body text, and adjacent shades like text-gray-400 vs text-gray-500 can straddle that threshold on a white background.
- If you've customized your theme, remember the converter matches Tailwind's default palette, not your overrides. A returned indigo-500 assumes the stock value and may not match your remapped token.
Common questions
How do I convert a hex color to a Tailwind class?+
Paste the hex value (for example #10B981) into the converter and it returns the nearest palette entry, such as emerald-500. Prefix it with the utility you need — bg-emerald-500, text-emerald-500, and so on.
What does "closest Tailwind color" actually mean?+
The tool measures the perceptual distance between your input and every swatch in Tailwind's palette and returns the smallest. Done well this uses a uniform color space like CIELAB or OKLab, which matches human perception far better than raw RGB distance.
Does it support rgb and hsl input, not just hex?+
Yes. It accepts hex, rgb()/rgba(), and hsl()/hsla(). All formats are normalized internally before the nearest-match comparison, so the result is the same regardless of how you express the color.
Can Tailwind use an exact color that isn't in the palette?+
Yes — use an arbitrary value like bg-[#1e293b] or text-[rgb(30,41,59)]. The converter helps you decide whether a named shade is close enough to prefer over an arbitrary value, which keeps your design tokens consistent.
What are the Tailwind shade numbers?+
Each color runs from 50 (lightest) through 100, 200, up to 900 and 950 (darkest), with 500 as the base. The 950 shade was introduced in Tailwind CSS v3.3, so it's unavailable on earlier versions.
Why does the suggested class not match my project's colors?+
The converter compares against Tailwind's default palette. If your tailwind.config overrides or extends the theme, a returned name like blue-500 refers to the stock value, which may differ from your customized token.