Color Blender: रंग मिलाएँ और पैलेट बनाएँ

Color Blender क्या है?

Color Blender एक मुफ़्त ऑनलाइन टूल है जो दो रंगों को मिलाता है और उनके बीच सहज मध्यवर्ती शेड्स की एक श्रृंखला बनाता है। आप एक प्रारंभिक रंग और एक अंतिम रंग चुनते हैं, वांछित चरणों की संख्या (1 से 30 तक) तय करते हैं, और टूल तुरंत एक पूरा ट्रांज़िशन पैलेट तैयार करता है। यह ग्रेडिएंट, डेटा विज़ुअलाइज़ेशन स्केल या ब्रांड पैलेट के लिए मध्यवर्ती स्टॉप्स की मैन्युअल गणना की सामान्य डिज़ाइन समस्या को हल करता है — बिना Figma, Illustrator या किसी इंस्टॉल्ड सॉफ़्टवेयर की ज़रूरत के। सभी गणनाएँ आपके ब्राउज़र में होती हैं, कोई डेटा सर्वर को नहीं भेजा जाता।

मुख्य विशेषताएँ

• दो रंग मिलाएँ — टेक्स्ट फ़ील्ड या नेटिव कलर पिकर के माध्यम से Hex वैल्यू स्वीकार करता है; दोनों इनपुट सिंक में अपडेट होते हैं।
• 1–30 चरण समायोज्य — एक स्लाइडर पैलेट में रंगों की संख्या नियंत्रित करता है, जिसमें दोनों अंतिम बिंदु शामिल हैं। 2 चरणों पर आपको केवल मूल जोड़ी मिलती है; 30 पर एक बारीक श्रेणीबद्ध ट्रांज़िशन मिलता है।
• रियल-टाइम पैलेट प्रीव्यू — एक लाइव ग्रेडिएंट बार और क्लिक करने योग्य स्वैच की ग्रिड तुरंत अपडेट होती है जब आप स्लाइडर चलाते हैं या कोई रंग बदलते हैं।
• अलग-अलग या सभी रंग कॉपी करें — किसी भी स्वैच पर क्लिक करने से उसकी Hex वैल्यू क्लिपबोर्ड में कॉपी हो जाती है। "सब कॉपी करें" बटन एक बार में पूरी कॉमा-विभाजित Hex कोड की सूची कॉपी करता है।
• RGB और HSL यूटिलिटीज़ के साथ HEX आउटपुट — प्रत्येक स्वैच लेबल Hex वैल्यू दिखाता है; सोर्स कोड साझा color-utils लाइब्रेरी से hexToRgb, rgbToHex और generateBlendedPalette का उपयोग करता है।
• इनपुट के लिए विज़ुअल कलर पिकर — प्रत्येक टेक्स्ट फ़ील्ड के बगल में एक नेटिव <input type="color"> है ताकि आप रंग विज़ुअली चुन सकें या सीधे मान टाइप कर सकें।
• पैलेट को JSON के रूप में निर्यात करें — color-blend-palette.json फ़ाइल डाउनलोड करता है जिसमें color1, color2, steps और पूरा palette ऐरे होता है।
• CSS वेरिएबल्स के रूप में निर्यात (Premium) — PremiumExportButton नामित कस्टम प्रॉपर्टीज़ के साथ color-blend-palette.css फ़ाइल बनाता है।

Color Blender का उपयोग कैसे करें

चरण 1: अपने दो बेस रंग सेट करें

जल्द आ रहा है: Color Blender टूल खोलें। आपको "Color 1" और "Color 2" लेबल वाले दो रंग इनपुट दिखेंगे। प्रत्येक इनपुट में एक कलर पिकर (बाईं ओर का वर्गाकार स्वैच) और एक Hex टेक्स्ट फ़ील्ड होता है।

