Skip to content
TW

Tailwind Color Finder

Find the closest Tailwind v4 color class for any HEX.

Best matchExact match
blue-500#3b82f6
Input
#3b82f6
blue-500
#3b82f6
Ready-to-paste
bg-blue-500
text-blue-500
border-blue-500
blue-500exact
#3b82f6 · Δ0.0000
indigo-500
#6366f1 · Δ0.0718
sky-600
#0284c7 · Δ0.0787
indigo-400
#818cf8 · Δ0.0823
blue-600
#2563eb · Δ0.0823
sky-500
#0ea5e9 · Δ0.0982
blue-400
#60a5fa · Δ0.1021
violet-500
#8b5cf6 · Δ0.1203

Closeness is ranked by perceptual colour distance (OKLab). Anything short of an exact match is only the nearest class — it will look slightly different from your input. Custom theme colours outside the default palette are not covered.

About Tailwind Color Finder

Tailwind Color Finder maps a HEX value from a design file to the nearest class name in Tailwind CSS v4's default palette (e.g. blue-500) — answering the single most common question: "which Tailwind class is this?" toco.tools shows your input color side by side with the matched color so you can judge the difference yourself. Ranking uses perceptual distance in OKLab space (oklabDistance) rather than raw RGB difference, which better matches how humans actually perceive closeness. An "exact match" badge only appears when the HEX is identical; otherwise it's clearly labeled as the nearest candidate. The best match comes with ready-to-copy bg-/text-/border- variants. Custom theme colors outside the default palette aren't covered — trust your project's tailwind.config or CSS variables for those.

How to use

  1. Enter a HEX value or use the picker
  2. Check the best match and its exact-match badge
  3. Copy the class name or the bg-/text-/border- variant

FAQ

What is Tailwind Color Finder?

A tool that finds the nearest Tailwind v4 color utility class for any color — useful when you have a HEX from a design file and need the matching class name.

If it's not an exact match, is the color still accurate?

No — without the exact-match badge, it's the closest available class, and the visual result will differ slightly from your input. The input and matched colors are shown side by side so you can judge whether the gap is acceptable.

Why isn't closeness based on raw RGB difference?

Plain RGB distance doesn't match how humans actually perceive color differences. toco.tools ranks colors by distance in OKLab, a perceptually uniform color space, which produces more intuitive rankings.

Does this cover custom theme colors?

No. This tool only covers Tailwind CSS v4's default palette — colors you've added via tailwind.config or CSS variables aren't included.

Is my input color sent anywhere?

No. All matching runs locally in your browser; nothing is sent to toco.tools servers.