झटपट जवाब
analogous या complementary जैसी हार्मनी चुनें और मेल खाता पैलेट पाने के लिए Generate (या Space बार) दबाएँ; जो रंग पसंद हैं उन्हें लॉक करें और बाकी दोबारा बनाएँ। या “Extract from image” पर जाएँ और फ़ोटो या लोगो अपलोड करके उसके मुख्य रंग पाएँ। हर रंग HEX, RGB, HSL और सफ़ेद व काले टेक्स्ट के साथ अपना कंट्रास्ट दिखाता है, और आप पैलेट को CSS वेरिएबल, Tailwind या JSON के रूप में कॉपी कर सकते हैं।
कलर पैलेट जनरेटर क्या है?
कलर पैलेट जनरेटर (कलर पैलेट जनरेटर) आपको ऐसे रंग चुनने में मदद करता है जो साथ में अच्छे लगें। रंग एक-एक करके चुनने से अक्सर आपस में टकराते रंग या पढ़ने में मुश्किल टेक्स्ट बन जाता है। पैलेट जनरेटर आज़माए हुए रंग-हार्मनी नियम — वही सिद्धांत जो डिज़ाइनर कलर व्हील से सीखते हैं — लगाकर तुरंत 3 से 8 रंगों के संतुलित सेट बनाता है, और जो पसंद हैं उन्हें रखकर बाकी के विकल्प खोजने देता है।
यह मुफ़्त टूल दो तरह से काम करता है। Generate मेल खाते पैलेट बनाता है — random, analogous, complementary, triadic, split complementary या monochromatic — चाहें तो आपके ब्रांड कलर के आसपास। Extract from image किसी फ़ोटो, लोगो या स्क्रीनशॉट का विश्लेषण करके k-means++ क्लस्टरिंग से उसके मुख्य रंग लौटाता है, पूरी तरह आपके ब्राउज़र में। हर रंग अपना HEX, RGB और HSL मान और सफ़ेद व काले टेक्स्ट के साथ कंट्रास्ट अनुपात दिखाता है, ताकि आप डिज़ाइन से पहले पढ़ने की सुविधा जाँच सकें, और पैलेट को CSS वेरिएबल, Tailwind कॉन्फ़िग, JSON या PNG के रूप में एक्सपोर्ट कर सकें।
मुख्य सुविधाएँ
- छह हार्मनी मोड कलर व्हील पर आधारित।
- बेस कलर — अपने ब्रांड कलर के आसपास पैलेट बनाएँ।
- लॉक करें और दोबारा बनाएँ — पसंदीदा रखें, नए विकल्पों के लिए Space दबाएँ।
- इमेज से निकालें — फ़ोटो और लोगो के मुख्य रंग, सबसे आम पहले।
- HEX, RGB और HSL हर स्वैच के लिए।
- WCAG कंट्रास्ट सफ़ेद और काले टेक्स्ट के मुकाबले।
- एक्सपोर्ट — CSS वेरिएबल, HEX सूची, Tailwind, JSON और PNG।
- निजी — इमेज लोकल प्रोसेस होती हैं।
पैलेट कैसे बनाएँ — स्टेप बाय स्टेप
- तरीका चुनें: पैलेट बनाएँ या इमेज से निकालें।
- बनाए गए पैलेट के लिए हार्मनी और रंगों की संख्या चुनें; चाहें तो बेस कलर सेट करें और “Build the palette around my base colour” टिक करें।
- Generate दबाएँ या Space बार, जब तक कुछ पसंद न आए।
- लॉक करें वे रंग जो रखने हैं और बाकी को सुधारने के लिए दोबारा बनाएँ।
- इमेज के लिए फ़ोटो अपलोड करें या खींचकर डालें; पैलेट कुछ ही पल में दिख जाता है।
- स्वैच पर क्लिक करें उसका HEX कॉपी करने के लिए, या एक्सपोर्ट फ़ॉर्मेट चुनकर कोड कॉपी करें।
रंग हार्मनी की व्याख्या
| हार्मनी | यह कैसे बनता है | कैसा लगता है |
|---|---|---|
| Analogous | पास-पास की hue, करीब 25° की दूरी पर | शांत, प्राकृतिक, एकजुट |
| Complementary | आमने-सामने की hue (180°) हल्के और गहरे शेड में | ज़्यादा कंट्रास्ट, ऊर्जावान |
| Triadic | तीन hue 120° की दूरी पर | जीवंत पर संतुलित |
| Split complementary | एक hue और उसके complement के दोनों तरफ़ की दो (150°, 210°) | कम तनाव के साथ कंट्रास्ट |
| Monochromatic | एक hue अलग-अलग लाइटनेस और सैचुरेशन में | सुरुचिपूर्ण, मिनिमल |
| रैंडम सुंदर | नियंत्रित सैचुरेशन और लाइटनेस के साथ अलग-अलग दूरी की hue | ताज़ा प्रेरणा |
इमेज से रंग निकालना
जब आप इमेज अपलोड करते हैं, टूल एक छिपे canvas पर उसकी छोटी की हुई कॉपी (सबसे लंबी तरफ़ 160 पिक्सेल तक) बनाता है, पारदर्शी पिक्सेल अनदेखे करता है, और k-means++ क्लस्टरिंग चलाता है: यह अच्छी तरह फैले शुरुआती रंग चुनता है, हर पिक्सेल को उसके सबसे नज़दीकी रंग से जोड़ता है, हर रंग को अपने समूह के औसत पर ले जाता है और दोहराता है। नतीजे में मिले क्लस्टर केंद्र इमेज के प्रतिनिधि रंग हैं, जो इस हिसाब से क्रमबद्ध होते हैं कि हर एक कितने पिक्सेल ढकता है। इसे साइट को लोगो से मिलाने, प्रोडक्ट फ़ोटो से मेल खाते सोशल पोस्ट बनाने, या किसी लैंडस्केप का मूड पकड़ने के लिए इस्तेमाल करें। क्योंकि क्लस्टरिंग रैंडम से शुरू होती है, करीबी शेड अलग-अलग बार में थोड़े बदल सकते हैं।
कंट्रास्ट और एक्सेसिबिलिटी
सुंदर रंग बेकार हैं अगर उन पर लिखा टेक्स्ट पढ़ा न जा सके। Web Content Accessibility Guidelines (WCAG) 1:1 से 21:1 तक कंट्रास्ट अनुपात तय करती हैं। लेवल AA में सामान्य टेक्स्ट के लिए 4.5:1 और बड़े टेक्स्ट (करीब 24 px, या बोल्ड में 19 px) के लिए 3:1 चाहिए; लेवल AAA में 7:1। हर स्वैच सफ़ेद और काले टेक्स्ट के साथ अपना अनुपात दिखाता है और अपने लेबल के लिए अपने आप ज़्यादा पढ़ने लायक रंग चुनता है।
| रंग | सफ़ेद टेक्स्ट | काला टेक्स्ट |
|---|---|---|
| #1B98E0 (नीला) | 3.17:1 — सिर्फ़ बड़े टेक्स्ट के लिए | 6.61:1 — AA पास |
| #FF9933 (केसरिया) | 2.13:1 — फ़ेल | 9.86:1 — AAA पास |
| #138808 (भारत का हरा) | 4.61:1 — AA पास | 4.55:1 — AA पास |
| #0F2027 (लगभग काला) | 16.72:1 — AAA पास | 1.26:1 — फ़ेल |
वेबसाइट का पैलेट बनाना
- प्राइमरी रंग — बटन, लिंक और हाइलाइट के लिए आपका ब्रांड कलर।
- सेकंडरी / एक्सेंट — कॉल टू एक्शन और बैज के लिए एक विपरीत रंग।
- न्यूट्रल — टेक्स्ट, बॉर्डर और बैकग्राउंड के लिए हल्के और गहरे ग्रे या रंगत वाले न्यूट्रल।
- फ़ीडबैक रंग — सफलता के लिए हरा, एरर के लिए लाल, चेतावनी के लिए एम्बर।
- 60-30-10 नियम — करीब 60% न्यूट्रल, 30% प्राइमरी, 10% एक्सेंट डिज़ाइन को संतुलित रखता है।
hover स्टेट और बैकग्राउंड के लिए हल्के और गहरे शेड पाने के लिए अपने ब्रांड कलर पर monochromatic मोड इस्तेमाल करें, और उन्हें CSS वेरिएबल के रूप में एक्सपोर्ट करें ताकि बाद में रंग बदलने से पूरी साइट अपडेट हो जाए। अपने पैलेट वाले ग्रेडिएंट के लिए हमारा CSS ग्रेडिएंट जनरेटर आज़माएँ।
उदाहरण: भारतीय त्योहार की पोस्ट के लिए पैलेट
मान लें आप Diwali या Independence Day की पोस्ट डिज़ाइन कर रहे हैं और केसरिया को मुख्य रंग बनाना चाहते हैं। बेस कलर #FF9933 सेट करें, “Build the palette around my base colour” टिक करें और Complementary चुनें। टूल केसरिया को पहला स्वैच रखता है और व्हील के दूसरी तरफ़ से हल्के और गहरे शेड के नीले रंग जोड़ता है, जिससे केसरिया उभरकर दिखता है। अब कंट्रास्ट के आँकड़े देखें: केसरिया सफ़ेद टेक्स्ट के साथ सिर्फ़ 2.13:1 पाता है पर काले के साथ 9.86:1, इसलिए केसरिया हिस्सों पर गहरा टेक्स्ट रखें। अगर नतीजा बहुत तेज़ लगे, तो केसरिया के बगल के गर्म पीले और लाल के लिए Analogous पर जाएँ, या केसरिया के हल्के-गहरे शेड के नरम सेट के लिए Monochromatic पर। अपनी दो पसंदीदा लॉक करें, बाकी के लिए कुछ बार Space दबाएँ, फिर CSS वेरिएबल अपने डिज़ाइन में कॉपी करें।
एक्सपोर्ट किए कोड का इस्तेमाल
CSS एक्सपोर्ट :root के अंदर --color-1, --color-2 आदि नाम के वेरिएबल तय करता है। इसे अपनी स्टाइलशीट के ऊपर पेस्ट करें और background: var(--color-1); कहीं भी इस्तेमाल करें। जब तय हो जाए कि हर रंग क्या काम करता है, तब वेरिएबल का नाम --brand, --accent और --surface जैसी सार्थक भूमिकाओं में बदल लें — इससे बाद के बदलाव आसान रहते हैं। Tailwind एक्सपोर्ट एक brand स्केल (100, 200, 300…) बनाता है जिसे theme.extend.colors के नीचे पेस्ट करें, ताकि bg-brand-100 जैसी क्लास काम करें। JSON array डिज़ाइन टोकन या स्क्रिप्ट के लिए ठीक है, और HEX सूची Figma, Canva या ज़्यादातर डिज़ाइन टूल में आराम से पेस्ट हो जाती है।
एक्सपोर्ट फ़ॉर्मेट
- CSS वेरिएबल —
:root { --color-1: #1B98E0; … }, जिन्हेंvar(--color-1)के साथ इस्तेमाल करें। - HEX सूची — डिज़ाइन ऐप के लिए हर लाइन में एक रंग।
- Tailwind —
theme.extend.colorsके लिए एक स्निपेट। - JSON — कोड और डिज़ाइन टोकन के लिए array।
- PNG — कोड के साथ स्वैच की शेयर करने लायक इमेज, मूड बोर्ड और क्लाइंट की मंज़ूरी के लिए काम की।
पैलेट जनरेटर कौन इस्तेमाल करता है?
- वेब और ऐप डिज़ाइनर जो नया प्रोजेक्ट शुरू करते हैं।
- छोटे कारोबारी जो ब्रांड के रंग चुनते हैं।
- सोशल मीडिया क्रिएटर जो पोस्ट और थंबनेल डिज़ाइन करते हैं।
- डेवलपर जिन्हें जल्दी एक जैसी थीम चाहिए।
- स्टूडेंट और शिक्षक जो कलर थ्योरी सीखते-सिखाते हैं।
- इवेंट प्लानर जो निमंत्रण और सजावट मिलाते हैं।
इन आम गलतियों से बचें
- बहुत सारे तेज़ रंग — एक मुख्य रंग चुनें और बाकी कम इस्तेमाल करें।
- कंट्रास्ट अनदेखा करना — हल्के रंगों पर हल्का टेक्स्ट एक्सेसिबिलिटी में फ़ेल होता है।
- सिर्फ़ रंग पर निर्भर रहना मतलब बताने के लिए — रंग-अंध यूज़र के लिए आइकन या लेबल जोड़ें।
- सिर्फ़ एक स्क्रीन से रंग चुनना — रंग फ़ोन पर और प्रिंट में अलग दिखते हैं।
- डार्क मोड भूल जाना — अपना पैलेट गहरे बैकग्राउंड पर भी जाँचें।
समस्या-समाधान
- “No solid colours found” — हो सकता है इमेज ज़्यादातर पारदर्शी हो; बैकग्राउंड वाला वर्शन आज़माएँ।
- निकाले गए रंग फीके लगते हैं — फ़ोटो में अक्सर कई मध्य-टोन होते हैं; रंगों की संख्या बढ़ाएँ।
- Space बार से दोबारा नहीं बनता — पहले टेक्स्ट फ़ील्ड के बाहर क्लिक करें।
संक्षिप्त शब्दावली
- Hue: कलर व्हील पर स्थिति (0–360°)।
- सैचुरेशन: रंग कितना गहरा या फीका (ग्रे जैसा) है।
- लाइटनेस: रंग कितना हल्का या गहरा है।
- HEX कोड: छह अंकों वाला हेक्साडेसिमल रंग मान।
- कंट्रास्ट अनुपात: WCAG द्वारा तय पढ़ने की सुविधा का माप।
- k-means: एक क्लस्टरिंग तरीका जो मिलते-जुलते मानों को समूहित करता है।
यह पैलेट जनरेटर क्यों इस्तेमाल करें?
यह कलर-थ्योरी पैलेट, इमेज से रंग निकालना और एक्सेसिबिलिटी जाँच एक तेज़ टूल में जोड़ता है, CSS, Tailwind और डिज़ाइन ऐप के लिए तैयार एक्सपोर्ट के साथ — मुफ़्त और निजी।
कलर पैलेट जनरेटर — मुख्य तथ्य
| हार्मनी | Random, analogous, complementary, triadic, split complementary, monochromatic |
|---|---|
| इमेज से | k-means++ क्लस्टरिंग से मुख्य रंग, आपके डिवाइस पर |
| हर रंग के लिए | HEX, RGB, HSL, सफ़ेद और काले के मुकाबले कंट्रास्ट |
| कंट्रास्ट नियम | WCAG AA में सामान्य टेक्स्ट के लिए 4.5:1, बड़े टेक्स्ट के लिए 3:1 चाहिए |
| एक्सपोर्ट | CSS वेरिएबल, HEX सूची, Tailwind, JSON, PNG |
| संख्या | 3 से 8 रंग; कोई भी स्वैच लॉक करें |
अक्सर पूछे जाने वाले सवाल
पैलेट जनरेटर रंग कैसे चुनता है?
यह HSL मॉडल में कलर व्हील पर रंग-हार्मनी के नियम इस्तेमाल करता है: analogous रंग एक-दूसरे के बगल में होते हैं, complementary रंग आमने-सामने (180°), triadic रंग 120° की दूरी पर होते हैं और split complementary में complement के दोनों तरफ़ के रंग लिए जाते हैं। Monochromatic पैलेट एक ही hue की लाइटनेस और सैचुरेशन बदलते हैं।
इमेज से रंग कैसे निकालूँ?
“Extract from image” पर जाएँ और JPG, PNG या WebP अपलोड करें। टूल इमेज की एक छोटी कॉपी बनाता है और k-means++ क्लस्टरिंग से मिलते-जुलते पिक्सेल को समूहित करता है, सबसे आम रंग पहले लौटाता है। इमेज आपके डिवाइस से बाहर नहीं जाती।
कंट्रास्ट अनुपात का क्या मतलब है?
यह नापता है कि किसी रंग पर टेक्स्ट कितना पढ़ने लायक है, 1:1 (अदृश्य) से 21:1 (सफ़ेद पर काला) तक। WCAG लेवल AA में सामान्य टेक्स्ट के लिए कम से कम 4.5:1 और बड़े टेक्स्ट के लिए 3:1 चाहिए; AAA में 7:1। हर स्वैच सफ़ेद और काले टेक्स्ट के लिए अनुपात दिखाता है।
क्या #1B98E0 पर सफ़ेद टेक्स्ट पढ़ने लायक है?
#1B98E0 पर सफ़ेद का कंट्रास्ट करीब 3.2:1 है — बड़ी हेडिंग या बड़े टेक्स्ट वाले बटन के लिए ठीक, लेकिन छोटे बॉडी टेक्स्ट के लिए ज़रूरी 4.5:1 से कम। उसी नीले पर काला करीब 6.6:1 तक पहुँचता है।
बाकी बदलते हुए एक रंग को कैसे बनाए रखूँ?
स्वैच पर लॉक आइकन पर क्लिक करें। Generate या Space बार दबाने पर लॉक किए रंग वहीं रहते हैं।
क्या मैं अपने ब्रांड के रंग के आसपास पैलेट बना सकता हूँ?
हाँ। “Base colour” में अपना ब्रांड कलर चुनें, “Build the palette around my base colour” टिक करें और हार्मनी चुनें। आपका सटीक रंग monochromatic को छोड़कर हर हार्मनी में पहले स्वैच के रूप में रहता है; monochromatic उसकी hue के हल्के और गहरे शेड बनाता है।
मैं कौन से फ़ॉर्मेट एक्सपोर्ट कर सकता हूँ?
CSS custom properties (:root वेरिएबल), सादी HEX सूची, Tailwind थीम स्निपेट, JSON array, या HEX कोड के साथ स्वैच की PNG इमेज।
HEX, RGB और HSL में क्या फ़र्क है?
ये एक ही रंग को अलग तरह से बताते हैं: HEX एक छोटा कोड है (#1B98E0), RGB लाल, हरे और नीले की मात्रा बताता है (27, 152, 224), और HSL hue, सैचुरेशन और लाइटनेस बताता है, जिससे शेड बदलना आसान होता है।
निकाले गए रंग हर बार थोड़े क्यों बदलते हैं?
k-means++ रैंडम शुरुआती रंगों से शुरू होता है, इसलिए करीबी शेड अलग-अलग बार में थोड़े अलग निकल सकते हैं। मुख्य रंग वही रहते हैं।
वेबसाइट के पैलेट में कितने रंग होने चाहिए?
आमतौर पर एक या दो मुख्य ब्रांड रंग, एक एक्सेंट, और टेक्स्ट व बैकग्राउंड के लिए कुछ न्यूट्रल। पाँच रंग शुरू करने के लिए आरामदेह संख्या है।
क्या मेरी इमेज अपलोड होती है?
नहीं। इमेज आपके ब्राउज़र में एनालाइज़ होती हैं और कहीं स्टोर या भेजी नहीं जातीं।
क्या कलर पैलेट जनरेटर मुफ़्त है?
हाँ। यह मुफ़्त है, असीमित है और साइन-अप की ज़रूरत नहीं।
ऐसे रंग खोजें जो साथ में अच्छे लगें!
हार्मनी पैलेट और इमेज से रंग — मुफ़्त और निजी।
Prompt Minds के और टूल्स देखें
कलर पैलेट जनरेटर हमारे दूसरे मुफ़्त टूल्स के साथ भी बढ़िया काम करता है। Prompt Minds का हर टूल पूरी तरह आपके ब्राउज़र में चलता है — साइन-अप की ज़रूरत नहीं, कोई अपलोड नहीं, कोई वॉटरमार्क नहीं। सभी मुफ़्त टूल्स देखें।