रंग कनवर्टर: HEX, RGB, HSL, CMYK

Color Converter क्या है?

Color Converter एक मुफ़्त ऑनलाइन टूल है जो किसी भी रंग को पांच सबसे सामान्य कलर फ़ॉर्मेट के बीच तुरंत कन्वर्ट करता है: HEX, RGB, HSL, HSB (HSV) और CMYK। किसी भी समर्थित फ़ॉर्मेट में कलर वैल्यू पेस्ट करें या टाइप करें — टूल स्वचालित रूप से पहचानता है कि आपने क्या दर्ज किया और रियल टाइम में सभी अन्य प्रतिनिधित्व एक साथ दिखाता है। यह Figma के HEX वैल्यू और CSS HSL फ़ंक्शन के बीच स्विच करने की रोज़मर्रा की परेशानी, या स्क्रीन RGB वैल्यू को प्रिंट CMYK प्रतिशत में बदलने की समस्या हल करता है — बिना कैलकुलेटर के मूल्य कॉपी किए। सभी कन्वर्शन ब्राउज़र में स्थानीय रूप से होती है, किसी सर्वर की ज़रूरत नहीं।

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

• HEX, RGB, HSL, HSB और CMYK के बीच कन्वर्ट करें — सभी पांच फ़ॉर्मेट एक साथ प्रदर्शित होते हैं जैसे ही कोई वैध रंग दर्ज किया जाता है। स्रोत एक useColorConversion हुक उपयोग करता है जो hex, rgb, hsl, hsb और cmyk स्टेट ऑब्जेक्ट को सिंक में रखता है।
• ऑटो-डिटेक्ट इनपुट फ़ॉर्मेट — टेक्स्ट एरिया HEX (वैल्यू जो # से शुरू होती हैं या /^[0-9a-f]{3,8}$/i से मेल खाती हैं), RGB (प्रीफ़िक्स rgb), और HSL (प्रीफ़िक्स hsl) स्वचालित रूप से पहचानता है, "Detected: HEX" (या RGB/HSL/Auto) पढ़ने वाला बैज दिखाता है।
• टाइप करते समय रियल-टाइम कन्वर्शन — हर कीस्ट्रोक जो कोई पार्स करने योग्य वैल्यू उत्पन्न करता है, सभी पांच आउटपुट फ़ॉर्मेट का तत्काल री-रेंडर ट्रिगर करता है। कोई बटन प्रेस की ज़रूरत नहीं।
• कोई भी फ़ॉर्मेट क्लिपबोर्ड पर कॉपी करें — प्रत्येक फ़ॉर्मेट पंक्ति में एक कॉपी बटन है जो सफल कॉपी के बाद 2 सेकंड के लिए हरा चेकमार्क दिखाता है। एक टोस्ट नोटिफ़िकेशन क्रिया की पुष्टि करता है।
• विज़ुअल कलर प्रीव्यू — एक बड़ा प्रीव्यू बॉक्स वर्तमान रंग से भर जाता है और ऑटो-कंट्रास्टिंग टेक्स्ट (ल्यूमिनेंस के आधार पर काला या सफेद) में hex वैल्यू रेंडर करता है।
• RGB, HSL, HSB और CMYK के लिए न्यूमेरिक इनपुट — मैनुअल एडजस्टमेंट पैनल आपको अलग-अलग चैनल ट्यून करने देते हैं: R, G, B (0–255), H (0–360), S (0–100), L (0–100) HSL के लिए, H (0–360), S (0–100), B (0–100) HSB के लिए, और C, M, Y, K (0–100) CMYK के लिए, प्रत्येक वैध रेंज तक सीमित।
• शेयर करने योग्य URL — टूल वर्तमान रंग को URL में एन्कोड करने के लिए useShareableState हुक उपयोग करता है, जो विशिष्ट कलर कन्वर्शन के लिए डायरेक्ट लिंक सक्षम करता है।
• लोड के बाद ऑफ़लाइन काम करता है — कन्वर्शन के दौरान कोई नेटवर्क रिक्वेस्ट नहीं; पूर्ण कन्वर्शन लाइब्रेरी पेज के साथ बंडल है।

उपयोग कैसे करें

चरण 1: रंग दर्ज करें

Color Converter खोलें। इनपुट कार्ड की बाईं आधी में एक टेक्स्ट इनपुट फ़ील्ड है। निम्नलिखित में से कोई भी पेस्ट करें:

• एक hex वैल्यू: #3B82F6
• एक RGB फ़ंक्शन: rgb(59, 130, 246)
• एक HSL फ़ंक्शन: hsl(217, 91%, 60%)
• एक bare hex स्ट्रिंग: 3b82f6 (# के बिना)

जैसे ही आप एक पहचानने योग्य वैल्यू टाइप या पेस्ट करते हैं, इनपुट के ऊपर दाईं तरफ एक छोटा बैज दिखाई देता है — उदाहरण के लिए "Detected: HEX"। कार्ड की दाईं आधी एक लाइव कलर प्रीव्यू बॉक्स दिखाती है जो तुरंत पहचाने गए रंग से भर जाती है।

वैकल्पिक रूप से, प्रीव्यू बॉक्स के नीचे नेटिव कलर पिकर उपयोग करें। अपने ब्राउज़र का कलर चूज़र खोलने के लिए स्क्वायर स्वॉच पर क्लिक करें; वहां कोई रंग चुनने से इनपुट सेट होता है और सभी फ़ॉर्मेट एक साथ अपडेट होते हैं।

चरण 2: सभी फ़ॉर्मेट की समीक्षा करें

इनपुट कार्ड के नीचे, "All Formats" कार्ड पांच पंक्तियां सूचीबद्ध करता है:

प्रत्येक पंक्ति फ़ॉर्मेट लेबल, मोनोस्पेस फ़ॉन्ट में फ़ॉर्मेट किया गया वैल्यू, और एक कॉपी आइकन बटन दिखाती है। उस विशिष्ट वैल्यू को क्लिपबोर्ड पर रखने के लिए किसी भी कॉपी बटन पर क्लिक करें।

चरण 3: न्यूमेरिक इनपुट के साथ फ़ाइन-ट्यून करें

टेक्स्ट इनपुट के नीचे, टूल सभी चार एडजस्टेबल कलर मॉडल के लिए डायरेक्ट न्यूमेरिक इनपुट प्रदान करता है:

• RGB: R, G, B लेबल वाले तीन नंबर इनपुट — प्रत्येक 0 से 255 तक वैल्यू स्वीकार करता है और वैध रेंज तक सीमित है।
• HSL: H (0–360), S (0–100), L (0–100) लेबल वाले तीन नंबर इनपुट।
• HSB: H (0–360), S (0–100), B (0–100) लेबल वाले तीन नंबर इनपुट।
• CMYK: C, M, Y, K लेबल वाले चार नंबर इनपुट — प्रत्येक 0 से 100 तक वैल्यू स्वीकार करता है।

किसी भी इनपुट को बदलने से hex स्टेट अपडेट होती है, जो तुरंत सभी पांच आउटपुट फ़ॉर्मेट में फैल जाती है। यह उपयोगी है जब आप एक लक्ष्य hue एंगल, सैचुरेशन प्रतिशत, या CMYK वैल्यू जानते हैं और CSS के लिए समकक्ष hex चाहते हैं।

चरण 4: कन्वर्ट किए गए वैल्यू कॉपी करें और उपयोग करें

जिस फ़ॉर्मेट की आपको ज़रूरत है उसके पास कॉपी बटन पर क्लिक करें। बटन आइकन 2 सेकंड के लिए क्लिपबोर्ड आइकन से हरे चेकमार्क में बदल जाता है। स्क्रीन के नीचे एक सफलता टोस्ट दिखाई देता है।

टूल HistoryPanel (Premium) में कन्वर्शन का इतिहास भी ट्रैक करता है। जब आप कोई इतिहास एंट्री रिस्टोर करते हैं, तो यह इनपुट को स्टोर किए गए hex वैल्यू पर सेट करता है और सभी कन्वर्शन दोबारा चलाता है।

चरण 5: एक विशिष्ट रंग शेयर करें

जैसे ही आप रंग बदलते हैं URL स्वचालित रूप से अपडेट होती है (useShareableState के ज़रिए)। किसी भी विशिष्ट रंग के लिए डायरेक्ट लिंक शेयर करने के लिए ब्राउज़र URL कॉपी करें। जो प्राप्तकर्ता लिंक खोलते हैं वे "Loaded from shared link" टोस्ट और सभी फ़ॉर्मेट में शेयर किया गया रंग प्री-लोडेड देखते हैं।

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

Figma डिज़ाइन टोकन को CSS में बदलना

एक डिज़ाइनर ब्रांड वायलेट #8467C7 देता है। डेवलपर को CSS color-mix() फ़ंक्शन के लिए HSL वैल्यू चाहिए। Color Converter खोलें और #8467C7 टाइप करें — तुरंत HSL पंक्ति में hsl(261, 40%, 59%) दिखाई देता है — पेस्ट करने के लिए तैयार।

प्रिंट कलर को वेब में कन्वर्ट करना

एक प्रिंट शॉप कॉर्पोरेट ब्लू को cmyk(76%, 47%, 0%, 4%) के रूप में निर्दिष्ट करती है। टेक्स्ट इनपुट ऑटो-डिटेक्शन raw CMYK नोटेशन को नहीं पहचानती, लेकिन आप CMYK न्यूमेरिक इनपुट पैनल का उपयोग करके वैल्यू सीधे दर्ज कर सकते हैं: C को 76, M को 47, Y को 0 और K को 4 पर सेट करें। HEX, RGB और HSL आउटपुट रियल टाइम में अपडेट होते हैं, तुरंत वेब-रेडी वैल्यू देते हैं।

डार्क मोड पैलेट बनाना

एक डेवलपर डार्क थीम बना रहा है और एक हल्के रंग को गहरे वैरिएंट में बदलने की ज़रूरत है। वे #E2E8F0 (लाइट स्लेट) दर्ज करते हैं, नोट करते हैं कि HSL hsl(214, 32%, 91%) है, फिर मैन्युअल रूप से L चैनल इनपुट को 91 से 25 तक कम करते हैं डार्क समकक्ष पाने के लिए। HEX आउटपुट #253443 में अपडेट होता है, जो वे सीधे कॉपी करते हैं।

टिप्स और बेस्ट प्रैक्टिसेज़

तेज़ एंट्री के लिए # के बिना टाइप करें। ऑटो-डिटेक्शन regex 3b82f6 जैसे bare hex स्ट्रिंग को HEX फ़ॉर्मेट के रूप में मिलान करता है। आप उन डिज़ाइन टूल्स से सीधे पेस्ट कर सकते हैं जो hash हटा देते हैं।

सटीक चैनल नियंत्रण के लिए RGB इनपुट उपयोग करें। अगर आपको 200 के सटीक लाल वैल्यू वाला रंग चाहिए, तो सही hex प्रीफ़िक्स खोजने के बजाय सीधे R इनपुट में टाइप करें। मिन/मैक्स क्लैम्पिंग आपको गलती से आउट-ऑफ-रेंज वैल्यू दर्ज करने से रोकती है।

शेयर करने योग्य URL के ज़रिए रंग बुकमार्क करें। चूंकि रंग useShareableState के ज़रिए URL में एन्कोड होता है, आप अक्सर संदर्भित ब्रांड रंगों को बुकमार्क कर सकते हैं और वैल्यू दोबारा दर्ज किए बिना तुरंत उन्हें फिर से खोल सकते हैं।

डिटेक्शन बैज एक त्वरित वैलिडिटी चेक है। अगर टाइप करने के बाद बैज दिखाई नहीं देता, तो इनपुट को वैध रंग के रूप में पहचाना नहीं गया है। टाइपो के लिए जांचें — सामान्य गलतियों में एक गायब #, rgba का उपयोग अल्फा चैनल के साथ (वर्तमान में पार्स नहीं किया जाता) या प्रतिशत-आधारित RGB वैल्यू दर्ज करना शामिल है।

सभी चार कलर मॉडल में संपादन योग्य इनपुट हैं। RGB, HSL, HSB और CMYK सभी के पास डेडिकेटेड न्यूमेरिक इनपुट पैनल हैं। आप अपनी वैल्यू सीधे एडजस्ट करके किसी भी मॉडल से शुरू कर सकते हैं, और अन्य फ़ॉर्मेट रियल टाइम में अपडेट होते हैं।

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

टाइप करने के बाद आउटपुट पंक्तियों में कुछ नहीं दिखाई देता। इनपुट टेक्स्ट को वैध रंग के रूप में पहचाना नहीं गया है। parseColorToHex फ़ंक्शन # hex, bare hex, rgb() और hsl() स्ट्रिंग को संभालता है। अगर आपने एक अलग फ़ॉर्मेट दर्ज किया (जैसे एक नाम का CSS रंग cornflowerblue), तो ऑटो-डिटेक्शन null पर फ़ॉल थ्रू करती है और कोई कन्वर्शन नहीं होती। इसके बजाय hex वैल्यू उपयोग करें।

RGB इनपुट 255 से अधिक वैल्यू स्वीकार करते हैं। कोड बदलाव पर वैल्यू को Math.min(255, Math.max(0, val)) तक क्लैम्प करता है, इसलिए अगर आप 300 टाइप करते हैं, तो यह जैसे ही इनपुट प्रोसेस होता है 255 पर स्नैप हो जाता है। यह अपेक्षित व्यवहार है।

HSL hue इनपुट 360 पर रैप होता है। hue फ़ील्ड Math.min(360, Math.max(0, val)) तक सीमित है। 361 दर्ज करने से 360 सेट होता है; -1 दर्ज करने से 0 सेट होता है।

कॉपी बटन प्रतिक्रिया नहीं करता। अगर navigator.clipboard.writeText विफल होता है (उदाहरण के लिए असुरक्षित या प्रतिबंधित संदर्भ में), तो टूल एक अस्थायी textarea एलिमेंट का उपयोग करके document.execCommand('copy') मेथड पर वापस आता है। अगर दोनों विफल होते हैं, तो जांचें कि ब्राउज़र के पास साइट के लिए क्लिपबोर्ड अनुमति है।

"Loaded from shared link" टोस्ट अप्रत्याशित रूप से दिखाई देता है। यह टोस्ट एक बार दिखाई देता है जब isFromUrl true होता है, यानी URL query string में एक रंग एन्कोड किया गया था। अगर आपने एक बुकमार्क किया हुआ URL खोला, तो यह अपेक्षित है। hasShownShareToast ref guard के कारण टोस्ट प्रति पेज लोड केवल एक बार दिखाई देता है।

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

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

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

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

हां, बिना किसी खाते के पूरी तरह से मुफ़्त। सभी पांच कन्वर्शन फ़ॉर्मेट, विज़ुअल कलर पिकर, RGB और HSL मैनुअल इनपुट, क्लिपबोर्ड कॉपी और शेयर करने योग्य URL सभी उपयोगकर्ताओं के लिए बिना किसी लागत के उपलब्ध हैं। PresetsPanel और HistoryPanel जैसी Supporter सुविधाओं के लिए 30 दिनों की पहुंच के लिए $5 Ko-fi एक्टिवेशन आवश्यक है।

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

हां। एक बार पेज लोड हो जाने के बाद, सभी कन्वर्शन लॉजिक पूरी तरह से JavaScript में बिना किसी बाहरी रिक्वेस्ट के चलती है। आप अपना नेटवर्क कनेक्शन बंद कर सकते हैं और बिना किसी रुकावट के रंग कन्वर्ट करना जारी रख सकते हैं।

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

हां। रंग वैल्यू केवल ब्राउज़र मेमोरी में प्रोसेस होती हैं। कुछ भी सर्वर पर नहीं भेजा जाता। शेयर करने योग्य URL रंग को क्लाइंट-साइड एन्कोड करता है — Glyph Widgets सर्वर कभी भी उन विशिष्ट रंगों को लॉग नहीं करते जिनके साथ आप काम करते हैं।

Color Converter कौन से फ़ॉर्मेट सपोर्ट करता है?

टूल पांच फ़ॉर्मेट सपोर्ट करता है: HEX (3 या 6 अंकों वाली hex स्ट्रिंग # के साथ या बिना), RGB (rgb(R, G, B) नोटेशन), HSL (hsl(H, S%, L%) नोटेशन), HSB/HSV और CMYK। सभी पांच फ़ॉर्मेट में डायरेक्ट वैल्यू एडजस्टमेंट के लिए डेडिकेटेड न्यूमेरिक इनपुट पैनल हैं।

HSL और HSB में क्या अंतर है?

दोनों Hue (0–360 डिग्री) और Saturation (0–100%) उपयोग करते हैं, लेकिन तीसरा चैनल अलग है। HSL Lightness उपयोग करता है, जहां 50% पूरी तरह से संतृप्त रंग है और 100% हमेशा सफेद होता है। HSB (जिसे HSV भी कहा जाता है) Brightness/Value उपयोग करता है, जहां 100% hue का सबसे शुद्ध संस्करण है और 0% हमेशा काला होता है। Figma और अधिकांश डिज़ाइन टूल HSB प्रदर्शित करते हैं; CSS HSL उपयोग करता है।

क्या मैं CMYK को HEX में कन्वर्ट कर सकता हूं?

टेक्स्ट इनपुट में ऑटो-डिटेक्शन raw CMYK नोटेशन को पार्स नहीं करती, लेकिन आप CMYK न्यूमेरिक इनपुट पैनल का उपयोग करके C, M, Y और K वैल्यू सीधे दर्ज कर सकते हैं। किसी भी CMYK वैल्यू को एडजस्ट करने से HEX सहित सभी अन्य फ़ॉर्मेट रियल टाइम में अपडेट होते हैं।

CMYK कन्वर्शन मेरे प्रिंट वैल्यू से थोड़ा अलग क्यों दिखता है?

स्क्रीन-से-प्रिंट कन्वर्शन कलर प्रोफ़ाइल पर निर्भर करता है। टूल ICC प्रोफ़ाइल करेक्शन के बिना एक मानक sRGB-से-CMYK गणितीय सूत्र उपयोग करता है। प्रिंट प्रोडक्शन वर्क के लिए, एक कलर मैनेजमेंट टूल उपयोग करें जो आपके प्रिंटर और कागज के लिए सही ICC प्रोफ़ाइल लागू करे।

क्या मैं #F0F जैसे 3-अंकीय शॉर्टहैंड hex वैल्यू दर्ज कर सकता हूं?

हां। parseColorToHex फ़ंक्शन /^[0-9a-f]{3,8}$/i से मेल खाने वाले hex स्ट्रिंग का पता लगाता है, जिसमें 3-अंकीय शॉर्टहैंड शामिल है। #F0F को #FF00FF के समकक्ष माना जाता है।

मैं किसी सहकर्मी के साथ एक विशिष्ट रंग कैसे शेयर करूं?

टूल में रंग बदलें और ब्राउज़र URL कॉपी करें। वर्तमान hex वैल्यू useShareableState के ज़रिए URL query string में एन्कोड है। जब आपका सहकर्मी लिंक खोलता है, तो वे "Loaded from shared link" नोटिफ़िकेशन के साथ प्री-लोडेड रंग देखते हैं।

क्या Color Converter alpha (RGBA / HSLA) सपोर्ट करता है?

वर्तमान संस्करण में नहीं। इनपुट पार्सर rgb() और hsl() को संभालता है लेकिन rgba() या hsla() को नहीं। अल्फा चैनल वैल्यू कन्वर्शन पाइपलाइन में संरक्षित नहीं हैं। पूर्ण alpha सपोर्ट के लिए, RGB या HSL वैल्यू मैन्युअल रूप से निकालें और alpha को अलग से संभालें।

संबंधित टूल्स

• Color Picker — किसी अपलोड किए गए इमेज या अपनी स्क्रीन से सीधे रंग सैंपल करें और परिणाम कन्वर्टर को भेजें।
• Contrast Checker — सत्यापित करें कि दो कन्वर्ट किए गए रंग WCAG AA या AAA कंट्रास्ट आवश्यकताओं को पूरा करते हैं।
• जल्द आ रहा है: Palette Generator — एक बेस रंग से हार्मोनियस कलर पैलेट जेनरेट करें और प्रत्येक स्वॉच को अपने पसंदीदा फ़ॉर्मेट में कन्वर्ट करें।

अभी Color Converter आज़माएं: Glyph Widgets Color Converter