Tailwind कलर खोजक क्या है?

Tailwind Color Finder कोई भी रंग मान लेता है — hex, rgb(), hsl() या teal जैसा CSS नाम — और तुरंत सबसे क़रीबी Tailwind CSS यूटिलिटी क्लास निकालकर देता है। पैलेट को आँख से मिलाने के बजाय अपने डिज़ाइन टूल से मान चिपकाइए और कोड में सीधे इस्तेमाल करने लायक क्लास का नाम पाइए।

मिलान CIE Lab स्पेस में ΔE आधारित होता है, सिर्फ़ RGB घटाने पर नहीं, इसलिए परिणाम वो रंग देता है जो आँख को सबसे करीब लगता है, संख्यात्मक रूप से नज़दीक भर नहीं। Tailwind v3/v4 की पूरी डिफ़ॉल्ट पैलेट खोजी जाती है, slate से rose तक के सभी परिवार, 50 से 950 तक की हर शेड, और साथ में काला-सफ़ेद। टॉप 10 मैच डिस्टेंस स्कोर सहित दिखते हैं ताकि आप रंगत और चमक के बीच चुन सकें।

उपयोग कैसे करें

1. अपने डिज़ाइन मॉकअप से कोई हेक्स रंग कोड दर्ज करें या कलर पिकर का उपयोग करके रंग चुनें।
2. टूल तुरंत सबसे नज़दीकी Tailwind CSS रंग क्लास दिखाता है, साथ में एक विज़ुअल तुलना भी प्रदर्शित करता है।
3. Tailwind क्लास नाम (जैसे bg-blue-500) को सीधे अपने कोड में कॉपी करें। रंग दूरी देखकर आंकलन करें कि मिलान कितना सटीक है।

कब उपयोग करें

• ब्रांड या Figma के hex कोड को नए प्रोजेक्ट के Tailwind क्लास में बदलते समय।
• पुरानी स्टाइलशीट में बिखरे hex मानों को यूटिलिटी क्लास में माइग्रेट करते समय।
• डिज़ाइनर ने सिर्फ़ एक hex दिया हो तो red-500 और rose-500 जैसी पास की शेड्स में सही अर्थ वाली चुनते समय।

परिणाम

आपके डिज़ाइनर ने आपको ब्रांड रंग #2563EB दिया। इसे पेस्ट करें और टूल दिखाता है कि यह blue-500 से बिल्कुल मेल खाता है। #3A7BC8 के लिए, यह sky-600 को सबसे नज़दीकी मिलान के रूप में दिखाता है, साथ में दूरी स्कोर भी बताता है।

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

टूल यह कैसे तय करता है कि कौन-सा Tailwind रंग सबसे करीब है?

दोनों hex को CIE Lab में बदलकर ΔE76 दूरी निकाली जाती है, जो दृश्य रूप से दो रंगों के अंतर का अनुमान देती है। 1 से कम ΔE लगभग पहचानने योग्य नहीं होता; 5 से ऊपर रंगत या चमक का अंतर साफ़ दिखने लगता है।

किस संस्करण की Tailwind पैलेट इस्तेमाल हो रही है?

v3/v4 की डिफ़ॉल्ट पैलेट: 22 परिवार (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) के 50–950 शेड्स, और काले-सफ़ेद। प्रोजेक्ट की कस्टम थीम वाले रंग शामिल नहीं हैं।

मेरा hex अप्रत्याशित शेड से क्यों मेल खा रहा है?

Lab दूरी रंगत, सैचुरेशन और चमक तीनों को एक साथ देखती है। हल्का हरा शायद चटख teal की जगह slate के पास आ जाए क्योंकि चमक का फ़र्क हावी रहता है। पहली पसंद जँचे नहीं तो टॉप 10 देखकर रंग परिवार के हिसाब से चुनें।

क्या परिणाम को Tailwind क्लास की जगह CSS वेरिएबल के रूप में कॉपी कर सकते हैं?

डिटेल पैनल क्लास नाम (जैसे bg-blue-500) और संगत hex दोनों दिखाता है। अगर आप यूटिलिटी क्लास के बजाय CSS कस्टम प्रॉपर्टी अपनाते हैं तो hex कॉपी कर के var(--brand) में रख लें। और जब पैलेट में कोई रंग पर्याप्त करीब न हो, तो टूल आपके सटीक रंग से बनी आर्बिट्रेरी-वैल्यू क्लास (bg-[#hex]) भी दिखाता है, ताकि थीम छेड़े बिना पिक्सेल-सटीक बने रहें।

क्या hex की जगह rgb(), hsl() या CSS रंग का नाम चिपका सकते हैं?

हाँ। यह फ़ील्ड hex (#2563EB या 2563EB, 3 या 6 अंक), rgb()/rgba(), hsl()/hsla() (ह्यू में deg लिखें या बिना यूनिट छोड़ दें), और सभी CSS नामित रंग (teal, rebeccapurple, cornflowerblue, और बाक़ी) समझता है। अल्फ़ा चैनल अनदेखा होता है — तुलना अपारदर्शी RGB समतुल्य पर चलती है।

संबंधित उपकरण