ग्रेडिएंट पैलेट जनरेटर
एक बेस कलर से या कई रंगों के बीच चिकना कलर स्केल बनाएँ। कोई भी रंग कॉपी करें, ग्रेडिएंट CSS पाएँ, और CSS, Tailwind, SCSS या JSON में एक्सपोर्ट करें।
ग्रेडिएंट पैलेट जनरेटर लोड हो रहा है…
आपकी फ़ाइलें कभी आपके डिवाइस से बाहर नहीं जातीं
ग्रेडिएंट पैलेट जनरेटर का इस्तेमाल कैसे करें
- 1
इस पेज पर ग्रेडिएंट पैलेट जनरेटर खोलें। यह सीधे आपके ब्राउज़र में लोड होता है।
- 2
अपनी फ़ाइल, टेक्स्ट या वैल्यू जोड़ें और सेटिंग बदलें।
- 3
नतीजा कॉपी या डाउनलोड करें। कुछ भी अपलोड या स्टोर नहीं होता।
इस टूल के बारे में
डिज़ाइन सिस्टम को हर रंग के एक से ज़्यादा शेड चाहिए: बैकग्राउंड के लिए हल्के, बटन के लिए मध्यम, और टेक्स्ट व होवर स्टेट के लिए गहरे। यह ग्रेडिएंट पैलेट जनरेटर एक बेस कलर से चिकना कलर स्केल बनाता है, या आपके चुने रंगों के बीच मिले हुए स्टेप बनाता है, और उसे सीधे आपके कोड में एक्सपोर्ट करता है।
कलर स्केल कैसे बनाएँ
- एक बेस कलर चुनें।
- मोड चुनें: एक रंग के हल्के से गहरे शेड के लिए scale, या आपके जोड़े कई रंगों को मिलाने के लिए steps।
- रंग जोड़ें या हटाएँ और स्टेप की संख्या सेट करें।
- पैलेट का नाम रखें, HEX कोड कॉपी करने के लिए किसी भी रंग पर क्लिक करें, और ग्रेडिएंट CSS कॉपी करें।
- पैलेट को CSS वेरिएबल, Tailwind कलर, SCSS वेरिएबल या JSON के रूप में एक्सपोर्ट करें।
डिज़ाइन सिस्टम में स्केल का इस्तेमाल
Tailwind में इस्तेमाल होने वाला एक आम तरीका शेड को 50 (सबसे हल्का) से 900 या 950 (सबसे गहरा) तक नाम देता है:
- 50 से 100: पेज और कार्ड के बैकग्राउंड।
- 200 से 300: बॉर्डर और हल्की फ़िल।
- 500 से 600: मुख्य बटन और लिंक।
- 700 से 900: होवर स्टेट और हल्के बैकग्राउंड पर टेक्स्ट।
सुझाव
- टेक्स्ट के पीछे इस्तेमाल होने वाले हर शेड का कंट्रास्ट चेकर से कंट्रास्ट जाँचें।
- स्टेप बराबर रखें ताकि होवर और एक्टिव स्टेट एक जैसे लगें।
- प्राकृतिक ग्रेडिएंट के लिए पास पास के रंग मिलाएँ; दूर के रंग बीच में ग्रे हो सकते हैं।
- कोड में रंगों के नाम उनकी भूमिका से रखें (primary, accent), ताकि रीब्रांड में सिर्फ़ एक जगह बदलनी पड़े।
अलग अलग रंगों के मेल खाते कॉम्बिनेशन के लिए कलर पैलेट जनरेटर इस्तेमाल करें। एक ग्रेडिएंट बैकग्राउंड डिज़ाइन करने के लिए CSS ग्रेडिएंट जनरेटर आज़माएँ।
अक्सर पूछे जाने वाले सवाल
कलर स्केल क्या है?
किसी रंग के हल्के से गहरे शेड की श्रृंखला, जिसे बैकग्राउंड, बॉर्डर, बटन और टेक्स्ट में एक जैसे तरीके से इस्तेमाल किया जाता है।
क्या Tailwind कलर स्केल एक्सपोर्ट कर सकते हैं?
हाँ। Tailwind एक्सपोर्ट चुनें और कलर एंट्री पाएँ जिसे आप अपने Tailwind कॉन्फ़िग में पेस्ट कर सकते हैं।
scale और steps मोड में क्या फ़र्क है?
Scale एक बेस कलर के हल्के और गहरे शेड बनाता है। Steps आपके चुने कई रंगों को, जितने स्टेप आप तय करें, उतने में मिलाता है।
एक रंग कैसे कॉपी करें?
किसी भी रंग पर क्लिक करें, उसका HEX कोड कॉपी हो जाएगा।
किन फ़ॉर्मेट में एक्सपोर्ट कर सकते हैं?
CSS वेरिएबल, Tailwind कॉन्फ़िग, SCSS वेरिएबल और JSON, साथ में ग्रेडिएंट CSS भी।
क्या यह मुफ़्त है?
हाँ, बिना साइन अप के।