कलर पैलेट जनरेटर
कलर हार्मनी नियमों से या किसी फ़ोटो से कलर पैलेट बनाएँ। शेड, कंट्रास्ट और ग्रेडिएंट देखें, और CSS, SCSS, Tailwind, JSON, Swift, Android या Figma में एक्सपोर्ट करें।
कलर पैलेट जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
कलर पैलेट जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर कलर पैलेट जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
यह कलर पैलेट जनरेटर वेबसाइट, ऐप, ब्रांड और इलस्ट्रेशन के लिए मेल खाते रंगों की स्कीम बनाता है। एक बेस कलर और हार्मनी नियम से शुरू करें, या कोई फ़ोटो अपलोड करके उसके मुख्य रंग निकालें।
हर रंग के साथ उसके शेड, HEX, RGB और HSL वैल्यू और कंट्रास्ट जाँच मिलती है, और पूरा पैलेट सीधे आपके कोड या डिज़ाइन टूल में एक्सपोर्ट होता है।
पैलेट कैसे बनाएँ
- एक बेस कलर चुनें, या पैलेट निकालने के लिए कोई इमेज अपलोड करें।
- हार्मनी नियम चुनें (नीचे देखें) या किसी प्रीसेट से शुरू करें।
- रंग बदलें, फिर किसी भी रंग या शेड पर क्लिक करके उसकी वैल्यू कॉपी करें।
- टेक्स्ट के लिए रंग इस्तेमाल करने से पहले WCAG कंट्रास्ट के नतीजे देखें।
- पैलेट को अपनी ज़रूरत के फ़ॉर्मेट में एक्सपोर्ट करें।
कलर हार्मनी के नियम
- कॉम्प्लिमेंटरी: कलर व्हील पर आमने सामने के दो रंग, तेज़ कंट्रास्ट के लिए।
- एनालॉगस: व्हील पर पास पास के रंग, शांत और प्राकृतिक।
- ट्रायडिक: बराबर दूरी वाले तीन रंग, जीवंत लेकिन संतुलित।
- टेट्राडिक और डबल स्प्लिट: समृद्ध स्कीम के लिए चार रंग; किसी एक को प्रमुख रखें।
- स्प्लिट कॉम्प्लिमेंटरी: एक बेस कलर और उसके विपरीत रंग के दो पड़ोसी, कॉम्प्लिमेंटरी से नरम।
- मोनोक्रोमैटिक: एक ही रंग के हल्के और गहरे रूप, सुरुचिपूर्ण और सुरक्षित।
- कस्टम: हर रंग खुद चुनें।
एक्सपोर्ट फ़ॉर्मेट
पैलेट को CSS कस्टम प्रॉपर्टीज़, SCSS वेरिएबल, Tailwind कलर कॉन्फ़िग, JSON, Swift (iOS), Android XML कलर या Figma के लिए तैयार सूची के रूप में कॉपी या डाउनलोड करें।
ग्रेडिएंट बिल्डर आपके रंगों से लीनियर, रेडियल या कोनिक ग्रेडिएंट बनाता है और CSS कॉपी करता है।
अच्छे पैलेट के लिए सुझाव
- 60/30/10 नियम अपनाएँ: ज़्यादातर जगह के लिए एक प्रमुख रंग, एक सहायक रंग, और बटन व हाइलाइट के लिए एक एक्सेंट रंग।
- टेक्स्ट कंट्रास्ट जाँचें। WCAG AA सामान्य टेक्स्ट के लिए कम से कम 4.5:1 माँगता है, AAA के लिए 7:1।
- न्यूट्रल रंग जोड़ें। ज़्यादातर इंटरफ़ेस को ब्रांड रंगों के अलावा ग्रे स्केल भी चाहिए।
- अगर आपके प्रोडक्ट में डार्क मोड है तो उसमें भी जाँचें; गहरे बैकग्राउंड पर चटक रंग चमकते से लग सकते हैं।
सिर्फ़ ग्रेडिएंट चाहिए? CSS ग्रेडिएंट जनरेटर आज़माएँ। किसी एक रंग जोड़ी को विस्तार से जाँचने के लिए कंट्रास्ट चेकर इस्तेमाल करें।
अक्सर पूछे जाने वाले सवाल
क्या इमेज से कलर पैलेट मिल सकता है?
हाँ। फ़ोटो अपलोड करें और टूल उसके मुख्य रंग एक पैलेट में निकाल देता है, जिसे आप बदल और एक्सपोर्ट कर सकते हैं।
कलर हार्मनी क्या है?
कलर व्हील पर स्थिति के आधार पर ऐसे रंग चुनने का नियम जो साथ में अच्छे लगें, जैसे कॉम्प्लिमेंटरी, एनालॉगस या ट्रायडिक।
क्या पैलेट को Tailwind CSS में एक्सपोर्ट कर सकते हैं?
हाँ। Tailwind एक्सपोर्ट चुनें और कलर कॉन्फ़िग पाएँ जिसे आप अपने Tailwind सेटअप में पेस्ट कर सकते हैं। CSS, SCSS, JSON, Swift, Android और Figma फ़ॉर्मेट भी उपलब्ध हैं।
कैसे पता चले कि किसी रंग पर टेक्स्ट पढ़ने लायक होगा?
पैलेट WCAG कंट्रास्ट जाँच दिखाता है। सामान्य टेक्स्ट के लिए कम से कम 4.5:1 (AA) या ज़्यादा सख्त AAA स्तर के लिए 7:1 का लक्ष्य रखें।
कलर कोड कैसे कॉपी करें?
किसी भी रंग या शेड पर क्लिक करें, उसकी वैल्यू कॉपी हो जाएगी। हर रंग के लिए HEX, RGB और HSL वैल्यू दिखती हैं।
क्या अपने पैलेट से ग्रेडिएंट बना सकते हैं?
हाँ। ग्रेडिएंट बिल्डर आपके रंगों से लीनियर, रेडियल या कोनिक ग्रेडिएंट बनाता है और CSS कॉपी करता है।