FreeOnlineTool

Nearest Tailwind Color from HEX Matcher

Nearest Tailwind Color from HEX Matcher gratis en línea. Herramienta de diseño instantánea en el navegador. Sin registro.

HEX or RGB

Paste a Photoshop HEX. We rank the Tailwind default palette by Euclidean RGB distance and copy bg-/text-/border- classes.

Input · #3182ce

Nearest Tailwind · #0084d1

Nearest token

sky-600

#0084d1 · ΔRGB 49.1

  • blue-500 · #2b7fff · 49.5
  • cyan-600 · #0092b8 · 56.0
  • blue-600 · #155dfc · 65.3
  • blue-400 · #51a2ff · 66.7
  • sky-700 · #0069a8 · 66.9
  • blue-700 · #1447e6 · 70.0
  • sky-500 · #00a6f4 · 71.7
[Tailwind color match]
input #3182ce
nearest sky-600 #0084d1  ΔRGB 49.1
bg-sky-600
text-sky-600
border-sky-600
runners-up:
  blue-500 #2b7fff  ΔRGB 49.5
  cyan-600 #0092b8  ΔRGB 56.0
  blue-600 #155dfc  ΔRGB 65.3
  blue-400 #51a2ff  ΔRGB 66.7

Cómo usar

How it works

Not a named-color cheat sheet. We convert the Tailwind default palette (including v4 oklch → sRGB) and rank by Euclidean RGB distance.

  1. Paste #3182ce, #38c, or rgb(49, 130, 206).
  2. Compare input vs nearest swatches.
  3. Copy bg-sky-600, text-sky-600, border-sky-600, and the token hex.
  4. Runners-up show the next-closest tokens so you can pick blue-500 if it fits the mock better.

This follows the current default palette, not Tailwind v3 hex trivia. Everything stays in the browser.

FAQ

Why isn't #3182ce blue-600?

RGB Euclidean distance says sky-600 is closer. Old cheatsheets memorized v3 hex values.

Custom theme colors?

Only tailwindcss/colors. Brand tokens in theme.extend live in your project config.