कलर पैलेट जेनरेटर
नयाcomplementary, analogous, triadic और monochromatic पैलेट बनाएँ।
Tint & shade scales (50–900)
WCAG contrast check
Contrast ratio of each color against white and black. AA needs 4.5:1 for normal text, AAA needs 7:1.
| Color | vs White | vs Black | Best text |
|---|
Runs entirely in your browser. Nothing is uploaded.
पांच अलग तरीकों से कलर पैलेट बनाएं
यह कलर पैलेट जेनरेटर कई अलग-अलग टूल्स की जगह लेता है। रैंडम कलर पैलेट के लिए Generate दबाएं, किसी बेस कलर से कलर हार्मनी चुनें, इमेज या फोटो से रंग निकालें, एक हेक्स कोड से पूरी स्कीम बनाएं, या किसी रंग के नाम को पैलेट में बदलें। 3 से 10 रंगों की संख्या सेट करें, जो रंग पसंद हों उन्हें लॉक करें और बाकी को दोबारा जेनरेट करें — कोई अकाउंट नहीं चाहिए और कुछ भी ब्राउज़र से बाहर नहीं जाता।
किसी भी स्वॉच पर क्लिक करके उसका मान कॉपी करें, HEX, RGB और HSL के बीच स्विच करें, और स्वॉच को ड्रैग करके क्रम बदलें। तुरंत नई पैलेट के लिए Space दबाएं — वही वर्कफ़्लो जो Coolors ने लोकप्रिय किया, यहाँ बिना पेवॉल के उपलब्ध है।
इमेज, हेक्स कोड या नाम से रंग निकालें
इमेज से: कोई फोटो ड्रॉप करें और टूल उसे एक छिपे HTML5 कैनवास पर प्रोसेस करता है, मीडियन-कट एल्गोरिदम का उपयोग करके सबसे प्रभावशाली रंग निकालता है — किसी प्रोडक्ट फोटो, ब्रांड फोटो, या मूडबोर्ड से मेल खाने वाली पैलेट बनाने के लिए उपयोगी। इमेज आपके डिवाइस पर ही रहती है और कभी सर्वर पर नहीं जाती। Coolors Pro सब्सक्राइबर्स से इस फीचर के लिए पैसे लेता है; यहाँ यह मुफ्त है।
हेक्स कोड से: ब्रांड का कलर पेस्ट करें और इसे एंकर के रूप में रखें जबकि जेनरेटर इसके आस-पास एनालॉगस, कॉम्प्लीमेंटरी और टिंट/शेड साथी बनाता है। नाम से: कोई भी शब्द टाइप करें और एक डिटर्मिनिस्टिक हैश पैलेट तैयार करता है, जिससे एक ही नाम हमेशा एक ही रंग देता है — AI-आधारित पैलेट जेनरेटर का एक विश्वसनीय ऑफलाइन विकल्प।
असली कलर थ्योरी पर आधारित कलर हार्मनी
हार्मनी मोड कलर व्हील के चारों ओर ह्यू को घुमाकर कलर थ्योरी लागू करता है। कॉम्प्लीमेंटरी रंग तीव्र कंट्रास्ट के लिए 180° दूर होते हैं; एनालॉगस रंग शांत, एकजुट feel के लिए ±30° के अंदर रहते हैं; ट्रायडिक 120° पर तीन ह्यू उपयोग करता है; टेट्रैडिक 90° पर चार; स्प्लिट-कॉम्प्लीमेंटरी 150°/210° पर कंट्रास्ट को नरम करता है; और मोनोक्रोमेटिक एक ह्यू रखता है और पैलेट में लाइटनेस बदलता है।
हर जेनरेट किए गए रंग के साथ 50 से 900 तक की पूरी टिंट और शेड स्केल भी आती है — होवर स्टेट, बॉर्डर रंग, और UI डिज़ाइन सिस्टम में बैकग्राउंड वेरिएंट के लिए जरूरी हल्के और गहरे स्टेप्स।
UtiloKit की तुलना Coolors, Adobe Color और Paletton से
Coolors सबसे लोकप्रिय पैलेट टूल है, जिसमें शानदार लॉक-एंड-रीजेनरेट वर्कफ़्लो और एक बड़ी एक्सप्लोर कम्युनिटी है। Coolors Pro ($4/माह) इमेज एक्सट्रैक्शन, एडवांस्ड एक्सपोर्ट और पैलेट हिस्ट्री को पेवॉल के पीछे रखता है। नेटिव Tailwind एक्सपोर्ट फ्री टियर में नहीं है। Adobe Color WCAG एक्सेसिबिलिटी चेकिंग और कलर हार्मनी विज़ुअलाइज़ेशन अच्छे से करता है, लेकिन पैलेट सेव करने के लिए एक Adobe अकाउंट चाहिए।
Paletton कलर थ्योरी के लिए मजबूत है लेकिन केवल चार हार्मनी टाइप दिखाता है और इमेज एक्सट्रैक्शन शामिल नहीं है। UtiloKit तीनों की मुख्य खूबियाँ जोड़ता है — Coolors-स्टाइल लॉकिंग, Adobe Color का WCAG पैनल, इमेज एक्सट्रैक्शन, और Tailwind/SCSS एक्सपोर्ट — बिना किसी अकाउंट, पेवॉल या टूल पर विज्ञापन के।
पसंदीदा लॉक करें और जेनरेट करते रहें
अच्छी पैलेट एक बार में नहीं, बार-बार की कोशिश से बनती है। किसी स्वॉच को लॉक करें और वह वहीं रहता है। जब आप Generate दबाते हैं या Space दबाते हैं, तो सिर्फ अनलॉक स्वॉच बदलते हैं। पसंद का डोमिनेंट रंग रखें, एक्सेंट बदलें और तब तक करते रहें जब तक पूरी पैलेट सही न लगे — फिर सीधे एक्सपोर्ट पर जाएं।
आप एक साथ कई रंग लॉक कर सकते हैं। अपने ब्रांड का प्राथमिक रंग और एक न्यूट्रल बैकग्राउंड लॉक करें, फिर टूल को एक्सेंट सुझाने दें। जब अच्छे एक्सेंट मिल जाएं तो उन्हें लॉक करें और सपोर्टिंग टोन रीजेनरेट करें। यही तरीका है जो डिज़ाइनर मैन्युअली करते हैं, बस यहाँ बहुत तेज़।
CSS, Tailwind, SCSS, JSON, PNG और शेयरेबल लिंक में एक्सपोर्ट करें
जब पैलेट तैयार हो जाए, जो फॉर्मेट आपके प्रोजेक्ट को चाहिए उसमें एक्सपोर्ट करें। CSS कस्टम प्रॉपर्टी का एक :root ब्लॉक देता है। Tailwind tailwind.config.js के लिए एक theme.extend.colors ऑब्जेक्ट देता है। SCSS Sass के साथ काम करने वाले $variable डिक्लेरेशन देता है। JSON हर रंग को HEX, RGB और HSL में JavaScript या डिज़ाइन टोकन पाइपलाइन के लिए लिस्ट करता है। ब्रांड डॉक्यूमेंट या प्रेजेंटेशन के लिए PNG स्वॉच शीट डाउनलोड करें। एक शेयरेबल लिंक कॉपी करें जो URL में पैलेट एन्कोड करता है ताकि टीममेट को वही दिखे जो आप देख रहे हैं।
बिल्ट-इन WCAG कंट्रास्ट चेकिंग
जब तक टेक्स्ट पठनीय न हो, पैलेट पूरी नहीं होती। कंट्रास्ट पैनल हर रंग का WCAG कंट्रास्ट रेशियो सफेद और काले टेक्स्ट के विरुद्ध दिखाता है, AA और AAA पास/फेल बैज के साथ। WCAG 2.1 AA नॉर्मल टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट के लिए 3:1 आवश्यक है। AAA नॉर्मल टेक्स्ट के लिए 7:1 चाहिए। अधिकांश पैलेट टूल इस स्टेप को छोड़ देते हैं या इसे प्रीमियम टियर के पीछे रखते हैं — यहाँ यह बिल्ट-इन है और रियल टाइम में चलता है।
कोई साइनअप नहीं, कोई अपलोड नहीं, कुछ भी ब्राउज़र से बाहर नहीं जाता। हर पैलेट ऑपरेशन — रैंडम जेनरेशन, इमेज एक्सट्रैक्शन, हार्मनी कैलकुलेशन, कंट्रास्ट चेकिंग और एक्सपोर्ट — लोकल JavaScript में चलता है। वेब डिज़ाइन, ब्रांड आइडेंटिटी, इलस्ट्रेशन, स्लाइड डेक्स और शादी की पैलेट के लिए इस मुफ्त कलर पैलेट जेनरेटर को बुकमार्क करें।
Frequently asked questions
सबसे अच्छा मुफ्त कलर पैलेट जेनरेटर कौन सा है?
सबसे अच्छा जेनरेटर वह है जो बिना अकाउंट, सब्सक्रिप्शन या सर्वर प्रोसेसिंग के सब कुछ करे। यह टूल पांच तरीकों से पैलेट बनाता है — रैंडम, कलर-व्हील हार्मनी, इमेज से, हेक्स कोड से, और रंग के नाम से — रंग लॉक करने और बाकी रीजेनरेट करने की सुविधा देता है, WCAG कंट्रास्ट रेशियो चेक करता है, और CSS, Tailwind, SCSS, JSON और PNG में एक्सपोर्ट करता है। Coolors में अच्छा लॉकिंग वर्कफ़्लो है लेकिन इमेज एक्सट्रैक्शन और एडवांस्ड एक्सपोर्ट के लिए Pro अकाउंट ($4/माह) चाहिए। UtiloKit दोनों जोड़ता है, पूरी तरह ऑफलाइन चलता है और कोई अकाउंट नहीं चाहिए।
कलर पैलेट कैसे बनाएं?
शुरुआत चुनें — इमेज ड्रॉप करें, हेक्स कोड टाइप करें, रंग का नाम डालें, हार्मनी टाइप चुनें, या Generate दबाएं (या Space) रैंडम सेट के लिए। पैलेट साइज़ 3–10 रंगों पर सेट करें, जो स्वॉच रखने हों उन्हें लॉक करें और बाकी रीजेनरेट करें। किसी भी स्वॉच पर क्लिक करके HEX, RGB या HSL में मान कॉपी करें, फिर पूरे सेट को CSS, Tailwind या PNG स्वॉच शीट में एक्सपोर्ट करें।
इमेज से कलर पैलेट कैसे बनाएं?
'Image' मोड पर स्विच करें और एक फोटो ड्रॉप करें (या ब्राउज़ करके चुनें)। टूल इमेज को एक छिपे HTML5 कैनवास पर ड्रॉ करता है, पिक्सेल डेटा सैंपल करता है और सबसे प्रभावशाली और दृश्यात्मक रूप से अलग रंग निकालने के लिए मीडियन-कट क्वांटाइज़ेशन एल्गोरिदम चलाता है। सब कुछ Canvas API के साथ लोकल होता है — फोटो कभी सर्वर से नहीं छूती। Coolors इमेज एक्सट्रैक्शन के लिए Pro सब्सक्रिप्शन चाहता है; यहाँ यह मुफ्त है।
कॉम्प्लीमेंटरी, एनालॉगस और ट्रायडिक रंगों में क्या फर्क है?
ये कलर व्हील पर स्थिति के आधार पर रिश्ते हैं, ह्यू के डिग्री में मापे जाते हैं। कॉम्प्लीमेंटरी रंग अधिकतम कंट्रास्ट के लिए 180° दूर होते हैं — नीला और नारंगी, लाल और हरा। एनालॉगस रंग शांत, एकजुट look के लिए ±30° के भीतर पड़ोसी होते हैं। ट्रायडिक रंग संतुलित, जीवंत स्कीम के लिए 120° पर समान दूरी पर तीन ह्यू हैं।
पैलेट में कितने रंग होने चाहिए?
अधिकांश व्यावहारिक पैलेट 3 से 5 रंग उपयोग करती हैं: एक डोमिनेंट रंग, एक-दो सपोर्टिंग रंग, और एक एक्सेंट। 60-30-10 नियम सुझाता है: 60% डोमिनेंट, 30% सेकेंडरी, और 10% एक्सेंट। UI डिज़ाइन के लिए, 5 बेस रंग जेनरेट करें और होवर स्टेट, बॉर्डर और बैकग्राउंड के लिए प्रति-रंग टिंट और शेड स्केल (50–900 स्टेप) उपयोग करें।
CSS, Tailwind या SCSS में पैलेट कैसे एक्सपोर्ट करें?
पैलेट जेनरेट करने के बाद Export बटन उपयोग करें। 'CSS' एक :root ब्लॉक कस्टम प्रॉपर्टी कॉपी करता है। 'Tailwind' theme.extend.colors ऑब्जेक्ट कॉपी करता है tailwind.config.js के लिए। 'SCSS' $color-n वेरिएबल डिक्लेरेशन कॉपी करता है। 'JSON' हर रंग को HEX, RGB और HSL के साथ ऑब्जेक्ट के रूप में एक्सपोर्ट करता है।
क्या यह iPhone और Android पर काम करता है?
हाँ — यह पूरी तरह रिस्पॉन्सिव है और iPhone Safari, Android Chrome और सभी आधुनिक मोबाइल ब्राउज़र पर काम करता है। कलर स्वॉच, लॉक मैकेनिक और एक्सपोर्ट बटन बड़े टच टार्गेट के साथ टच-फ्रेंडली हैं। मोबाइल पर कैमरा रोल से इमेज एक्सट्रैक्शन फाइल पिकर के जरिए काम करता है।
Related tools
सभी टूल्स देखें
नया CSS Grid प्लेग्राउंड
लाइव प्रीव्यू और CSS के साथ grid columns, gap और alignment एडजस्ट करें।
नया Glassmorphism जेनरेटर
frosted-glass कार्ड डिज़ाइन करें और CSS कॉपी करें — लाइव प्रीव्यू के साथ।
नया CSS Text-Shadow जेनरेटर
लाइव प्रीव्यू के साथ CSS text shadow ट्यून करें और कोड कॉपी करें।
नया कलर मिक्सर
दो रंगों को किसी भी अनुपात में मिलाएँ और परिणाम या कोई भी चरण कॉपी करें।
नया इमेज कलर पिकर
इमेज से कोई भी रंग चुनें और उसका प्रमुख पैलेट HEX, RGB और HSL में निकालें।
नया Pixel Art Maker
Draw pixel art on a customizable grid, pick colors, and export as PNG — in your browser.