कलर शेड्स जेनरेटर — Tailwind CSS स्टाइल
कोई भी बेस कलर चुनें और Tailwind CSS और Material Design की स्केल पर तुरंत 11-स्टेप कलर पैलेट (50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950) जेनरेट करें। प्रत्येक शेड सफेद या काले टेक्स्ट के विरुद्ध अपनी WCAG कंट्रास्ट रेटिंग दिखाता है। किसी भी स्वॉच पर क्लिक करके hex कोड कॉपी करें, या CSS कॉपी करें पर क्लिक करके सभी शेड्स को CSS custom properties के रूप में एक्सपोर्ट करें।
कैसे काम करता है
कलर शेड स्केल कैसे काम करता है
कलर शेड स्केल एक बेस कलर के हल्के और गहरे वेरिएशन की एक व्यवस्थित श्रृंखला है, जिसका उपयोग UI डिज़ाइन में विज़ुअल हायरार्की और सुलभ कंट्रास्ट बनाने के लिए किया जाता है। Tailwind CSS कन्वेंशन 11 स्टेप्स का उपयोग करता है जिन्हें 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 और 950 नंबर दिए गए हैं। छोटे नंबर हल्के होते हैं (HSL में अधिक लाइटनेस), जबकि बड़े नंबर गहरे होते हैं। स्टेप 500 आमतौर पर दर्ज किए गए बेस कलर के करीब होता है।
यह टूल इनपुट hex को HSL (Hue, Saturation, Lightness) में कन्वर्ट करके शेड्स जेनरेट करता है, hue और saturation को संरक्षित रखते हुए प्रत्येक स्टेप को एक पूर्वनिर्धारित लाइटनेस वैल्यू पर मैप करता है। स्टेप 50 लगभग 97% लाइटनेस (लगभग सफेद), स्टेप 500 लगभग 52% (मध्य-श्रेणी) और स्टेप 950 लगभग 12% (लगभग काला) से मेल खाता है। यह दृष्टिकोण विज़ुअली सुसंगत पैलेट बनाता है जो सभी ब्राइटनेस लेवल पर कलर की विशेषता बनाए रखता है।
पैलेट में WCAG कंट्रास्ट रेटिंग
पैलेट में प्रत्येक शेड काले या सफेद टेक्स्ट के विरुद्ध अपनी WCAG (Web Content Accessibility Guidelines) कंट्रास्ट रेटिंग दिखाता है — जो भी अधिक पठनीय हो। रेटिंग हैं: AAA (कंट्रास्ट रेशियो ≥ 7:1, सर्वोत्तम एक्सेसिबिलिटी), AA (≥ 4.5:1, सामान्य टेक्स्ट के लिए आवश्यक), AA Large (≥ 3:1, केवल बड़े टेक्स्ट और UI कंपोनेंट के लिए स्वीकार्य), और Fail (< 3:1, टेक्स्ट के लिए अपर्याप्त)। कई क्षेत्रों में WCAG 2.1 AA अनुपालन एक्सेसिबिलिटी के लिए न्यूनतम कानूनी आवश्यकता है।
कलर पैलेट के साथ UI बनाते समय, उन बैकग्राउंड पर टेक्स्ट के लिए AA या AAA रेटिंग वाले शेड्स का उपयोग करें। आमतौर पर शेड्स 50–300 में डार्क टेक्स्ट के साथ मजबूत कंट्रास्ट होता है, जबकि शेड्स 700–950 में सफेद टेक्स्ट के साथ मजबूत कंट्रास्ट होता है। मध्य शेड्स (400–600) अक्सर छोटे टेक्स्ट के लिए AA Large या Fail कैटेगरी में आते हैं, जिससे वे डेकोरेटिव एलिमेंट्स, बॉर्डर या सफेद बड़े टेक्स्ट के पीछे बैकग्राउंड के लिए उपयुक्त होते हैं, लेकिन छोटे बॉडी टेक्स्ट के लिए नहीं।
CSS और डिज़ाइन सिस्टम में पैलेट का उपयोग
CSS कॉपी करें बटन आपके पैलेट को :root ब्लॉक में CSS custom properties (CSS वेरिएबल्स) के रूप में एक्सपोर्ट करता है, जो आपकी स्टाइलशीट में पेस्ट करने के लिए तैयार है। उदाहरण के लिए, blue-500 वेरिएबल --color-500: #3b82f6 बन जाता है (या जो भी कलर आपने चुना हो)। आप वेरिएबल प्रीफिक्स को अपने प्रोजेक्ट के अनुसार बदल सकते हैं: --brand-500, --primary-500, --blue-500 आदि। CSS custom properties कैस्केड होती हैं और प्रति कंपोनेंट या थीम के अनुसार ओवरराइड की जा सकती हैं।
Tailwind CSS, Material Design, Ant Design और Chakra UI जैसे डिज़ाइन सिस्टम सभी अपने कलर सिस्टम के लिए नंबर्ड शेड स्केल का उपयोग करते हैं। एक सुसंगत स्केल होने से आप आत्मविश्वास के साथ चुनाव कर सकते हैं: होवर बैकग्राउंड के लिए 50, लाइट थीम में एक्टिव स्टेट के लिए 100, प्राइमरी बटन के लिए 500, बटन पर होवर स्टेट के लिए 700, और डार्क बैकग्राउंड के लिए 900 का उपयोग करें। सभी ब्रांड कलर को एक ही नंबर्ड स्केल पर रखने से पूर्वानुमानशीलता बनती है और कंपोनेंट स्तर पर डिज़ाइन निर्णय कम होते हैं।
अक्सर पूछे जाने वाले प्रश्न
›शेड नंबर (50–950) का क्या मतलब है?
नंबर Tailwind CSS कलर स्केल कन्वेंशन को फॉलो करते हैं। छोटे नंबर हल्के होते हैं: 50 लगभग सफेद है, 100 बहुत हल्का है, 200 और 300 हल्के टिंट हैं। मध्य (500) ओरिजिनल कलर के करीब एक मध्यम वैल्यू है। बड़े नंबर गहरे होते हैं: 700 गहरा है, 900 बहुत गहरा है, 950 लगभग काला है। स्केल लीनियर नहीं है — इसे ट्यून किया गया है ताकि स्टेप साइज़ पूरी रेंज में परसेप्चुअली समान लगें।
›टिंट और शेड में क्या अंतर है?
टिंट एक ऐसा कलर है जिसमें सफेद मिलाया जाता है, जिससे वह हल्का हो जाता है। शेड एक ऐसा कलर है जिसमें काला मिलाया जाता है, जिससे वह गहरा हो जाता है। HSL टर्म्स में, टिंट में लाइटनेस वैल्यू अधिक होती है और शेड में कम, जबकि hue समान रहता है। इस स्केल में 50–400 नंबर टिंट हैं (बेस से हल्के), जबकि 600–950 शेड हैं (बेस से गहरे)। स्टेप 500 लगभग बेस कलर ही होता है।
›यह टूल शेड्स कैसे जेनरेट करता है?
टूल आपके hex कलर को HSL (Hue, Saturation, Lightness) में कन्वर्ट करता है। यह hue और saturation को स्थिर रखता है और प्रत्येक स्टेप नंबर को एक टार्गेट लाइटनेस वैल्यू पर मैप करता है: स्टेप 50 → 97% लाइटनेस, स्टेप 500 → 52%, स्टेप 950 → 12%। परिणाम को फिर वापस hex में कन्वर्ट किया जाता है। यह तरीका सभी शेड्स में कलर की विशेषता (गर्मजोशी, ठंडापन, चमक) बनाए रखता है।
›WCAG क्या है और शेड्स रेटिंग क्यों दिखाते हैं?
WCAG (Web Content Accessibility Guidelines) पठनीय टेक्स्ट के लिए न्यूनतम कंट्रास्ट रेशियो परिभाषित करता है। AA सामान्य टेक्स्ट के लिए 4.5:1 रेशियो की मांग करता है; AAA 7:1 की। प्रत्येक शेड की कंट्रास्ट रेटिंग दर्शाती है कि उस बैकग्राउंड पर काला या सफेद टेक्स्ट AA या AAA स्टैंडर्ड को पूरा करता है या नहीं। इससे आपको यह चुनने में मदद मिलती है कि कौन से शेड टेक्स्ट के लिए सुरक्षित हैं और कौन से केवल डेकोरेटिव एलिमेंट्स के लिए उपयोग किए जाने चाहिए।
›Tailwind CSS में इस पैलेट का उपयोग कैसे करें?
Tailwind आपको tailwind.config.js में कस्टम कलर परिभाषित करने की अनुमति देता है। theme.extend.colors के अंतर्गत शेड्स जोड़ें: colors: { brand: { 50: '#your-50-hex', 100: '#your-100-hex', ... } }। फिर आप bg-brand-100, text-brand-700, border-brand-300 जैसी क्लास का उपयोग कर सकते हैं। CSS-first कॉन्फिगरेशन वाले Tailwind v4 के लिए, CSS वेरिएबल आउटपुट को अपनी थीम डेफिनिशन में पेस्ट करें।
›मेरे चुने गए कलर पर शेड मेरे इनपुट जैसा बिल्कुल क्यों नहीं दिखता?
टूल प्रत्येक स्टेप के लिए विशिष्ट लाइटनेस वैल्यू टार्गेट करता है — स्टेप 500 लगभग 52% HSL लाइटनेस टार्गेट करता है। अगर आपके इनपुट कलर की अलग लाइटनेस है (जैसे हल्के कलर के लिए 70%), तो स्टेप 500 का शेड 52% की ओर एडजस्ट हो जाएगा। यह एक सुसंगत स्केल बनाता है लेकिन इसका मतलब है कि स्टेप 500 आपके ओरिजिनल इनपुट से एकदम समान नहीं हो सकता। स्टेप 500 पर अपना सटीक कलर पाने के लिए, आप hex को मैन्युअली एडजस्ट कर सकते हैं — स्केल जो भी आप दर्ज करें उसके सापेक्ष जेनरेट होगा।
›क्या मैं इसे CSS custom properties के साथ उपयोग कर सकता हूं?
हाँ — CSS कॉपी करें पर क्लिक करके सभी 11 शेड्स को custom properties के रूप में तैयार :root ब्लॉक प्राप्त करें। अपने CSS में उन्हें var(--color-500), var(--color-50) आदि के रूप में रेफर करें। --color- प्रीफिक्स को किसी भी उपयुक्त नाम (--brand-, --primary-, --blue-) से बदला जा सकता है। Custom properties कैस्केड होती हैं और किसी कंपोनेंट तक स्कोप की जा सकती हैं या डार्क मोड के लिए मीडिया क्वेरी में ओवरराइड की जा सकती हैं।
›ये शेड्स CSS color-mix() फ़ंक्शन से कैसे अलग हैं?
CSS color-mix() फ़ंक्शन (आधुनिक ब्राउज़र में समर्थित) दो रंगों को एक प्रतिशत से मिलाता है, जो पेंट मिलाने जैसा है। यह टूल एक पूर्वनिर्धारित लाइटनेस स्केल (HSL-आधारित) का उपयोग करता है, जो अधिक नियंत्रित और पूर्वानुमानयोग्य डिज़ाइन सिस्टम स्केल बनाता है। color-mix() एक-बार के ब्लेंडिंग के लिए बेहतर है (जैसे अपने ब्रांड कलर में 20% सफेद मिलाना), जबकि यह टूल एक पूर्ण व्यवस्थित डिज़ाइन-सिस्टम पैलेट जेनरेट करता है। दोनों तरीकों की अपनी जगह है जो उपयोग के मामले पर निर्भर करती है।
संबंधित टूल्स
अंतिम अपडेट: