HEX से HSL कन्वर्टर

HEX और HSL: दो अलग-अलग रंग मॉडल

रंगों को डिजिटल रूप से दर्शाने के लिए कई मॉडल मौजूद हैं, और इनमें से दो सबसे महत्वपूर्ण हैं HEX और HSL। HEX (हेक्साडेसिमल) एक छह-अंकीय (या तीन-अंकीय शॉर्टहैंड) कोड है जो सीधे लाल, हरे और नीले (RGB) घटकों को आधार-16 (हेक्साडेसिमल) संख्या प्रणाली में एन्कोड करता है। उदाहरण के लिए, #4f46e5 का मतलब है: लाल (0x4F = 79), हरा (0x46 = 70), नीला (0xE5 = 229)। यह बेहद कॉम्पैक्ट है और CSS तथा डिज़ाइन टूल्स में व्यापक रूप से उपयोग होता है, लेकिन मानवीय समझ के लिए यह बहुत सहज नहीं है।

दूसरी ओर, HSL (ह्यू, सैचुरेशन, लाइटनेस) एक ऐसा मॉडल है जो मानवीय सोच के अनुरूप बनाया गया है। ह्यू (Hue) को डिग्री (0–360) में मापा जाता है, जो रंग चक्र पर स्थिति बताता है (0 = लाल, 120 = हरा, 240 = नीला)। सैचुरेशन (Saturation) प्रतिशत (0–100%) में रंग की तीव्रता को दर्शाता है – 0% पूरी तरह से धूसर (ग्रे), 100% सबसे जीवंत। लाइटनेस (Lightness) भी प्रतिशत (0–100%) में होती है, जो काले (0%) से सफेद (100%) तक चमक बताती है। 50% का मतलब है शुद्ध रंग (गहरा या हल्का किए बिना)।

इस पेज का मुख्य काम है किसी दिए गए HEX कोड को तुरंत HSL में बदलना, और साथ ही उसी रंग को RGB, HSV, CMYK और LAB जैसे अन्य सभी समर्थित फ़ॉर्मेट में दिखाना ताकि आप जो चाहें कॉपी कर सकें।

HEX को HSL में बदलने का गणित और तरीका

रूपांतरण RGB से शुरू होता है। पहले HEX को RGB में तोड़ा जाता है – 6-अंकीय कोड के लिए पहले दो अंक लाल, बीच के दो हरे, अंतिम दो नीले। शॉर्टहैंड (जैसे #abc) को पूर्ण रूप में विस्तारित किया जाता है (#aabbcc)।

फिर RGB मान (0–255) को 0–1 की सीमा में सामान्यीकृत किया जाता है। मान लें:

• R' = R/255, G' = G/255, B' = B/255

इनमें से अधिकतम (Max) और न्यूनतम (Min) ज्ञात करें:

• Max = अधिकतम(R', G', B')
• Min = न्यूनतम(R', G', B')
• डेल्टा (Δ) = Max - Min

ह्यू (H) की गणना:

• यदि Δ = 0, तो H = 0 (धूसर)
• यदि Max = R', तो H = 60 × ( (G' - B') / Δ )
• यदि Max = G', तो H = 60 × ( (B' - R') / Δ ) + 120
• यदि Max = B', तो H = 60 × ( (R' - G') / Δ ) + 240
• यदि H ऋणात्मक हो, तो H + 360

लाइटनेस (L):

• L = (Max + Min) / 2

सैचुरेशन (S):

• यदि Δ = 0, तो S = 0
• अन्यथा: S = Δ / (1 - |2L - 1|)

अंत में, H को 0–360 रेंज में, S और L को 0–100% में बदल दिया जाता है। यह सटीक गणित वही है जो ब्राउज़र स्तर पर CSS hsl() फ़ंक्शन के लिए होता है।

इस पेज का उपयोग कैसे करें: इनपुट, आउटपुट और त्रुटियाँ

इनपुट फ़ील्ड में कोई भी मान्य HEX कोड डालें – या तो पूर्ण छह अंक (जैसे #1E90FF या बिना # के 1E90FF) या तीन अंकीय शॉर्टहैंड (जैसे #abc या abc)। जैसे ही आप टाइप करेंगे, सभी आउटपुट फ़ील्ड (HEX, RGB, HSL, HSV, CMYK, LAB) तुरंत अपडेट हो जाएंगे।

यदि आप कोई अमान्य मान डालते हैं – जैसे #GGHH12 या सिर्फ़ #xyz – तो पेज त्रुटि दिखाएगा: "Enter a hex color like #4f46e5 or #abc." यह केवल उन्हीं प्रारूपों को स्वीकार करता है जो वास्तव में HEX रंगों को दर्शाते हैं।

एक महत्वपूर्ण नियम: इसमें कोई अल्फा चैनल (पारदर्शिता) नहीं है। मानक HEX (छह या तीन अंक) में पारदर्शिता के बारे में कोई जानकारी नहीं होती, और HSL भी अल्फा को शामिल नहीं करता। रूपांतरण हमेशा पूरी तरह से अपारदर्शी (fully opaque) रंगों के लिए होता है।

HSL बनाम HEX: मानवीय सोच के लिए बेहतर विकल्प क्यों?

HEX एक "मशीन-अनुकूल" प्रारूप है – यह कॉम्पैक्ट और तेज़ है, लेकिन इससे कोई भी अनुमान नहीं लगा सकता कि #7B2D8E गहरा बैंगनी है या हल्का नीला। दूसरी ओर, HSL को देखते ही पता चल जाता है: hsl(285°, 51%, 37%) – ह्यू 285° (बैंगनी की ओर), मध्यम सैचुरेशन (51%), गहरा लाइटनेस (37%)।

यही कारण है कि फ्रंट-एंड डेवलपर और UI/UX डिज़ाइनर HSL को पसंद करते हैं। मान लीजिए किसी ब्रांड का प्राथमिक रंग HEX #1E90FF (डॉजर ब्लू) है। इसका HSL मान hsl(210°, 100%, 56%) है। अगर आपको होवर स्टेट के लिए हल्का शेड चाहिए, तो बस लाइटनेस बढ़ा दें: hsl(210°, 100%, 70%)। HEX में यह ऑपरेशन सीधा नहीं है – आपको मैन्युअल रूप से RGB घटकों को अनुमानित करना होगा।

HSL से पैलेट बनाना भी आसान है। एक ही ह्यू रखकर सैचुरेशन और लाइटनेस बदलकर मोनोक्रोमैटिक (एकरंग) योजना बनाई जा सकती है। ह्यू में 120° जोड़कर ट्रायडिक (तीन रंग) योजना मिलती है। वेब एक्सेसिबिलिटी ऑडिटर भी HSL का उपयोग करते हैं क्योंकि वे पाठ और पृष्ठभूमि के बीच लाइटनेस अंतर को सीधे देख सकते हैं – यह WCAG (वेब कंटेंट एक्सेसिबिलिटी गाइडलाइंस) अनुपालन के लिए आवश्यक है।

वेब विकास और डिज़ाइन में HSL के व्यावहारिक उपयोग

CSS कस्टम प्रॉपर्टीज़ (--primary-color: hsl(210, 100%, 56%)) के साथ HSL सबसे अधिक लचीलापन देता है। आप calc() के साथ ह्यू या लाइटनेस को प्रोग्रामेटिक रूप से समायोजित कर सकते हैं – उदाहरण के लिए डार्क मोड के लिए --text-color: hsl(0, 0%, 80%) और --bg-color: hsl(0, 0%, 10%)।

एक और शक्तिशाली उपयोग है रंग पैलेट जनरेट करना। मान लीजिए किसी डिज़ाइन सिस्टम में प्राइमरी रंग hsl(220, 80%, 50%) है। इसके 10 शेड बनाने के लिए 5% के अंतराल पर लाइटनेस को 40% से 90% तक बदल सकते हैं। यह HEX में व्यावहारिक रूप से असंभव है।

CSS ग्रिड और फ्लेक्सबॉक्स के साथ मिलकर, HSL डायनामिक थीम बनाने में मदद करता है। उपयोगकर्ता की प्राथमिकता के अनुसार केवल ह्यू बदलकर पूरी थीम को बदला जा सकता है – सैचुरेशन और लाइटनेस को वही रखकर।

रंग गैमट और सीमाएँ: क्या सावधान रहना चाहिए

हर डिवाइस या कलर स्पेस रंगों की एक निश्चित सीमा (गैमट) प्रदर्शित कर सकता है। मानक RGB और HSL sRGB गैमट के भीतर काम करते हैं, लेकिन LAB या CMYK जैसे स्पेस में कुछ मान sRGB से बाहर हो सकते हैं।

यदि आप LAB या CMYK में कोई मान दर्ज करते हैं जो दृश्यमान sRGB रेंज से बाहर है, तो पेज उसे सबसे नज़दीकी प्रदर्शनीय रंग में समायोजित करता है। उस रंग को वापस HEX में बदलने पर मूल मान से हल्का बदलाव (shift) हो सकता है। यह एक जानबूझकर की गई सीमा है, कोई बग नहीं।

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

HSL बनाम HSV/HSB: व्यावहारिक अंतर

HSV (ह्यू, सैचुरेशन, वैल्यू) – जिसे HSB (ह्यू, सैचुरेशन, ब्राइटनेस) भी कहा जाता है – एक और लोकप्रिय मॉडल है। दोनों में ह्यू समान रहता है, लेकिन सैचुरेशन और "लाइटनेस/ब्‍राइटनेस" की परिभाषा अलग है।

• HSL में लाइटनेस 0% (काला) से 100% (सफेद) तक जाती है; 50% शुद्ध रंग है।
• HSV में वैल्यू 0% (काला) से 100% (सफेद के बिना शुद्ध रंग) तक जाती है।

इसलिए समान ह्यू के लिए HSL का 50% लाइटनेस और HSV का 100% वैल्यू एक ही रंग देते हैं, लेकिन अन्य मान भिन्न होंगे। हमारा पेज HSL और HSV दोनों प्रदर्शित करता है, ताकि आप अपनी आवश्यकता के अनुसार चुन सकें।

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

सभी रूपांतरण पूरी तरह से आपके ब्राउज़र के अंदर होते हैं। कोई भी इनपुट या आउटपुट कहीं अपलोड या स्टोर नहीं किया जाता। आपका डेटा सुरक्षित रहता है, चाहे आप किसी भी कोड को बदलें।

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

प्रश्न 1: क्या मैं तीन अंकीय HEX कोड (#abc) का उपयोग कर सकता हूँ? हाँ। यदि आप #abc डालते हैं, तो पेज स्वचालित रूप से इसे #aabbcc में विस्तारित करके रूपांतरण करेगा। ध्यान दें कि तीन अंकीय कोड केवल 16³ = 4096 रंगों तक सीमित है, जबकि छह अंकीय 256³ = 16.7 मिलियन रंग प्रदान करता है।

प्रश्न 2: अमान्य इनपुट पर मुझे क्या त्रुटि दिखेगी? यदि आप कोई ऐसा मान दर्ज करते हैं जो वैध HEX नहीं है (जैसे #GGHH12 या 12345), तो आपको यह संदेश दिखाई देगा: "Enter a hex color like #4f46e5 or #abc."

प्रश्न 3: क्या CMYK मान प्रिंट के लिए सटीक हैं? नहीं, ये केवल ऑन-स्क्रीन अनुमान हैं। पेशेवर प्रिंट के लिए कैलिब्रेटेड CMYK उपकरणों का उपयोग करें। मॉनिटर और प्रिंटर के बीच अंतर के कारण रंग बदल सकते हैं।

प्रश्न 4: मैंने LAB में कोई रंग दर्ज किया, लेकिन HEX थोड़ा अलग आया। ऐसा क्यों? LAB या CMYK में कुछ रंग sRGB गैमट से बाहर हो सकते हैं। ऐसे मामलों में, पेज रंग को सबसे नज़दीकी प्रदर्शनीय मान में समायोजित करता है, जिससे मूल रंग में हल्का बदलाव आ सकता है।

प्रश्न 5: यह टूल मेरे डेटा को कहीं स्टोर करता है? नहीं। सभी गणनाएँ आपके ब्राउज़र में होती हैं। कुछ भी सर्वर पर अपलोड या संग्रहीत नहीं किया जाता।

प्रश्न 6: क्या मैं इसका उपयोग वास्तविक समय में रंग समायोजन के लिए कर सकता हूँ? बिल्कुल। जैसे ही आप इनपुट HEX बदलते हैं, सभी आउटपुट तुरंत अपडेट हो जाते हैं। यह डिज़ाइन वर्कफ़्लो में त्वरित प्रायोगिकता के लिए आदर्श है।