कलर शेड्स जेनरेटर

कलर शेड्स जेनरेटर क्या है?

कलर शेड्स जेनरेटर एक बेस HEX रंग को किसी डिज़ाइन सिस्टम के लिए तैयार पूरे टिंट-और-शेड स्केल में बदल देता है। केवल RGB में रैखिक मिश्रण के बजाय यह OKLCH या HSL में इंटरपोलेट कर सकता है ताकि रंगत स्थिर रहे और चमक समान रूप से बँटे, जिससे बिना गंदले या फीके चरणों के अवधारणात्मक रूप से संतुलित रैम्प मिलता है। आप तय करते हैं कि कितने चरण बनें — 2 से 24 तक, या अल्पविराम से अलग किए लेबल की कस्टम सूची —, रंगत खिसकाते हैं या संतृप्ति को स्केल करते हैं, और हर चरण का WCAG कंट्रास्ट संकेत पढ़ते हैं जो दिखाता है कि कौन-से शेड सफेद और काले पर टेक्स्ट के रूप में काम करते हैं। तैयार स्केल को एक क्लिक में CSS कस्टम प्रॉपर्टीज़, Tailwind कलर कॉन्फ़िग ऑब्जेक्ट या JSON के रूप में कॉपी किया जाता है।

कलर शेड्स जेनरेटर का उपयोग कैसे करें

1. बेस रंग (HEX) फ़ील्ड में #rrggbb या #rgb प्रारूप में बेस रंग टाइप करें, या इसे दृश्य रूप से चुनने के लिए बड़े स्वैच पर क्लिक करें।
2. एक कलर स्पेस चुनें: स्थिर रंगत वाले अवधारणात्मक रूप से समान रैम्प के लिए OKLCH या HSL, और पारंपरिक रैखिक मिश्रण के लिए RGB।
3. तय करें कि कितने चरण चाहिए (2–24), या सेटिंग्स खोलकर अल्पविराम से अलग की कस्टम चरण सूची दर्ज करें, रंगत खिसकाएँ, संतृप्ति स्केल करें और निर्यात का रंग नाम सेट करें।
4. हर पंक्ति की दो कंट्रास्ट कोशिकाएँ पढ़ें — सफेद और काले पर अक्षर A — जो उस शेड के टेक्स्ट हेतु WCAG AA पूरा करने पर हाइलाइट होती हैं।
5. किसी एक चरण का HEX कॉपी करें, या कॉपी बटनों से पूरे स्केल को CSS वेरिएबल, Tailwind कॉन्फ़िग या JSON के रूप में कॉपी करें।

उदाहरण

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

RGB, HSL और OKLCH विकल्पों में क्या अंतर है?

RGB आपके रंग को सफेद और काले की ओर रैखिक रूप से मिलाता है, जो तेज़ है पर मध्य-टोन में असमान दिख सकता है। HSL और OKLCH इसके बजाय रंगत को स्थिर रखते हैं और चमक को समान रूप से बाँटते हैं; OKLCH अवधारणात्मक रूप से एकसमान है, इसलिए हर चरण चमक में बराबर छलांग जैसा दिखता है। सबसे संतुलित रैम्प के लिए OKLCH चुनें।

मैं कितने शेड बना सकता हूँ, और क्या उन्हें नाम दे सकता हूँ?

2 से 24 तक कोई भी चरण संख्या सेट करें। 11 का मान परिचित Tailwind क्रमांकन (50, 100…900, 950) इस्तेमाल करता है; अन्य मान 50 से 950 तक समान रूप से बँटते हैं। आप सेटिंग्स में अल्पविराम से अलग किए लेबल की कस्टम सूची भी टाइप कर सकते हैं, जो चरण संख्या को अधिरोहित करती है और हर चरण को ठीक वैसे नाम देती है जैसे आप लिखते हैं।

WCAG कंट्रास्ट संकेत कैसे परिकलित होता है?

हर शेड के लिए टूल सापेक्ष चमक से शुद्ध सफेद और शुद्ध काले के विरुद्ध WCAG कंट्रास्ट अनुपात परिकलित करता है। हर पंक्ति की दो छोटी कोशिकाएँ सफेद और काले पर अक्षर A दिखाती हैं और अनुपात 4.5:1 (सामान्य टेक्स्ट हेतु AA) तक पहुँचने पर हाइलाइट होती हैं; सटीक अनुपात और वह AA है या AAA देखने के लिए होवर करें।

क्या मेरा रंग डेटा कहीं अपलोड होता है?

नहीं। रंग गणित, कंट्रास्ट जाँच और तीनों निर्यात पूरी तरह आपके ब्राउज़र में चलते हैं, इसलिए कोई भी रंग मान कभी किसी सर्वर पर नहीं भेजा जाता। यह ऑफ़लाइन काम करता है और आपके पैलेट को निजी रखता है।