Color 1 के लिए कलर पिकर पर क्लिक करें अपने ब्राउज़र का नेटिव रंग चुनने वाला खोलने के लिए, या सीधे Hex वैल्यू टाइप करें — उदाहरण के लिए एक ज्वलंत लाल के लिए #E63946। Color 2 के लिए भी यही करें: स्टील ब्लू के लिए #457B9D आज़माएँ। प्रत्येक इनपुट के नीचे एक प्रीव्यू आयत चयनित रंग को उसके Hex कोड के साथ दिखाता है जो विपरीत टेक्स्ट रंग में ओवरलेड होता है (टूल स्वचालित रूप से पढ़ने की क्षमता के लिए काला या सफ़ेद टेक्स्ट चुनता है)।

दोनों इनपुट को तुरंत उलटने के लिए रंग स्वैप करें बटन का उपयोग करें, या यादृच्छिक रूप से दो नए रंग चुनने के लिए रैंडमाइज़ पर क्लिक करें।

चरण 2: ब्लेंड चरणों की संख्या समायोजित करें

रंग इनपुट के नीचे एक "ब्लेंड स्टेप्स" स्लाइडर है। न्यूनतम ट्रांज़िशन के लिए इसे 1 की ओर बाईं तरफ खींचें, या बारीक पैलेट के लिए 30 की ओर दाईं तरफ। लेबल वर्तमान चरण संख्या दिखाता है और स्लाइडर के नीचे की लाइन पैलेट में दिखाई देने वाले रंगों की कुल संख्या बताती है।

मानक UI ग्रेडिएंट के लिए आप 5–7 चरण चाहेंगे। डेटा विज़ुअलाइज़ेशन कलर स्केल के लिए, 10–12 चरण स्पष्ट रूप से श्रेणियों को अलग करने के लिए पर्याप्त रेंज प्रदान करते हैं।

चरण 3: मिश्रित पैलेट की समीक्षा करें

"ब्लेंडेड पैलेट" कार्ड स्लाइडर के नीचे दिखाई देता है। सबसे ऊपर एक निरंतर ग्रेडिएंट बार है जो दिखाता है कि रंग बाएँ से दाएँ कैसे ट्रांज़िशन करते हैं। उसके नीचे वर्गाकार स्वैच की ग्रिड — प्रत्येक 64×64 पिक्सेल — हर चरण प्रदर्शित करती है।

किसी भी स्वैच पर होवर करें उसकी Hex वैल्यू एक छोटे ओवरले में देखने के लिए। क्लिपबोर्ड में वैल्यू कॉपी करने के लिए स्वैच पर क्लिक करें। एक टोस्ट नोटिफिकेशन कॉपी की पुष्टि करती है।

स्वैच के नीचे, एक लिस्ट व्यू प्रत्येक रंग का Hex कोड एक छोटे प्रीव्यू वर्ग और एक अलग कॉपी बटन के साथ दिखाता है।

चरण 4: अपना पैलेट निर्यात करें

तीन निर्यात विकल्पों में से एक का उपयोग करें:

