Tailwind Color Finder

Tailwind Color Finder क्या है?

Tailwind CSS एक डिफ़ॉल्ट रंग पैलेट के साथ आता है जिसमें 22 रंग परिवार हैं, प्रत्येक में 50 (सबसे हल्का) से 950 (सबसे गहरा) तक 11 शेड हैं। इससे आपको bg-indigo-500 या text-red-400 जैसे क्लास नामों के साथ 242 पूर्वनिर्धारित रंग मिलते हैं। जब किसी डिज़ाइन फ़ाइल से आपके पास कोई HEX या RGB मान हो और आपको निकटतम Tailwind क्लास खोजनी हो, तो Tailwind Color Finder आपके इनपुट और पैलेट के प्रत्येक रंग के बीच की दूरी की गणना करता है और सर्वश्रेष्ठ मिलान परिणाम लौटाता है।

मिलान प्रक्रिया में आपके इनपुट रंग और प्रत्येक Tailwind रंग दोनों को RGB त्रिक (triplet) में परिवर्तित किया जाता है, फिर 3D रंग स्थान में यूक्लिडीय दूरी की गणना की जाती है: sqrt((r1-r2)^2 + (g1-g2)^2 + (b1-b2)^2)। सबसे कम दूरी वाला Tailwind रंग निकटतम मिलान होता है। यदि दूरी शून्य है, तो आपका इनपुट किसी Tailwind डिफ़ॉल्ट शेड से बिल्कुल मेल खाता है।

यह एक सामान्य कलर कन्वर्टर या रंग नाम खोज टूल से भिन्न है। कन्वर्टर प्रारूप बदलता है (HEX से HSL, RGB से CMYK)। नाम खोज टूल 148 CSS नामित रंगों से मिलान करता है। Tailwind Color Finder विशेष रूप से Tailwind CSS डिफ़ॉल्ट पैलेट से मिलान करता है और ऐसे क्लास नाम लौटाता है जिन्हें आप सीधे अपने मार्कअप में चिपका सकते हैं।

यह Tailwind Color Finder क्यों उपयोग करें?

किसी HEX मान की 242 Tailwind शेड से मैन्युअल तुलना करने का अर्थ है दस्तावेज़ीकरण या कॉन्फ़िगरेशन फ़ाइलों में स्क्रॉल करते रहना। यह टूल प्रत्येक शेड के लिए दूरी की गणना करता है और शीर्ष मिलान परिणामों को निकटता के अनुसार क्रमबद्ध करके दिखाता है, साथ ही उनके सटीक HEX मान और कॉपी के लिए तैयार Tailwind क्लास नाम भी प्रदर्शित करता है।

Tailwind Color Finder के उपयोग के मामले

Tailwind CSS डिफ़ॉल्ट रंग पैलेट

Tailwind CSS v3 में 22 रंग परिवार हैं। प्रत्येक परिवार में 11 शेड हैं: 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 और 950। 500 शेड को प्रत्येक परिवार का 'आधार' माना जाता है। नीचे दी गई तालिका में प्रत्येक परिवार के सबसे हल्के (50) और सबसे गहरे (950) HEX मान सूचीबद्ध हैं।

Tailwind v3 बनाम v4 रंग पैलेट

Tailwind CSS v4 रंगों को परिभाषित करने का तरीका बदलता है लेकिन डिफ़ॉल्ट पैलेट के नाम और शेड संख्याएँ वही रखता है।

कोड उदाहरण

RGB स्थान में यूक्लिडीय दूरी का उपयोग करके निकटतम Tailwind रंग को प्रोग्रामेटिक रूप से खोजें। प्रत्येक उदाहरण एक HEX स्ट्रिंग लेता है और डिफ़ॉल्ट पैलेट से निकटतम Tailwind क्लास नाम लौटाता है।

// Find nearest Tailwind color from hex input
const TAILWIND_COLORS = {
  'red-500': [239, 68, 68],
  'blue-500': [59, 130, 246],
  'indigo-500': [99, 102, 241],
  'green-500': [34, 197, 94],
  // ... full palette (242 entries)
}

function hexToRgb(hex) {
  const n = parseInt(hex.replace('#', ''), 16)
  return [(n >> 16) & 255, (n >> 8) & 255, n & 255]
}

function nearestTailwind(hex) {
  const [r, g, b] = hexToRgb(hex)
  let best = '', bestDist = Infinity
  for (const [name, [r2, g2, b2]] of Object.entries(TAILWIND_COLORS)) {
    const d = Math.sqrt((r - r2) ** 2 + (g - g2) ** 2 + (b - b2) ** 2)
    if (d < bestDist) { bestDist = d; best = name }
  }
  return best
}

nearestTailwind('#6366f1') // → "indigo-500" (exact match)
nearestTailwind('#5a5de0') // → "indigo-500" (distance: 19.3)
nearestTailwind('#ff4500') // → "red-500" (distance: 57.2)

import math

TAILWIND = {
    "red-500": (239, 68, 68),
    "blue-500": (59, 130, 246),
    "indigo-500": (99, 102, 241),
    "green-500": (34, 197, 94),
    # ... full palette
}

def hex_to_rgb(h: str) -> tuple[int, int, int]:
    h = h.lstrip("#")
    return int(h[0:2], 16), int(h[2:4], 16), int(h[4:6], 16)

def nearest_tailwind(hex_str: str) -> tuple[str, float]:
    r, g, b = hex_to_rgb(hex_str)
    name, dist = min(
        TAILWIND.items(),
        key=lambda item: math.dist((r, g, b), item[1])
    )
    return name, round(dist, 1)

print(nearest_tailwind("#6366f1"))  # → ('indigo-500', 0.0)
print(nearest_tailwind("#1e293b"))  # → ('slate-800', 0.0)
print(nearest_tailwind("#333333"))  # → ('zinc-700', 17.5)

# tailwind.config.js — extend palette with a custom color
# mapped to its nearest default Tailwind shade
module.exports = {
  theme: {
    extend: {
      colors: {
        brand: {
          // Your brand color: #5a5de0
          // Nearest Tailwind: indigo-500 (#6366f1)
          // Use the exact brand color, reference Tailwind for context
          DEFAULT: '#5a5de0',
          light: '#8183f0',   // near indigo-300
          dark: '#3b3dab',    // near indigo-700
        }
      }
    }
  }
}

# Check Tailwind classes in markup:
# npx tailwindcss -o output.css --content ./src/**/*.html

अक्सर पूछे जाने वाले प्रश्न