कलर स्कीम क्रिएटर क्या है?

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

कोई भी आधार hex चुनिए, और जनरेटर रंग चक्र पर मानक घुमाव लगा देता है: कॉम्प्लीमेंट्री के लिए 180 डिग्री, स्प्लिट कॉम्प्लिमेंटरी के दोनों किनारों के लिए 150 और 210 डिग्री, ट्रायएडिक के लिए 120, टेट्राडिक के लिए 90, और एनालॉगस के लिए दोनों ओर छोटे क़दम। शेड्स और टिंट्स वही ह्यू बनाए रखते हैं और HSL में सिर्फ़ ब्राइटनेस को निश्चित स्टेप्स पर बदलते हैं, इसलिए हर रंग के लिए साफ़-सुथरी पाँच-स्टेप रैम्प बनती है। हर स्वॉच को HEX, rgb(), hsl() या oklch() में कॉपी किया जा सकता है, कंट्रास्ट पैनल हर रंग को श्वेत और काले के मुकाबले WCAG AA और AAA पर परखता है, और दृष्टि पूर्वावलोकन एक क्लिक में पूरे पैलेट को प्रोटेनोपिया, ड्यूटेरेनोपिया या ट्राइटेनोपिया फ़िल्टर से दोबारा दिखा देता है। शेयर लिंक कॉपी करके आप बिना खाते के पैलेट को बुकमार्क कर सकते हैं या किसी साथी को भेज सकते हैं।

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

1. कलर पिकर का उपयोग करके या हेक्स कोड दर्ज करके एक बेस रंग चुनें।
2. पैलेट तैयार करने के लिए एक स्कीम प्रकार (मोनोक्रोमैटिक, कॉम्प्लिमेंटरी, स्प्लिट कॉम्प्लिमेंटरी, डबल स्प्लिट, ट्रायडिक, एनालॉगस, टेट्रैडिक) चुनें।
3. अलग-अलग हेक्स कोड कॉपी करें, पूरे पैलेट को CSS वेरिएबल के रूप में एक्सपोर्ट करें, या इमेज स्वैच के रूप में डाउनलोड करें।

कब उपयोग करें

• एक ब्रांड hex से नई वेबसाइट या ऐप थीम के लिए पूरी पैलेट तैयार करना।
• मर्चेंडाइज प्रिंट कराने से पहले देख लेना कि लोगो रंग का कोई साफ कॉम्प्लीमेंट है या नहीं।
• Figma या दूसरा डिज़ाइन टूल खोले बिना CSS वैरिएबल बनाना।

परिणाम

एक वेब डेवलपर अपने ब्रांड का प्राइमरी ब्लू (#3B82F6) चुनता है, ट्रायडिक स्कीम से कॉम्प्लिमेंटरी ऑरेंज और ग्रीन टोन प्राप्त करता है, फिर अपने डिज़ाइन सिस्टम के लिए पैलेट को CSS कस्टम प्रॉपर्टीज़ के रूप में एक्सपोर्ट करता है।

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

ट्रायाडिक और टेट्राडिक स्कीम में फ़र्क क्या है?

ट्रायाडिक कलर व्हील पर 120 डिग्री की दूरी पर तीन रंग लेती है, जिससे संतुलित तिकड़ी बनती है। टेट्राडिक चार रंगों का आयत बनाती है (दो कॉम्प्लीमेंट्री जोड़ियाँ), विविधता ज़्यादा होती है पर संतुलन साधना कठिन होता है।

शेड कब इस्तेमाल करूँ और टिंट कब?

शेड (गहरे रूप) हल्के UI में टेक्स्ट, बॉर्डर और hover स्थितियों के लिए अच्छे रहते हैं। टिंट (हल्के रूप) बैकग्राउंड, डिसेबल्ड स्थिति और हल्के हाइलाइट के लिए उपयोगी हैं। ज़्यादातर डिज़ाइन सिस्टम दोनों रैंप मांगते हैं।

क्या जनरेटर एक्सेसिबिलिटी कंट्रास्ट भी जाँचता है?

हाँ — पैलेट के नीचे का कंट्रास्ट पैनल हर रंग का श्वेत और काले के मुकाबले WCAG अनुपात और AA, AAA पास/फेल बैज दिखाता है। सामान्य टेक्स्ट के लिए 4.5:1 की सीमा अधिकतर UI ज़रूरतों को पूरा करती है। दृष्टि पूर्वावलोकन को प्रोटेनोपिया, ड्यूटेरेनोपिया या ट्राइटेनोपिया पर रखकर यह भी देख सकते हैं कि रंग दृष्टि वाले उपयोगकर्ताओं को पैलेट कैसा दिखता है।

एनालॉगस स्कीम कॉम्प्लीमेंट्री से शांत क्यों लगती है?

एनालॉगस रंग व्हील पर पास-पास होते हैं और एक ही रंग परिवार के होते हैं, इसलिए विज़ुअल खिंचाव कम रहता है। कॉम्प्लीमेंट्री रंग आमने-सामने होते हैं, कंट्रास्ट चरम पर पहुँचता है, ऊर्जा महसूस होती है पर बड़ी जगह पर आँखों पर भारी लगते हैं।

क्या Tailwind कॉन्फ़िग में एक्सपोर्ट कर सकते हैं या सिर्फ़ CSS वैरिएबल मिलते हैं?

दोनों मिलते हैं। CSS वैरिएबल सीधे स्टाइलशीट में :root के अंदर पेस्ट हो जाते हैं। Tailwind फॉर्मेट hex मानों को theme.extend.colors ऑब्जेक्ट में लपेटकर देता है, जिसे tailwind.config.js में चिपकाया जा सकता है।

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