NordVPN
SponsoredStrict no-logs VPN with 6,400+ servers in 111 countries. Threat Protection blocks ads, trackers, and malware while you work online.
Get NordVPN →रंग पैलेट जनरेटर (एक बेस से 5 स्कीम)
एक बेस रंग चुनें, रंग-सिद्धांत स्कीम चुनें, और एक समन्वित पैलेट पाएँ। अलग-अलग hex मान कॉपी करने के लिए swatches पर क्लिक करें, या डिज़ाइन टूल और CSS वेरिएबल में उपयोग के लिए सभी एक साथ कॉपी करें।
जनरेट किया गया पैलेट
- #3BDFF6
- #3B82F6
- #513BF6
संबंधित टूल्स
कैसे काम करता है
पाँच रंग सिद्धांत स्कीम
Complementary: रंग चक्र के विपरीत छोर पर दो रंग (180° अलग)। उच्च कंट्रास्ट, जीवंत। accent, call-to-action बटन के लिए उपयोग।
Analogous: चक्र पर तीन आसन्न रंग (30° अलग)। सामंजस्यपूर्ण और सुखद, कम कंट्रास्ट। पृष्ठभूमि और UI सतहों के लिए बढ़िया।
Triadic: समान रूप से दूरी वाले तीन रंग (120° अलग)। जीवंत और संतुलित।
Tetradic (आयत): एक आयत बनाने वाले चार रंग (90° अलग)। समृद्ध पैलेट लेकिन संतुलित करना कठिन।
Monochromatic: एकल hue के टोन, टिंट और शेड। परिष्कृत और एकीकृत।
शुरुआती रंग चुनना
ब्रांड रंग: अधिकांश प्रोजेक्ट मौजूदा लोगो या ब्रांड रंग से शुरू होते हैं। सबसे अच्छे फिट के लिए इसे सभी 5 स्कीम पर बेस के रूप में परीक्षण करें।
प्रेरणा: फोटोग्राफी, कला या प्रकृति से रंग चुनें। जीवंत रंग (उच्च saturation, मध्यम lightness) बेस के रूप में सबसे अच्छे काम करते हैं।
एक्सेसिबिलिटी: सुनिश्चित करें कि आपके अंतिम पैलेट में टेक्स्ट के लिए पर्याप्त कंट्रास्ट है।
पैलेट का उपयोग करना
CSS वेरिएबल: :root वेरिएबल के रूप में पैलेट रंग परिभाषित करें (--color-primary, --color-accent, आदि)।
डिज़ाइन टूल: hex मान Figma, Sketch, या Adobe XD की रंग लाइब्रेरी में पेस्ट करें।
उपयोग सीमित करें: 5 रंगों के साथ भी, वास्तविक डिज़ाइन आमतौर पर 2-3 प्रमुखता से और बाकी संयम से उपयोग करते हैं। 60-30-10 नियम एक उपयोगी शुरुआती संतुलन है।
अक्सर पूछे जाने वाले प्रश्न
›मुझे कौन सी स्कीम उपयोग करनी चाहिए?
Analogous अधिकांश डिज़ाइन के लिए सबसे सुरक्षित विकल्प है। Complementary जोर के लिए अच्छा काम करता है। Monochromatic minimal/परिष्कृत ब्रांड के लिए सबसे अच्छा है।
›क्या मुझे 5 से अधिक रंग मिल सकते हैं?
इस टूल से नहीं। बड़े पैलेट के लिए, analogous आउटपुट उपयोग करें और प्रत्येक के monochromatic शेड बनाएँ।
›क्या एल्गोरिदम perceptually uniform color space उपयोग करता है?
हम HSL गणित का उपयोग करते हैं, जो तेज़ और अनुमानित है।
›क्या मेरा पैलेट accessible होगा?
स्वचालित रूप से नहीं। टेक्स्ट के लिए हमेशा contrast checker से जाँचें।
›क्या मैं अपने पसंदीदा पैलेट सेव कर सकता हूँ?
अभी नहीं — hex कोड अपने डिज़ाइन सिस्टम में कॉपी करें।
›Material Design या Tailwind पैलेट के बारे में क्या?
वे पूर्व-क्यूरेटेड सिस्टम हैं। यहाँ बेस स्कीम बनाएँ, फिर समान Material/Tailwind रंग देखें।
›मेरा पैलेट 'फ्लैट' क्यों दिखता है?
यदि आपका बेस रंग बहुत हल्का या बहुत गहरा है, तो जनरेट किया गया पैलेट सीमित dynamic range होगा।
›क्या डेटा मेरे ब्राउज़र से बाहर जाता है?
नहीं। सभी गणनाएँ स्थानीय रूप से चलती हैं।
अनुशंसित सेवाएं
प्रकटीकरणCloudways
SponsoredManaged cloud hosting for WordPress and web apps on DigitalOcean, Vultr, and AWS. Fast setup, no server headaches.
Try Cloudways →