मोनोक्रोमैटिक पैलेट क्या है?

एक बेस रंग चुनें और उससे गहरे शेड्स और हल्के टिंट्स बनाएं। चरणों की संख्या तय करें, फिर CSS वेरिएबल्स, Tailwind कॉन्फ़िग के रूप में एक्सपोर्ट करें या अलग-अलग hex/RGB वैल्यू कॉपी करें।

कोई भी HEX डालें या कलर पिकर इस्तेमाल करें, हल्के (टिंट), टोन (ग्रे-मिश्रित) और गहरे (शेड) रंगों की संख्या तय करें, और पेज हर स्केल को LAB स्पेस में इस तरह बाँटता है कि कदम एकसमान दिखें। हर स्वैच पर HEX, RGB और HSL दिखता है और एक क्लिक में कॉपी हो जाता है, और «सभी कॉपी करें» पूरे स्केल को एक साथ ले लेता है। आप व्यू को सिर्फ हल्के, सिर्फ टोन या सिर्फ गहरे रंगों तक सीमित कर सकते हैं, या पूरे स्केल को CSS कस्टम प्रॉपर्टीज़, Tailwind कॉन्फ़िग स्निपेट, SCSS वेरिएबल, JSON डिज़ाइन टोकन या PNG स्वैच शीट के रूप में एक्सपोर्ट कर सकते हैं।

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

1. कलर पिकर से बेस रंग चुनें, हेक्स कोड टाइप करें, या «छवि से» के ज़रिए किसी लोगो या फ़ोटो से प्रमुख रंग सीधे ले लें.
2. जितने हल्के (टिंट), टोन (ग्रे-मिश्रित) और गहरे (शेड) रंग चाहिए, उनकी संख्या सेट करें, और अगर सिर्फ़ एक पंक्ति देखनी हो तो «दिखाएँ» फ़िल्टर से दायरा कम कर लें।
3. अलग-अलग रंग मूल्य कॉपी करें, सभी HEX एक साथ पाने के लिए «सभी कॉपी करें» दबाएँ, या पूरा पैलेट CSS कस्टम प्रॉपर्टी, Tailwind कॉन्फ़िग ऑब्जेक्ट, SCSS वेरिएबल, JSON डिज़ाइन टोकन, या छवि स्वैच के रूप में एक्सपोर्ट करें।

कब उपयोग करें

• UI डिज़ाइन सिस्टम बनाते समय: ब्रांड रंग को कंपोनेंट्स पर लगातार 9 स्तरों में बांटना है।
• डेटा विज़ुअलाइज़ेशन: हीटमैप या एकल-रंग बार चार्ट जहां हर सीरीज़ एक ही ह्यू से आनी चाहिए।
• टेक्स्ट और बैकग्राउंड का मेल: -100 बैकग्राउंड और -900 टेक्स्ट का कंट्रास्ट प्रायः सुरक्षित होता है।

परिणाम

आप एक डैशबोर्ड बना रहे हैं और डेटा विज़ुअलाइज़ेशन के लिए नीले पैलेट की ज़रूरत है। आप #3B82F6 बेस के रूप में चुनते हैं, लगभग-सफेद (#EBF2FE) से लगभग-काले (#1A2744) तक 9 चरण उत्पन्न करते हैं। आप CSS वेरिएबल के रूप में एक्सपोर्ट करते हैं और अपने चार्ट में --color-blue-100 से --color-blue-900 का उपयोग करते हैं।

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

मोनोक्रोमैटिक पैलेट असल में क्या है?

एक ही ह्यू के रंगों का सेट, जिनमें संतृप्ति और चमक का अंतर हो। पूरी रेंज एक रंग के परिवार जैसी दिखती है (मसलन एक ही नीले के हल्के-गहरे रंग) और अलग-अलग ह्यू मिलाने से बनने वाली अव्यवस्था से बच जाते हैं।

कितनी सीढ़ियां बनानी चाहिए?

UI में 9 आम है (Tailwind, Material और IBM Carbon में 50-900 का 10-स्तरीय स्केल)। डेटा विज़ुअलाइज़ेशन के लिए 5-7 अक्सर काफी होती हैं। 11 से ऊपर जाने पर पैलेट ग्रेडिएंट जैसा दिखने लगता है और बगल वाली सीढ़ियां आपस में मिल जाती हैं।

एक्सपोर्ट के लिए कौन-सा फॉर्मेट सही है?

CSS वेरिएबल किसी भी स्टाइलशीट में सीधे चिपकाए जा सकते हैं। Tailwind स्निपेट theme.extend.colors में डालने पर bg-brand-500 जैसी यूटिलिटी मिल जाती है। SCSS आपको $brand-500 वेरिएबल और एक Sass map दोनों देता है। JSON पूरे स्केल को संरचित डिज़ाइन टोकन के रूप में एक्सपोर्ट करता है, जो style dictionary में काम आता है। PNG स्वैच Figma या ब्रांड डॉक में साझा करने के लिए उपयुक्त है।

सबसे हल्के स्तर सफेद से क्यों नहीं अलग दिखते?

बहुत अधिक चमक पर कोई भी संतृप्त रंग आंख को लगभग सफेद ही लगता है। यदि -100 सफेद जैसा हो जाए तो हल्की सीढ़ियों की संख्या घटाइए या चमक की ऊपरी सीमा को बेस रंग के करीब लाइए। बगल वाली सीढ़ियां फिर से अलग दिखने लगेंगी।

क्या ये रंग एक्सेसिबिलिटी पास करते हैं?

अब आप इसे यहीं जाँच सकते हैं. WCAG कंट्रास्ट बैज चालू करें और हर स्वैच दिखाएगा कि उस पर काला या सफ़ेद टेक्स्ट AA या AAA पास करता है या नहीं; रंग दृष्टि पूर्वावलोकन स्केल को वैसे ही रंगता है जैसे डयूटेरेनोपिया, प्रोटेनोपिया या ट्राइटेनोपिया वाला व्यक्ति देखता है. एक त्वरित नियम: -100/-200 चरण को -700/-800 चरण के साथ जोड़ें और आप आमतौर पर WCAG AA पास कर लेंगे.

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