टिंट और शेड जेनरेटर

इस्तेमाल कैसे करें

1. कलर पिकर से अपना आधार रंग चुनें या उसका हेक्स कोड चिपकाएँ, जैसे #3366cc।
2. तुरंत बनी तीनों शृंखलाएँ देखें: सफ़ेद की ओर टिंट, काले की ओर शेड और धूसर की ओर टोन, 10% के चरणों में।
3. किसी भी स्वैच पर क्लिक करके उसका हेक्स कॉपी करें, या पूरे पैलेट को CSS कस्टम प्रॉपर्टीज़ या सादी HEX सूची के रूप में एक्सपोर्ट करें — चाहें तो Tailwind शैली के 50–900 नामों के साथ।

इस टूल के बारे में

किसी डिज़ाइन सिस्टम को शायद ही कभी एक रंग चाहिए होता है: उसे एक परिवार चाहिए। टिंट, शेड और टोन वे तीन शास्त्रीय तरीक़े हैं जिनसे एक ही ह्यू से वह परिवार बनाया जाता है। टिंट वह रंग है जो सफ़ेद के साथ मिला हो, जिससे हल्के, नरम रूप मिलते हैं — बैकग्राउंड, hover सतहों और निष्क्रिय अवस्थाओं के लिए। शेड वह रंग है जो काले के साथ मिला हो, जिससे गहरे रूप मिलते हैं — हल्के बैकग्राउंड पर टेक्स्ट, किनारियों और दबी हुई अवस्थाओं के लिए। टोन वह रंग है जो धूसर के साथ मिला हो, जो लाइटनेस को उतना बदले बिना सैचुरेशन घटाता है — तीनों में सबसे कम जाना-पहचाना, और वही जो वह मद्धम, संपादकीय रूप देता है जो शुद्ध टिंट और शेड नहीं दे पाते।

यहाँ का गणित जानबूझकर सरल और पूर्वानुमेय है: हर चरण आपके आधार रंग और लक्ष्य (सफ़ेद #ffffff, काला #000000 या मध्यम धूसर #808080) के बीच RGB चैनलों का रैखिक इंटरपोलेशन है, 10% के अंतराल में, इसलिए दसवाँ चरण ठीक लक्ष्य पर पहुँचता है। यही परंपरा शास्त्रीय टिंट-और-शेड जेनरेटर इस्तेमाल करते हैं, और इससे हर मान दोहराने लायक़ रहता है — आप किसी भी स्वैच को हाथ से दोबारा गिन सकते हैं। एक अदला-बदली जानने लायक़ है: चूँकि इंटरपोलेशन OKLCH जैसे अवधारणात्मक स्पेस के बजाय sRGB में होता है, इसलिए अनुभूत लाइटनेस के चरण पूरी तरह एक जैसे नहीं होते, ख़ासकर बहुत चटख पीले और सियान के लिए। UI शृंखलाओं के लिए यह आम तौर पर ठीक रहता है और अक्सर पसंद भी किया जाता है, क्योंकि नतीजे मूल ह्यू के क़रीब बने रहते हैं।

एक्सपोर्ट ही इसे व्यावहारिक बनाता है। एक क्लिक पूरे पैलेट को CSS कस्टम प्रॉपर्टीज़ के रूप में कॉपी कर देता है, जो सीधे किसी :root ब्लॉक में चिपकाने लायक़ होती हैं, या डिज़ाइन टूल के लिए हेक्स कोड की सादी सूची के रूप में। Tailwind शैली के नाम चालू करने पर पैलेट जाने-पहचाने 50–900 पैमाने पर आ जाता है — 50 से 400 तक हल्का होता हुआ, 500 आपका आधार रंग, और 600 से 900 तक गहरा होता हुआ — जो सीधे किसी Tailwind थीम या इसी परंपरा वाली किसी टोकन फ़ाइल में चला जाता है। आप पैलेट को .css फ़ाइल के रूप में डाउनलोड भी कर सकते हैं। हर गणना और वह फ़ाइल भी आपके ब्राउज़र में 100% बनती है; आपका चुना रंग कभी किसी सर्वर को नहीं भेजा जाता।

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