Tools
Find the Closest Tailwind CSS Color
Pick or type a hex color and we'll snap it to the nearest Tailwind palette token — perfect for recreating a custom design with the default theme.
- Color
- emerald-400
- Background
- bg-emerald-400
- Text
- text-emerald-400
- Border
- border-emerald-400
Tailwind palette
About the Tailwind Closest Color Finder
Paste a hex color, or pick one with the native color swatch, and the tool returns the closest match in Tailwind's default palette plus the exact utility classes for it — bg-emerald-400, text-emerald-400, border-emerald-400, for example. It accepts 3-digit (#f93) and 6-digit (#ff9933) hex, with or without the leading #; shorthand is expanded automatically before matching. Everything runs in the browser: the color tables ship with the page, there's no network request, and nothing you type leaves your machine, so it works offline and is safe to use with unreleased brand colors.
Matching is a brute-force nearest-neighbor search. Your hex is parsed into an [r, g, b] triple, then compared against every shade of every color group in the selected palette using plain Euclidean distance — sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2) — and the smallest distance wins. That's a deliberate simplification over perceptual metrics like CIE Delta E 2000: Tailwind's palette is coarse enough that a fancier distance function rarely changes which swatch comes out on top, and it keeps the tool dependency-free. The palette grid below the result outlines the winning swatch so you can judge how close the match actually is.
The version selector controls which palette you're matching against: Tailwind 3.0+ (22 color groups from slate to rose, shades 50–950) or the older 2.2 palette (8 groups, shades 50–900, no 950). Tailwind 4's default theme uses the same visible colors as 3.0, just redefined internally as OKLCH, so the 3.0+ option stays correct for v4 projects with an unmodified theme. Reach for this tool when you have a brand or design-file hex and need the nearest Tailwind class instead of hardcoding an arbitrary value like bg-[#1da1f2] in your markup.
Examples
Input: #32d090
Nearest: emerald-400 (#34d399)
bg-emerald-400
text-emerald-400
border-emerald-400This is the tool's own pre-filled value on Tailwind 3.0+ — load the page with no changes and you get this exact match (Euclidean RGB distance ≈ 9.7, the smallest of any shade in the palette).
Input: #1da1f2
Tailwind 3.0+ -> sky-500 (#0ea5e9)
Tailwind 2.2 -> blue-500 (#3b82f6)Tailwind 2.2 has no sky group, so switching the version selector from 3.0+ to 2.2 moves the nearest match from sky-500 to blue-500 for the same input.
// palette = { emerald: { '50': '#ecfdf5', ..., '900': '#064e3b' }, ... }
const hexToRgb = (hex) =>
[0, 2, 4].map((i) => parseInt(hex.replace('#', '').slice(i, i + 2), 16))
const dist = (a, b) => Math.sqrt(a.reduce((s, x, i) => s + (x - b[i]) ** 2, 0))
const closest = (hex, palette) =>
Object.entries(palette)
.flatMap(([g, shades]) => Object.entries(shades).map(([s, c]) => [`${g}-${s}`, c]))
.map(([cls, c]) => [cls, dist(hexToRgb(hex), hexToRgb(c))])
.sort((a, b) => a[1] - b[1])[0][0]
closest('#1da1f2', palette) // 'sky-500'Verified against the actual palette data: this reproduces the same class as the tool for every input above.
Frequently asked questions
How does this tool find the closest Tailwind color?
It parses your hex value into red, green, and blue components, then measures the Euclidean distance from that point to every shade in the selected Tailwind palette (sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)). Whichever shade has the smallest distance is returned as the match, along with ready-to-use bg-, text-, and border- class names.
Does this work with Tailwind CSS v4?
Yes — use the Tailwind 3.0+ option. Tailwind v4's default theme renders the same visible colors as 3.0, just defined internally with OKLCH instead of static hex values, so the match stays accurate as long as you haven't customized your theme's color tokens.
Can I look up a color by name or by RGB/HSL instead of hex?
No. The input only accepts 3-digit (#f93) or 6-digit (#ff9933) hex, with or without the leading #; named colors like red, and rgb()/hsl() strings, aren't parsed and won't produce a match.
Why isn't the match an exact, pixel-for-pixel color?
Because Tailwind only ships a fixed set of shades — 11 per color group (50–950) in the 3.0+ palette, 10 (50–900) in 2.2. The tool returns whichever shade is numerically closest to your input; it's only an exact match if your hex happens to equal one of those palette values.
What's actually different between the "Tailwind 3.0" and "Tailwind 2.2" options?
The 2.2 palette has 8 color groups and stops at shade 900. Tailwind 3.0 added 14 more groups (slate, zinc, neutral, stone, orange, amber, lime, emerald, teal, cyan, sky, violet, fuchsia, rose) plus a darker 950 shade on every group, so the same input hex can resolve to a different class depending on which version you pick — a saturated blue like #1da1f2 matches sky-500 in 3.0 but blue-500 in 2.2, since 2.2 has no sky family.