• सब कॉपी करें — पूरा पैलेट कॉमा-विभाजित स्ट्रिंग के रूप में कॉपी करता है (जैसे #E63946, #C25167, #9F6388, ...) जिसे कहीं भी पेस्ट किया जा सकता है।
• JSON निर्यात करें — संरचना के साथ color-blend-palette.json डाउनलोड करता है: { "color1": "#E63946", "color2": "#457B9D", "steps": 7, "palette": [...] }।
• CSS (Premium) — --blend-0 से --blend-N नामित CSS कस्टम प्रॉपर्टीज़ के साथ color-blend-palette.css डाउनलोड करता है।

व्यावहारिक उदाहरण

वेबसाइट हेडर के लिए ब्रांड ग्रेडिएंट

एक स्टार्टअप लैंडिंग पेज बना रहे डिज़ाइनर को अपने प्राइमरी ब्रांड रंग #6C3FF5 (वायलेट) से सेकेंडरी एक्सेंट #00C2CB (टील) तक ग्रेडिएंट चाहिए। 8 चरणों से यह मिलता है: #6C3FF5, #5C53F2, #4C66EF, #3C7AEC, #2C8DE9, #1CA0E6, #0CB4E3, #00C2CB। यह मध्यवर्ती सेट सम रिक्ति वाले CSS ग्रेडिएंट स्टॉप्स से सीधे मैप होता है, जो अचानक छलाँग नहीं होने देता।

डेटा विज़ुअलाइज़ेशन के लिए रंग स्केल

एक कोरोप्लेथ मैप बना रहे डेवलपर को जनसंख्या घनत्व दर्शाने के लिए सफ़ेद #FFFFFF से गहरे हरे #1A6B3A तक स्केल चाहिए। 10 चरणों से पैलेट दस अलग-अलग दिखने वाले शेड्स देता है। निर्यातित JSON को डोमेन कलर ऐरे के रूप में सीधे D3.js या Chart.js कॉन्फ़िगरेशन में आयात किया जा सकता है।

एक्सेसिबिलिटी कंट्रास्ट वेरिफ़िकेशन

एक UI टीम Color Blender का उपयोग यह पता लगाने के लिए करती है कि दो ब्रांड रंगों के बीच कौन से मध्यवर्ती शेड्स सफ़ेद टेक्स्ट के खिलाफ WCAG AA कंट्रास्ट बनाए रखते हैं। वे 12 चरणों में #003566 (नेवी) को #FFC300 (एम्बर) में मिलाते हैं, फिर सुरक्षित मूल्यों की सीमा पहचानने के लिए प्रत्येक Hex को Contrast Checker में पेस्ट करते हैं।

टिप्स और सर्वोत्तम अभ्यास

प्रेरणा के लिए रैंडमाइज़ बटन का उपयोग करें। जब आप किसी पैलेट दिशा पर फंसे हों, तो Randomize पर क्लिक करने से दो पूरी तरह यादृच्छिक Hex रंग बनते हैं। मिश्रित परिणाम अक्सर अप्रत्याशित संयोजन प्रकट करता है जो रखने योग्य होते हैं।

स्वैप बटन दिशात्मकता सत्यापित करने में मदद करता है। चूँकि ग्रेडिएंट Color 1 से Color 2 तक बाएँ से दाएँ पढ़ा जाता है, स्वैप करने से आप जल्दी देख सकते हैं कि विपरीत दिशा में ट्रांज़िशन बेहतर दिखता है या नहीं।

पसंदीदा संयोजन प्रीसेट के रूप में सहेजें। PresetsPanel (सपोर्टर्स के लिए उपलब्ध) color1, color2 और steps मानों को एक साथ स्टोर करता है ताकि आप मान दोबारा दर्ज किए बिना सटीक पैलेट कॉन्फ़िगरेशन याद कर सकें।

हिस्ट्री से पिछले ब्लेंड पुनर्स्थापित करें। HistoryPanel हर "सब कॉपी करें" क्रिया रिकॉर्ड करता है। जब आप हिस्ट्री एंट्री पुनर्स्थापित करते हैं, तो टूल कॉपी की गई Hex सूची को पुनः पार्स करता है, Color 1 को पहले मान पर, Color 2 को अंतिम पर और चरणों को कुल गिनती पर सेट करता है।

उच्च चरण संख्या से शुरू करें और घटाएँ। यदि आप अनिश्चित हैं कि आपको कितने चरण चाहिए, पूरी ग्रैन्युलैरिटी देखने के लिए 20 या उससे अधिक से शुरू करें, फिर तब तक घटाएँ जब तक ट्रांज़िशन अभी भी सहज दिखे। अधिकांश ग्रेडिएंट 5 से 10 चरणों के बीच अच्छे दिखते हैं।

सामान्य समस्याएँ और समस्या निवारण

मैन्युअल रूप से दर्ज की गई अमान्य Hex वैल्यू। यदि आप Hex टेक्स्ट फ़ील्ड में कोई अमान्य स्ट्रिंग टाइप करते हैं (जैसे #ZZZZZZ), तो hexToRgb null लौटाता है और पैलेट एक खाली ऐरे के रूप में रेंडर होता है। स्वैच एरिया खाली रहेगा। सुधार: सुनिश्चित करें कि Hex फ़ील्ड में # के बाद बिल्कुल 6 वैध हेक्साडेसिमल वर्ण हों।

पैलेट केवल एक या दो रंग दिखाता है। यह तब होता है जब स्लाइडर अपने न्यूनतम मान 1 या 2 पर हो। मध्यवर्ती चरण जोड़ने के लिए इसे दाईं ओर खींचें।

सब कॉपी करें कोई आउटपुट नहीं देता। यदि पैलेट खाली है (किसी अमान्य रंग के कारण), क्लिपबोर्ड राइट प्रयास फिर भी शुरू होता है लेकिन एक खाली स्ट्रिंग भेजता है। पहले रंग इनपुट ठीक करें और कॉपी करने से पहले पुष्टि करें कि ग्रेडिएंट बार दिख रहा है।

JSON निर्यात डाउनलोड ट्रिगर नहीं होता। कुछ ब्राउज़र कुछ संदर्भों से प्रोग्रामेटिक लिंक क्लिक ब्लॉक करते हैं। यदि डाउनलोड शुरू नहीं होता, तो अपने ब्राउज़र सेटिंग्स में जाँचें कि साइट के लिए पॉप-अप और डाउनलोड की अनुमति है।

CSS निर्यात के लिए Premium की आवश्यकता है। CSS वेरिएबल्स निर्यात PremiumExportButton कॉम्पोनेंट के पीछे गेट किया गया है और इसके लिए एक सक्रिय सपोर्टर एक्टिवेशन की आवश्यकता है। JSON निर्यात मुफ़्त है और सभी उपयोगकर्ताओं के लिए उपलब्ध है।

गोपनीयता और सुरक्षा

Color Blender पूरी तरह आपके ब्राउज़र में चलता है। कोई रंग डेटा, पैलेट कॉन्फ़िगरेशन, या निर्यातित फ़ाइलें किसी सर्वर को प्रसारित नहीं की जाती हैं। टूल केवल Web Clipboard API और Blob/URL APIs का उपयोग करता है — दोनों स्थानीय ब्राउज़र ऑपरेशन हैं। प्रीसेट और हिस्ट्री डेटा आपके ब्राउज़र के IndexedDB डेटाबेस में संग्रहीत होता है और कभी आपके डिवाइस से नहीं निकलता। पेज के शुरुआती लोड के बाद टूल ऑफ़लाइन काम करता है।

अक्सर पूछे जाने वाले प्रश्न

क्या Color Blender मुफ़्त है?

हाँ, Color Blender पूरी तरह मुफ़्त है बिना किसी खाते की आवश्यकता के। मुख्य सुविधाएँ — रंग मिलाना, चरण समायोजित करना, Hex वैल्यू कॉपी करना और JSON निर्यात करना — सभी आगंतुकों के लिए उपलब्ध हैं। CSS वेरिएबल्स निर्यात एक Premium सपोर्टर फ़ीचर है जो Ko-fi पर $5 दान के साथ 30 दिनों की एक्सेस प्रदान करता है।

क्या Color Blender ऑफ़लाइन काम करता है?

हाँ। एक बार पेज लोड होने के बाद, Color Blender बिना इंटरनेट कनेक्शन के काम करता है। सभी रंग गणनाएँ आपके ब्राउज़र में JavaScript में चलती हैं, और सामान्य उपयोग के दौरान कोई नेटवर्क अनुरोध नहीं किए जाते। यह इसे प्रतिबंधित इंटरनेट एक्सेस वाले वातावरण में उपयोग के लिए सुरक्षित बनाता है।

क्या Color Blender के साथ मेरा डेटा सुरक्षित है?

पूरी तरह सुरक्षित। कोई भी रंग मान, पैलेट डेटा, या निर्यात फ़ाइलें कभी सर्वर को नहीं भेजी जाती हैं। सभी प्रसंस्करण आपके ब्राउज़र में स्थानीय रूप से Web Clipboard API का उपयोग करके कॉपी करने और फ़ाइल डाउनलोड के लिए Blob API का उपयोग करके होता है। आपकी रंग पसंद पूरी तरह आपके डिवाइस पर रहती है।

ब्लेंडिंग एल्गोरिदम कैसे काम करता है?

टूल लीनियर RGB इंटरपोलेशन का उपयोग करता है। यह दोनों Hex रंगों को उनके RGB घटकों में बदलता है, फिर RGB स्पेस में उनके बीच की सीधी रेखा पर समान रूप से स्थित मध्यवर्ती मानों की गणना करता है। जबकि OKLab जैसे अवधारणात्मक रंग स्पेस कुछ रंग जोड़ियों के लिए अधिक समान दिखने वाले ग्रेडिएंट उत्पन्न कर सकते हैं, लीनियर RGB इंटरपोलेशन गणनात्मक रूप से सरल है और पूर्वानुमानित, सममित परिणाम देता है।

क्या चरण संख्या में केवल मध्यवर्ती शामिल हैं या अंतिम बिंदु भी?

चरण संख्या में दोनों अंतिम बिंदु शामिल हैं। 5 चरणों की सेटिंग बिल्कुल 5 रंग उत्पन्न करती है: प्रारंभिक रंग, 3 मध्यवर्ती शेड्स, और अंतिम रंग। 2 की सेटिंग बिना किसी ब्लेंडिंग के केवल दो मूल रंग देती है। स्लाइडर 1 से 30 तक होता है।

क्या मैं Hex के अलावा अन्य रंग दर्ज कर सकता हूँ?

टेक्स्ट इनपुट फ़ील्ड केवल Hex वैल्यू स्वीकार करती हैं। यदि आप RGB या HSL मानों से रंग मिलाना चाहते हैं, तो पहले Color Converter का उपयोग करें Hex समतुल्य प्राप्त करने के लिए, फिर इसे Color Blender में पेस्ट करें।

निर्यातित JSON का प्रारूप क्या है?

JSON फ़ाइल में चार कुंजियाँ हैं: color1 (प्रारंभ Hex), color2 (अंत Hex), steps (स्लाइडर मान), और palette (प्रारंभ से अंत तक Hex स्ट्रिंग्स का ऐरे)। #E63946 से #457B9D तक 5-चरण ब्लेंड के लिए, palette ऐरे में बिल्कुल 5 Hex मान होते हैं।

क्या मैं दो से अधिक रंग मिला सकता हूँ?

Color Blender बिल्कुल दो इनपुट रंगों का समर्थन करता है। अधिक एंकर पॉइंट के साथ मल्टी-स्टॉप ग्रेडिएंट बनाने के लिए, प्रत्येक आसन्न रंग जोड़ी को अलग से मिलाएँ और परिणामी पैलेट को संयोजित करें। जल्द आ रहा है: Gradient Generator मूल रूप से कई रंग स्टॉप्स का समर्थन करता है।

CSS में पैलेट का उपयोग कैसे करें?

JSON निर्यात के लिए, palette ऐरे को इटरेट करें और प्रत्येक मान को एक ग्रेडिएंट स्टॉप या CSS कस्टम प्रॉपर्टी असाइन करें। CSS निर्यात (Premium) के लिए, डाउनलोड की गई फ़ाइल में --blend-0 से --blend-N नाम के वेरिएबल होते हैं जिन्हें आप किसी भी स्टाइलशीट में आयात कर सकते हैं।

क्या पैलेट में मूल रंग शामिल हैं?

हाँ। palette ऐरे में पहला रंग हमेशा Color 1 होता है और अंतिम हमेशा Color 2 होता है। उनके बीच के सभी मान गणना की गई इंटरपोलेशन हैं।

संबंधित टूल

• जल्द आ रहा है: Color Mixer — पूरा पैलेट बनाए बिना त्वरित एक-बार मिश्रण के लिए एकल अनुपात स्लाइडर से दो रंग मिलाएँ।
• जल्द आ रहा है: Gradient Generator — सटीक एंगल और पोज़िशन नियंत्रण के साथ मल्टी-स्टॉप CSS ग्रेडिएंट बनाएँ।
• Color Picker — अपनी स्क्रीन पर कहीं से भी या अपलोड की गई छवि से रंग चुनें।
• Color Converter — मिलाने से पहले HEX, RGB, HSL, HSB और CMYK के बीच कन्वर्ट करें।

अभी Color Blender आज़माएँ: जल्द आ रहा है: Glyph Widgets Color Blender