Color Token Generator
नयाGenerate a full design-token scale (50–950 shades) from a single base color — CSS, Tailwind or JSON.
Runs entirely in your browser. Nothing is uploaded.
हर डिज़ाइन सिस्टम को कलर स्केल की ज़रूरत क्यों है
कलर स्केल एक सुसंगत विज़ुअल भाषा की रीढ़ है। इसके बिना, डिज़ाइनर और डेवलपर तदर्थ निर्णय लेते हैं — 'hover के लिए थोड़ा गहरा नीला' या 'कार्ड बैकग्राउंड के लिए बहुत हल्का वर्शन' — जो बिना किसी व्यवस्थित संबंध के दर्जनों लगभग समान hex वैल्यू उत्पन्न करते हैं। समय के साथ यह एक ऐसा कोडबेस बनाता है जो एक बार में अपडेट करने में असंभव एकमुश्त कलर वैल्यू से भरा होता है।
एक अच्छी तरह से बनाया गया 11-स्तरीय स्केल इसे हल करता है: हल्के स्टॉप (50–200) टिंटेड सर्फेस और बैकग्राउंड के लिए काम करते हैं, मध्य स्टॉप (300–600) इंटरेक्टिव एलिमेंट जैसे बटन, लिंक और फोकस रिंग को संभालते हैं, और गहरे स्टॉप (700–950) टेक्स्ट और हाई-कंट्रास्ट बॉर्डर को मैनेज करते हैं। हर निर्णय स्केल पर वापस जाता है, और ब्रांड कलर बदलने का मतलब स्टाइलशीट में सैकड़ों hex कोड ढूंढने के बजाय एक बेस वैल्यू अपडेट करना है।
Tailwind कलर स्केल कन्वेंशन
Tailwind CSS ने 11-स्टॉप न्यूमेरिक नेमिंग कन्वेंशन — 50, 100, 200 से 900, 950 — को लोकप्रिय बनाया और तब से इसे Radix UI, shadcn/ui, Material Design 3 और अधिकांश आधुनिक कंपोनेंट लाइब्रेरी इकोसिस्टम ने मानक के रूप में अपनाया है। इसका फायदा पूर्वानुमान है: एक डेवलपर जिसने इनमें से किसी भी सिस्टम का उपयोग किया है, वह तुरंत जानता है कि 500-लेवल टोकन मिड-रेंज बेस कलर है, 100-लेवल टोकन बहुत हल्का टिंट है, और 800-लेवल टोकन हल्के बैकग्राउंड पर उपयोग के लिए गहरा शेड है।
यह टूल Tailwind की बिल्ट-इन पैलेट (नीला, लाल, हरा, आदि) के साथ विज़ुअली संगत स्केल जनरेट करता है, जिससे एक कस्टम ब्रांड कलर जोड़ना सीधा हो जाता है जो Tailwind के डिफ़ॉल्ट के साथ स्वाभाविक रूप से एकीकृत होता है। Tailwind एक्सपोर्ट फॉर्मेट tailwind.config.js में theme.extend.colors जो अपेक्षा करता है उससे बिल्कुल मेल खाता है।
WCAG कंट्रास्ट रेशियो को समझना
टेक्स्ट कलर और उसके बैकग्राउंड के बीच कंट्रास्ट रेशियो उनकी सापेक्ष लुमिनेंस से गणना की जाती है — यह माप कि प्रत्येक कलर मानव आंख को कितना चमकीला दिखाई देता है। WCAG फॉर्मूला है (L1 + 0.05) / (L2 + 0.05), जहां L1 हल्के कलर की लुमिनेंस है और L2 गहरे की। परिणाम 1:1 (समान कलर, कोई कंट्रास्ट नहीं) से 21:1 (सफेद बैकग्राउंड पर काला टेक्स्ट, अधिकतम कंट्रास्ट) तक होता है।
WCAG AA सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (18pt+) के लिए 3:1 की आवश्यकता है। इस टूल में, प्रत्येक स्वैच के सफेद-टेक्स्ट और काले-टेक्स्ट कंट्रास्ट रेशियो की गणना की जाती है और W✓ और B✓ बैज के रूप में दिखाया जाता है। मध्य-स्केल स्टॉप (400–600) आमतौर पर दोनों थ्रेशोल्ड पर विफल होते हैं — वे डेकोरेटिव फिल और इंटरेक्टिव एक्सेंट के लिए डिज़ाइन किए गए हैं, टेक्स्ट बैकग्राउंड के लिए नहीं।
कलर स्पेस: HSL, OKLCH और यह क्यों मायने रखता है
पारंपरिक पैलेट जनरेटर HSL में काम करते हैं — ह्यू, सेचुरेशन, लाइटनेस। HSL सहज और अच्छी तरह से समर्थित है, लेकिन perceptually non-uniform है: समान न्यूमेरिक लाइटनेस स्टेप ह्यू के आधार पर नाटकीय रूप से अलग दिखता है। 50% से 60% लाइटनेस का एक स्टेप नीले के लिए एक बड़ी छलांग की तरह दिखता है लेकिन पीले के लिए एक छोटा कदम, क्योंकि मानव आंख पूरे स्पेक्ट्रम में कलर को अलग तरह से देखती है।
OKLCH एक perceptually uniform कलर स्पेस है जहां समान न्यूमेरिक लाइटनेस स्टेप ह्यू की परवाह किए बिना मानव आंख को समान दिखते हैं। Tailwind CSS v4 ने इसी कारण से आंतरिक रूप से OKLCH पर स्विच किया। एक पैलेट जनरेटर के लिए, OKLCH ऐसे स्केल उत्पन्न करता है जहां प्रत्येक स्टॉप वास्तव में हल्के या गहरे की ओर एक समान कदम की तरह दिखता है।
CSS, Tailwind, SCSS, JSON और DTCG में एक्सपोर्ट
CSS Variables एक्सपोर्ट :root { } के अंदर --color-N नेमिंग पैटर्न का उपयोग करता है। Tailwind एक्सपोर्ट tailwind.config.js में theme.extend.colors में सीधे जाता है — 'color' को अपने टोकन नाम से बदलें (जैसे, 'primary' या 'brand')। SCSS एक्सपोर्ट Sass और Less के साथ संगत $color-N वेरिएबल सिंटेक्स का उपयोग करता है। JSON एक्सपोर्ट W3C DTCG टोकन फॉर्मेट का अनुसरण करता है।
सभी चार फॉर्मेट समान 11 hex वैल्यू आउटपुट करते हैं, इसलिए जनरेशन के बाद उनके बीच स्विच करने के लिए कोई बदलाव की आवश्यकता नहीं है। अपना hex वैल्यू सीधे क्लिपबोर्ड पर कॉपी करने के लिए किसी भी व्यक्तिगत स्वैच पर क्लिक करें।
Coolors, Adobe Color और Material Design Color Tool से तुलना
Coolors.co एक पैलेट डिस्कवरी टूल है जो रैंडम 5-कलर कॉम्बिनेशन जनरेट करने के लिए डिज़ाइन किया गया है। यह इंस्पिरेशन के लिए बेहतरीन है लेकिन टोकन स्केल नहीं बनाता, Tailwind कॉन्फ़िग नहीं बनाता और प्रति-स्वैच WCAG कंट्रास्ट बैज नहीं दिखाता।
Adobe Color एक कलर व्हील से कलर हार्मनी जनरेशन प्रदान करता है और कुछ एक्सपोर्ट विकल्प, लेकिन पैलेट सहेजने और एक्सपोर्ट करने के लिए Adobe अकाउंट की आवश्यकता है। यह Tailwind-संगत कलर स्केल या DTCG JSON जनरेट नहीं करता।
Google का Material Design Color Tool 10-स्टॉप स्केल (50 स्टॉप के बिना) उत्पन्न करता है और विशेष रूप से Material Design थीमिंग के लिए डिज़ाइन किया गया है।
यह टूल पूरा 11-स्टॉप स्केल जनरेट करता है, प्रत्येक स्वैच पर WCAG W✓/B✓ बैज दिखाता है, चार फॉर्मेट में एक्सपोर्ट करता है और कोई लॉगिन की आवश्यकता नहीं है। सब कुछ आपके ब्राउज़र में चलता है।
Frequently asked questions
डिज़ाइन टोकन क्या होते हैं?
डिज़ाइन टोकन नामित वेरिएबल हैं जो विज़ुअल डिज़ाइन निर्णय — रंग, स्पेसिंग, टाइपोग्राफी, शैडो — एक ऐसे फॉर्मेट में स्टोर करते हैं जो प्लेटफॉर्म और टूल्स के पार साझा किया जा सकता है। '--color-brand-500: #7c3aed' जैसा कलर टोकन Web CSS, iOS Swift, Android XML और React Native में एक जैसा उपयोग किया जा सकता है।
11-स्टॉप कलर स्केल क्या है?
11-स्टॉप स्केल एक रंग के 11 शेड परिभाषित करती है जो 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 और 950 पर संख्याबद्ध होते हैं। स्टॉप 50 लगभग सफेद (97% लाइटनेस) है, स्टॉप 500 बेस मिड-टोन है, और स्टॉप 950 लगभग काला (8% लाइटनेस) है। Tailwind CSS ने यह कन्वेंशन स्थापित किया।
स्केल स्टॉप कैसे जनरेट होते हैं?
जनरेटर आपके hex कलर को HSL में कन्वर्ट करता है और एक पूर्वनिर्धारित perceptual लाइटनेस कर्व के साथ प्रत्येक स्टॉप पर आपके कलर के ह्यू को मैप करता है: स्टॉप 50 पर 97%, स्टॉप 950 पर 8% तक। सेचुरेशन को गहरे स्टॉप पर थोड़ा कम किया जाता है।
प्रत्येक स्वैच पर W✓ / B✓ बैज का क्या मतलब है?
W✓ का मतलब है कि सफेद टेक्स्ट उस स्वैच पर 4.5:1 के WCAG AA कंट्रास्ट थ्रेशोल्ड को पास करता है। B✓ का मतलब है कि काला टेक्स्ट उस स्वैच पर 4.5:1 पास करता है। अगर कोई बैज नहीं दिखाई देता, तो सफेद और काला दोनों टेक्स्ट AA में फेल हो जाते हैं।
Tailwind एक्सपोर्ट को अपने प्रोजेक्ट में कैसे उपयोग करें?
Tailwind एक्सपोर्ट को कॉपी करें और अपने tailwind.config.js में theme.extend.colors ऑब्जेक्ट के अंदर पेस्ट करें, 'color' को अपने टोकन नाम से बदलें (जैसे, 'brand' या 'primary')। Tailwind v4 के लिए @theme { } डिक्लेरेशन के अंदर CSS Variables एक्सपोर्ट उपयोग करें।
क्या मैं न्यूट्रल ग्रे के लिए पैलेट जनरेट कर सकता हूं?
हां। एक साफ ग्रे के लिए #6b7280 के करीब कोई भी hex दर्ज करें। कम HSL सेचुरेशन न्यूनतम कलर कास्ट के साथ एक न्यूट्रल रैंप उत्पन्न करता है। वार्म न्यूट्रल के लिए, 25–40 डिग्री ह्यू और 6–12% सेचुरेशन वाला hex उपयोग करें। कूल ग्रे के लिए, 210–230 डिग्री रेंज में ह्यू उपयोग करें।
W3C DTCG फॉर्मेट क्या है?
DTCG फॉर्मेट इंटरऑपरेबल डिज़ाइन टोकन के लिए एक उभरता W3C मानक है, जो परिभाषित करता है कि टोकन को JSON में कैसे संरचित किया जाना चाहिए ताकि Figma, Style Dictionary, Theo और Supernova जैसे टूल्स कस्टम ट्रांसफॉर्मेशन के बिना एक ही टोकन फ़ाइल को कंज्यूम कर सकें।
Related tools
सभी टूल्स देखें
नया Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.
कलर पिकर और कन्वर्टर
एक रंग चुनें और उसे HEX, RGB, HSL और OKLCH में बदलें।
नया कलर कंट्रास्ट चेकर
टेक्स्ट और बैकग्राउंड रंगों के बीच WCAG AA/AAA कंट्रास्ट अनुपात जाँचें।
नया CSS ग्रेडिएंट जेनरेटर
लाइव प्रीव्यू के साथ linear, radial और conic CSS ग्रेडिएंट बनाएँ।
नया CSS Box-Shadow जेनरेटर
प्रीसेट और लाइव प्रीव्यू के साथ मल्टी-लेयर CSS box-shadow बनाएँ। CSS, value या React style तुरंत कॉपी करें।
नया कलर पैलेट जेनरेटर
complementary, analogous, triadic और monochromatic पैलेट बनाएँ।