वेबसाइटें और ऐप्स
ब्रांड, बैकग्राउंड और एक्सेंट रंग चुनें, फिर उन्हें सीधे CSS वेरिएबल्स, टेलविंड या एंड्रॉइड थीम में पेस्ट करें।
कलर पैलेट जनरेटर — मेल खाने वाले रंग पैलेट बनाएं और उन्हें कोड के रूप में निर्यात करें।
एक बेस कलर और एक स्कीम चुनें, और 3 से 8 रंगों का संतुलित पैलेट प्राप्त करें। जिन्हें आप पसंद करते हैं उन्हें लॉक करें, देखें कि सफेद और काले टेक्स्ट प्रत्येक पर कितने पठनीय हैं, फिर कोड को CSS वेरिएबल्स, Tailwind, Android colors.xml या Jetpack Compose के रूप में कॉपी करें। सब कुछ आपके ब्राउज़र में चलता है, और सहेजे गए पैलेट आपके डिवाइस पर रहते हैं।
एक पैलेट बनाएँ
आपके ब्राउज़र में चलता है
आपकी रंग-पट्टिका
जिन रंगों को आप पसंद करते हैं उन्हें लॉक करें, फिर बाकी रंग बदलने के लिए Generate दबाएँ। किसी हेक्स कोड पर क्लिक करके उसे कॉपी करें। पैलेट पर क्लिक करें और जेनरेट करने के लिए Space दबाएँ।
कोड के रूप में निर्यात करें
सहेजी गई पैलेट्स
अभी तक कोई सहेजी गई पैलेट नहीं है। इस डिवाइस पर एक पैलेट सहेजने के लिए 'पैलेट सहेजें' दबाएँ।
मार्गदर्शक
रंग पैलेट गाइड: योजनाएँ, कंट्रास्ट, और कोड में निर्यात
जानें कि रंग योजनाएँ कैसे काम करती हैं, टेक्स्ट कंट्रास्ट की जाँच करें, और अपनी पैलेट को एक वास्तविक प्रोजेक्ट में लागू करें।
कलर पैलेट जनरेटर क्या है?
एक रंग पैलेट रंगों का एक छोटा समूह होता है जो एक साथ अच्छी तरह मेल खाता है। डिज़ाइनर इसे रंग चक्र से बनाते हैं: एक शुरुआती रंग चुनें, फिर उससे निश्चित कोणों पर अन्य रंग चुनें ताकि परिणाम यादृच्छिक न होकर संतुलित लगे।
यह जनरेटर आपके लिए यह काम करता है। एक बेस कलर और एक स्कीम चुनें, अपने पसंदीदा रंगों को लॉक करें, और परिणाम को CSS, Tailwind, Android XML या Jetpack Compose कोड के रूप में एक्सपोर्ट करें। प्रत्येक स्वैच अपने RGB और HSL मान भी दिखाता है और यह भी कि उस पर सफेद और काला पाठ कितना पठनीय होगा। हेक्स मान बेस 16 होते हैं: बाइनरी से दशमलव कनवर्टर दिखाता है कि वे सामान्य संख्याओं से कैसे संबंधित हैं।
लोग रंग पैलेट क्यों बनाते हैं
स्लाइडें, पोस्टर और दस्तावेज़
प्रस्तुति, सोशल पोस्ट या प्रिंट डिज़ाइन के लिए बिना अंदाज़ा लगाए रंगों का मेल वाला सेट प्राप्त करें।
चार्ट और डैशबोर्ड
डेटा श्रृंखला के लिए विशिष्ट लेकिन सामंजस्यपूर्ण रंग बनाएँ, और लेबल पठनीय बने रहें इसके लिए कंट्रास्ट की जाँच करें।
रंग योजनाओं की व्याख्या
| योजना | यह कैसे बनाया गया है | महसूस करें और उपयोग करें |
|---|---|---|
| समान | पास के रंग, 30° के अंतर पर | शांत और प्राकृतिक। पृष्ठभूमियों और सौम्य यूआई के लिए उपयुक्त। |
| एकवर्णी | एक रंग, विभिन्न हल्केपन | स्वच्छ और सुसंगत। न्यूनतम डिज़ाइनों के लिए सुरक्षित। |
| पूरक | दो विपरीत रंग, 180° अलग | उच्च कंट्रास्ट। एक मजबूत उच्चारण रंग के लिए अच्छा। |
| विभाजित पूरक | एक रंग और उसके विपरीत के दोनों ओर के दो रंग | पूरक की तुलना में कम तनाव। |
| त्रिआत्मक | तीन रंग, 120° के अंतर पर | जीवंत और संतुलित। एक प्रमुख रंग की आवश्यकता है। |
| चतुर्भुजीय (वर्ग) | चार रंग, 90° के अंतर पर | समृद्ध और विविध। एक मुख्य रंग के साथ सबसे अच्छा काम करता है। |
कलर पैलेट जनरेटर का उपयोग कैसे करें
- कलर बॉक्स से एक बेस रंग चुनें, या हेक्स कोड टाइप करें। एक योजना चुनें और आप कितने रंग चाहते हैं।
- नया यादृच्छिक आधार आज़माने के लिए Generate दबाएँ। जिस भी रंग को आप रखना चाहते हैं, उसके नीचे Lock दबाएँ।
- प्रत्येक स्वॉच पर कंट्रास्ट नोट्स जांचें। जहाँ भी टेक्स्ट किसी रंग पर हो, वहाँ 4.5:1 या उससे अधिक का अनुपात बनाएँ।
- हेक्स कोड पर क्लिक करके उसे कॉपी करें, या 'कोड के रूप में निर्यात करें' खोलें और CSS, Tailwind, Android या Compose चुनें।
- सेव पैलेट दबाएँ इसे इस डिवाइस पर सहेजने के लिए, लिंक कॉपी करें इसे साझा करने के लिए, या छवि के लिए PNG डाउनलोड करें।
रंग कंट्रास्ट और सुलभता
विपरीत अनुपात
1:1 (समान) से 21:1 (काला-सफेद) तक का अनुपात जो दो रंगों की चमक की तुलना करता है।
डब्ल्यूसीएजी एए
सामान्य पाठ के लिए कम से कम 4.5:1 और बड़े पाठ (लगभग 24 px, या 19 px बोल्ड) के लिए 3:1। यह सामान्य कानूनी और व्यावहारिक लक्ष्य है।
डब्ल्यूसीएजी एएए
सामान्य पाठ के लिए कम से कम 7:1 का अनुपात। यह एक सख्त स्तर है जो कम दृष्टि वाले लोगों के लिए सहायक है।
केवल रंग पर भरोसा न करें
लगभग बारह में से एक पुरुष को किसी न किसी प्रकार की रंगदृष्टि की कमी होती है। रंग को लेबल, आइकन या पैटर्न के साथ जोड़ें ताकि अर्थ खो न जाए।
निर्यात प्रारूप कैसा दिखता है
CSS: --color-1: #1f3a5f;
SCSS: $color-1: #1f3a5f;
Tailwind: 'palette-1': '#1f3a5f',
Android: #1F3A5F
कंपोज़: val Palette1 = Color(0xFF1F3A5F)
JSON: ["#1f3a5f", "#ff5733"]
Android Studio में, XML को में पेस्ट करें res/values/colors.xml, या अपनी Compose लाइनों को जोड़ें Color.kt फ़ाइल में। Compose मान में पूर्ण-अपारदर्शिता अल्फा प्रीफ़िक्स FF शामिल है।
कारगर पैलेट्स के लिए टिप्स
- एक प्रमुख रंग, एक या दो सहायक रंग और एक तटस्थ रंग का उपयोग करें। हर रंग की समान मात्रा आमतौर पर व्यस्त दिखती है।
- किसी भी पैलेट को अंतिम रूप देने से पहले हर पृष्ठभूमि रंग पर टेक्स्ट कंट्रास्ट जांचें।
- अपने ब्रांड के रंग को लॉक करें और उसके चारों ओर विकल्पों का पता लगाने के लिए जनरेट करें।
- पैलेट को वास्तविक स्क्रीन पर, उन आकारों में देखें जिनमें यह दिखाई देगा, न कि केवल स्वैच के रूप में।
- डार्क मोड में भी परीक्षण करें: एक रंग जो सफेद पर काम करता है, वह लगभग काले पर काम नहीं कर सकता।
प्रतिबंध और गोपनीयता
गोपनीयता
पैलेट्स आपके ब्राउज़र में उत्पन्न होते हैं। सहेजे गए पैलेट्स आपके डिवाइस के ब्राउज़र की लोकल स्टोरेज में रखे जाते हैं और कभी भी अपलोड नहीं किए जाते।
सीमाएँ
रंगों को sRGB रंग क्षेत्र में दिखाया गया है, और स्क्रीन के अनुसार उनका स्वरूप भिन्न होता है। पैलेट रंग सिद्धांत पर आधारित सुझाव हैं, न कि वास्तविक उपयोगकर्ताओं के साथ परीक्षण का विकल्प। यह उपकरण कंट्रास्ट के अलावा रंग-अंधा मित्रता की जांच नहीं करता।
सामान्य प्रश्न
रंग पैलेट जनरेटर अक्सर पूछे जाने वाले प्रश्न
रंग पैलेट जनरेटर कैसे काम करता है?
एक बेस रंग और एक रंग योजना चुनें, और यह टूल रंग चक्र का उपयोग करके बेस रंग को मेल खाने वाले रंगों के सेट में बदल देता है। नए यादृच्छिक बेस के लिए Generate दबाएँ, या अपने पसंदीदा रंगों को लॉक करें और बाकी रंग उत्पन्न करें।
रंग योजनाओं में क्या अंतर है?
एनालॉग रंग योजना पड़ोसी रंगों का उपयोग करके एक शांत लुक देती है। पूरक रंग योजना विपरीत रंगों के जोड़े का उपयोग करके कंट्रास्ट पैदा करती है। स्प्लिट-कॉम्प्लीमेंटरी और ट्रायडिक रंग योजना समान रूप से फैले तीन रंगों का उपयोग करती हैं, टेट्राडिक चार रंगों का, और मोनोक्रोमैटिक एक ही रंग को रखकर उसकी हल्कापन बदलती है।
जब मैं दूसरों को बदलता हूँ तो मैं एक रंग कैसे बनाए रखूँ?
किसी भी स्वॉच के नीचे प्रेस लॉक करें। जब आप जेनरेट दबाते हैं, बेस बदलते हैं, या स्कीम बदलते हैं, तो लॉक किए गए रंग जस के तस रहते हैं। एडिट बटन से स्वॉच संपादित करने पर भी वह लॉक हो जाता है।
कंट्रास्ट नंबरों का क्या मतलब है?
प्रत्येक रंग के नमूने में उस रंग पर सफेद पाठ और काले पाठ के लिए कंट्रास्ट अनुपात दिखाया गया है। WCAG सामान्य पाठ (AA) के लिए कम से कम 4.5:1, सख्त AAA स्तर के लिए 7:1, और बड़े पाठ के लिए 3:1 का अनुपात निर्धारित करता है।
कौन से निर्यात प्रारूप उपलब्ध हैं?
HEX सूची, CSS चर, SCSS चर, एक JSON ऐरे, एक Tailwind कॉन्फ़िग, एक Android colors.xml फ़ाइल और Jetpack Compose रंग मान, ताकि आप पैलेट को सीधे प्रोजेक्ट में पेस्ट कर सकें।
क्या मैं अपनी पैलेट साझा या सहेज सकता हूँ?
हाँ। लिंक कॉपी करने पर वही रंग फिर से खोलने वाला एक वेब पता बनता है, PNG डाउनलोड करने पर पैलेट की एक छवि सहेजी जाती है, और पैलेट सहेजें इस ब्राउज़र में अधिकतम 12 पैलेट्स को रखता है।
मेरे रंग दूसरी स्क्रीन पर अलग क्यों दिखते हैं?
स्क्रीन की चमक, रंग सटीकता और रंग प्रोफ़ाइल अलग-अलग होती हैं। हेक्स कोड रंग को संख्यात्मक रूप से वर्णित करते हैं, लेकिन यह कैसे दिखता है यह डिस्प्ले पर निर्भर करता है। अपने दर्शकों द्वारा उपयोग किए जाने वाले उपकरणों पर महत्वपूर्ण रंगों की जांच करें।
एक पैलेट में कितने रंग होने चाहिए?
कई डिज़ाइन पाँच रंगों के साथ अच्छी तरह काम करते हैं: एक मुख्य रंग, एक या दो सहायक रंग, एक हल्का पृष्ठभूमि रंग और एक गहरा टेक्स्ट रंग। यह टूल आपको 3 से 8 रंग चुनने की सुविधा देता है।
क्या जनरेटर मुफ्त है, और क्या मेरा डेटा संग्रहीत है?
यह मुफ्त है। पैलेट्स आपके ब्राउज़र में ही उत्पन्न होते हैं। सहेजे गए पैलेट्स आपके डिवाइस के लोकल स्टोरेज में रहते हैं और कभी भी अपलोड नहीं किए जाते।
क्या मैं एक पैलेट से लिंक कर सकता हूँ?
हाँ। पेज के पते में ?colors=1f3a5f-ff5733-00aa88 जोड़ें, जिसमें # चिह्न के बिना हाइफ़न से अलग किए गए 2 से 8 हेक्स कोड हों।
इस उपकरण का उपयोग करने वाले लोग
समीक्षाएँ
समीक्षाएँ लोड हो रही हैं…
आगे बढ़ते रहो
बॉक्स में और उपकरण
होमपेज पर दर्जनों और मुफ्त टूल्स हैं जिन्हें API कुंजी की आवश्यकता नहीं होती।
केस कन्वर्टर
टेक्स्ट को अपरकेस, कैमलकेस, टाइटलकेस, स्नेककेस और अन्य में परिवर्तित करें।
उपकरण खोलेंशब्द गणक
टाइप करते समय शब्दों, अक्षरों, वाक्यों और पढ़ने के समय की गिनती करें।
उपकरण खोलेंश्वेत स्थान हटाने वाला
अतिरिक्त रिक्त स्थान हटाएँ और अव्यवस्थित पंक्ति रिक्ति को साफ़ करें।
उपकरण खोलेंपाठ अंतर परीक्षक
दो पाठों की पंक्ति-दर-पंक्ति तुलना करें ताकि यह देखा जा सके कि क्या बदला है।
उपकरण खोलें