मटीरियल डिज़ाइन कलर पिकर क्या है?

Material Design Color Picker सभी प्राइमरी कलर और उनकी शेड वेरिएंट्स (50 से 900) के साथ संपूर्ण Material Design कलर पैलेट प्रदान करता है। किसी भी स्वैच पर क्लिक करके HEX, RGB या HSL में मान कॉपी करें और बिल्ट-इन WCAG कंट्रास्ट टूल से एक्सेसिबिलिटी जाँचें।

पैलेट में Red से Brown तक 19 मुख्य रंग हैं और हर रंग के 50, 100, 200, 300, 400, 500, 600, 700, 800, 900 शेड हैं। जिन रंगों के लिए गूगल ने एक्सेंट तय किए हैं, उनके A100, A200, A400, A700 भी मौजूद हैं। हर स्वैच पर सटीक HEX दिखता है, और सिलेक्टेड कलर पैनल में अपनी प्रोजेक्ट पैलेट जोड़कर कॉपी या डाउनलोड किया जा सकता है।

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

1. सभी Material Design प्राइमरी कलर दिखाने वाली कलर ग्रिड ब्राउज़ करें — Red, Pink, Purple, Deep Purple, Indigo, Blue और बहुत कुछ।
2. किसी प्राइमरी कलर पर क्लिक करके उसकी शेड वेरिएंट्स देखें — सबसे हल्की (50) से सबसे गहरी (900) तक, साथ में एक्सेंट शेड्स (A100–A700)।
3. किसी भी शेड पर क्लिक करके चुने हुए फॉर्मेट (HEX, RGB या HSL) में उसका मान कॉपी करें, शेड को Selected Colors पैनल में जोड़ें, फिर अपने प्रोजेक्ट के लिए पैलेट को CSS, SCSS, Tailwind कॉन्फ़िग या JSON में डाउनलोड करें।

कब उपयोग करें

• एक ही रंग में से मुख्य रंग, हल्का कंटेनर रंग और गहरा होवर रंग चुनना।
• Android या Flutter UI को गूगल की आधिकारिक पैलेट से बिना HEX अनुमान लगाए मिलाना।
• किसी प्रेज़ेंटेशन या मार्केटिंग असेट के लिए एक संगत पैलेट बनाना।

परिणाम

आप एक डैशबोर्ड बना रहे हैं और प्राइमरी बटन कलर के लिए सटीक Material Design 'Indigo 500' (#3F51B5) और हॉवर बैकग्राउंड के लिए 'Indigo 50' (#E8EAF6) चाहिए।

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

मुख्य शेड और एक्सेंट (A) शेड में क्या फर्क है?

50 से 900 तक के शेड एक ही रंग के हल्के-गहरे रूप हैं, जो बैकग्राउंड, सरफेस और टेक्स्ट के लिए होते हैं। A100 से A700 अधिक संतृप्त हैं और गूगल इन्हें बटन व बैज जैसे ध्यान खींचने वाले एक्शन एलिमेंट के लिए सुझाता है।

कुछ रंगों में एक्सेंट क्यों नहीं हैं?

Brown और Grey जानबूझकर कम संतृप्त रंग हैं, इसलिए गूगल ने उनके लिए A संस्करण कभी जारी नहीं किए। यह टूल मूल विशेष-विवरण का पालन करता है और सिस्टम में मौजूद न रहे मान खुद से नहीं गढ़ता।

बॉडी टेक्स्ट के लिए कौन-सा शेड सही है?

Material दिशानिर्देश हल्के बैकग्राउंड पर Grey 900, और गहरे बैकग्राउंड पर Grey 50 या सफ़ेद सुझाते हैं। मध्य शेड (500–600) सेकंडरी टेक्स्ट या कम कंट्रास्ट चाहने वाले आइकनों के लिए सही रहते हैं।

क्या ये रंग Material 3 (Material You) जैसे ही हैं?

नहीं। यह 2014 में गूगल द्वारा जारी मूल Material Design रंग प्रणाली है। Material 3 एक अलग एल्गोरिथ्म है, जो किसी एक सीड रंग से डायनामिक टोनल पैलेट तैयार करता है।

दो शेड के बीच कंट्रास्ट कैसे जाँचें?

दोनों शेड को Selected Colors पैनल में जोड़ें और कंट्रास्ट चेकर तक स्क्रॉल करें। एक को अग्रभूमि और दूसरे को पृष्ठभूमि चुनें, पैनल तुरंत WCAG अनुपात दिखाएगा और सामान्य व बड़े टेक्स्ट के लिए AA, AAA पास/फेल बैज भी।

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