Hex to Tailwind Color Converter
Find the nearest Tailwind CSS color class for any hex color, or look up the exact hex of a Tailwind class. Bidirectional, using the official v3 palette. Runs in your browser.
Closest Tailwind colors
- blue-500#3b82f6Δ 24.7
- blue-600#2563ebΔ 29.6
- blue-700#1d4ed8Δ 51.1
- sky-600#0284c7Δ 52.4
- sky-500#0ea5e9Δ 52.5
About this tool
Tailwind CSS ships a fixed palette of 242 named color shades (slate-50 through rose-950), and translating between an arbitrary brand hex and that palette by eye is tedious. This tool does it both ways. Given a hex color, it finds the closest Tailwind classes by measuring the straight-line distance in RGB space and ranks the top matches, with swatches and the exact distance so you can judge how close the fit is. Given a Tailwind class name — with or without a bg-/text-/border- prefix — it returns the exact hex value. The palette is extracted directly from the installed tailwindcss package, so every class-to-hex value is the official one, not an approximation. Use it to map a designer's hex to the nearest utility class, or to grab the precise hex when you need it outside of Tailwind. Everything runs locally in your browser.
How to use it
- Choose Hex → Tailwind or Tailwind → Hex.
- For hex input, type or pick a color; for class input, type a name like emerald-600.
- Read the nearest classes (with distance) or the exact hex.
- Copy the class or hex you need.
Frequently asked questions
- How is the "nearest" Tailwind color chosen?
- By the smallest Euclidean distance between the input color and each palette color in RGB space (the square root of the summed squared differences of R, G, and B). The distance value shown lets you see whether the match is exact (0) or just approximate.
- Is RGB distance the same as how my eye sees color?
- Not exactly — perceptual color difference (Delta-E in a space like CIELAB) tracks human vision more closely than raw RGB distance. RGB distance is fast and good enough for matching to a discrete palette, but for very subtle hues the top one or two suggestions are worth comparing visually.
- Are the hex values official?
- Yes. The palette is pulled straight from the installed Tailwind CSS package, so every class maps to the exact published v3 hex (for example blue-500 is #3b82f6 and slate-900 is #0f172a).
- Can I enter a class with a bg- or text- prefix?
- Yes. In Tailwind → Hex mode the converter strips a leading bg-, text-, or border- prefix, so bg-rose-400 and rose-400 both resolve to the same hex.
- Does it support 3-digit hex shorthand?
- Yes. A shorthand like #abc is expanded to #aabbcc before matching, so both long and short hex forms work.
- Is my color sent anywhere?
- No. Matching is done entirely in your browser against the built-in palette, with no network request.