FreeOnlineTool

Nearest Tailwind Color from HEX Matcher

Nearest Tailwind Color from HEX Matcher miễn phí trực tuyến. Công cụ thiết kế tức thì trên trình duyệt. Không cần đăng ký.

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ách sử dụng

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.