HSL से HEX रूपांतरण पृष्ठ – संदर्भ लेख
यह पृष्ठ HSL रंग मॉडल में दिए गए मानों को तुरंत HEX रंग कोड में बदलता है। आप ह्यू (डिग्री 0–360), संतृप्ति (प्रतिशत 0–100%) और हल्कापन (प्रतिशत 0–100%) दर्ज करते हैं, और पृष्ठ तुरंत संबंधित HEX कोड (जैसे #4f46e5) दिखाता है। यह रूपांतरण sRGB गैमट के भीतर ही होता है, इसलिए कोई आउट-ऑफ-गैमट समायोजन नहीं किया जाता। सभी प्रसंस्करण आपके ब्राउज़र में सीधे होता है; कोई भी डेटा अपलोड नहीं होता।
पृष्ठ की विशिष्टता: HSL से HEX, मानव-केंद्रित से मशीन-केंद्रित
यह पृष्ठ केवल HSL‑से‑HEX रूपांतरण के लिए समर्पित है। HSL (Hue, Saturation, Lightness) एक रंग मॉडल है जो मनुष्यों के लिए डिज़ाइन किया गया है – केवल हल्कापन बदलने से ह्यू अपरिवर्तित रहता है, जिससे थीम और पैलेट निर्माण में आसानी होती है। दूसरी ओर HEX, छह अंकों (या तीन अंकों की शॉर्टहैंड) वाला RGB नोटेशन है; इसमें आठ अंकों के प्रारूप को छोड़कर कोई अल्फा चैनल नहीं होता। HSL‑से‑HEX रूपांतरण सीधा और हानिरहित है – इसमें LAB या CMYK जैसे रूपांतरणों में होने वाली गैमट क्लिपिंग नहीं होती।
यही विशेषता इसे अलग बनाती है: जहाँ अन्य पृष्ठ अनेक रंग मॉडलों के बीच रूपांतरण करते हैं, वहीं यह पृष्ठ HSL और HEX के बीच के सटीक, तत्काल संबंध पर ध्यान केंद्रित करता है। इसका अर्थ यह भी है कि यदि आपको HSL पैलेट को सीधे CSS में उपयोग करना है, तो यह पृष्ठ वह संक्रमण प्रदान करता है।
HSL रंग मॉडल और HEX कोड की संरचना
HSL तीन घटकों पर आधारित है:
- ह्यू (Hue) – 0°–360° के बीच, जहाँ 0°/360° = लाल, 120° = हरा, 240° = नीला।
- संतृप्ति (Saturation) – 0%–100% तक, जहाँ 0% = शुद्ध ग्रे और 100% = पूर्ण रंग।
- हल्कापन (Lightness) – 0%–100% तक, जहाँ 0% = काला, 100% = सफेद।
HEX कोड छह हेक्साडेसिमल अंकों (0–9, A–F) का एक क्रम होता है, जो RGB मानों (लाल, हरा, नीला) को दर्शाता है। प्रत्येक चैनल 0–255 के बीच होता है, जिसे एक हेक्स बाइट (00–FF) में लिखा जाता है। उदाहरणार्थ, #1E90FF में लाल = 0x1E (30), हरा = 0x90 (144), नीला = 0xFF (255)।
यदि प्रत्येक RGB चैनल को एक ही हेक्स अंक (जैसे #AABBCC → #ABC) से दर्शाया जा सकता है, तो पृष्ठ तीन अंकों की शॉर्टहैंड भी दिखा सकता है।
रूपांतरण की विधि: HSL → RGB → HEX
यह रूपांतरण मानक एल्गोरिदम पर आधारित है, जिसे कई संदर्भ (CSS स्पेसिफिकेशन सहित) परिभाषित करते हैं।
-
HSL को सामान्यीकृत करें:
ह्यू को 360 से भाग कर 0–1 की सीमा में लाएँ। संतृप्ति और हल्कापन को 100 से भाग कर 0–1 में बदलें। -
क्रोमा (C) की गणना करें:
C = (1 - |2*L - 1|) * S -
X की गणना करें:
X = C * (1 - |(H * 6) % 2 - 1|) -
मैचिंग सेक्टर के अनुसार RGB (अस्थायी) निर्धारित करें:
सेक्टर 0: (C, X, 0)
सेक्टर 1: (X, C, 0)
सेक्टर 2: (0, C, X)
सेक्टर 3: (0, X, C)
सेक्टर 4: (X, 0, C)
सेक्टर 5: (C, 0, X) -
m समायोजन:
m = L - C/2 R = (R_temp + m) * 255 G = (G_temp + m) * 255 B = (B_temp + m) * 255 -
RGB मानों को 0–255 पूर्णांकों में परिवर्तित करें, फिर प्रत्येक को दो-अंकीय हेक्स में लिखें। उदाहरण: लाल 79 →
0x4F→4F।
पृष्ठ यह सब तुरंत करता है, लेकिन शिक्षार्थियों के लिए यह जानना उपयोगी है कि HSL‑से‑HEX रूपांतरण में कोई गैर-रैखिकता नहीं है – यह केवल RGB के माध्यम से एक सीधा गणितीय मार्ग है।
इनपुट, आउटपुट और तत्काल अद्यतन
इनपुट: उपयोगकर्ता तीन मान दर्ज करता है:
- ह्यू: 0–360 (पूर्णांक या दशमलव, डिग्री में)
- संतृप्ति: 0%–100%
- हल्कापन: 0%–100%
आउटपुट: प्राथमिक आउटपुट HEX रंग कोड (जैसे #4f46e5) है। यदि लाल, हरा, नीला सभी प्रत्येक एक ही हेक्स अंक (0–F) से व्यक्त हो सकते हैं, तो तीन अंकों की शॉर्टहैंड भी दिखाई जाती है।
इसके साथ ही सभी अन्य रंग क्षेत्र (RGB, HSV, CMYK, LAB) भी एक साथ अद्यतन होते हैं। उदाहरणार्थ, यदि HSL (243°, 75%, 59%) दर्ज किया जाए, तो HEX #4f46e5 दिखाई देगा, RGB (79, 70, 229) होगा, और CMYK अनुमान (जो प्रिंटिंग मानों से भिन्न हो सकता है) अपडेट हो जाएगा।
महत्वपूर्ण: कोई भी फ़ील्ड संपादित करने पर सभी फ़ील्ड तुरंत अद्यतन हो जाते हैं। यह पृष्ठ वास्तविक समय में प्रतिक्रिया देता है – जैसे ही आप टाइप करते हैं या स्लाइडर खींचते हैं, HEX अपडेट होता है।
सीमाएँ, त्रुटि संदेश और सामान्य गलतियाँ
यदि HSL मान वैध सीमा के बाहर हैं या गलत स्वरूपित हैं, तो पृष्ठ यह त्रुटि संदेश दिखाता है:
“Enter HSL as hue 0–360 with two percentages, like 243, 75%, 59%.”
सामान्य गलतियाँ:
- प्रतिशत चिह्न (
%) छोड़ देना – उदाहरण:50के बजाय50%होना चाहिए। - ह्यू 360 से अधिक दर्ज करना – 400° स्वीकार नहीं किया जाता।
- संतृप्ति या हल्कापन 0–100 के बाहर डालना – 110% त्रुटि उत्पन्न करता है।
HSL‑से‑HEX रूपांतरण हमेशा दृश्य RGB सीमा के भीतर रहता है, क्योंकि HSL स्वयं sRGB के भीतर परिभाषित होता है। इसलिए LAB या CMYK रूपांतरणों के विपरीत, यहाँ कोई गैमट क्लिपिंग आवश्यक नहीं है।
CMYK आउटपुट के बारे में नोट: पृष्ठ जो CMYK अनुमान दिखाता है, वह केवल ऑन-स्क्रीन अनुमान है और पेशेवर प्रिंटिंग मानों से भिन्न हो सकता है। यह HSL‑से‑HEX रूपांतरण का हिस्सा नहीं है, बल्कि एक अतिरिक्त सुविधा है।
उपयोगकर्ता और उपयोग के मामले
- डिज़ाइनर: जो HSL में रंग पैलेट बनाते हैं और उन्हें कोड में या डिज़ाइन टूल में उपयोग के लिए HEX में बदलना चाहते हैं। HSL में ह्यू को स्थिर रखते हुए केवल हल्कापन बदलकर रंगों के परिवार बनाना आसान है, और यह पृष्ठ तुरंत HEX आउटपुट देता है।
- फ्रंट-एंड डेवलपर्स: जो फिग्मा या स्केच जैसे डिज़ाइन टूल से HSL मान प्राप्त करते हैं और उन्हें CSS में
color: #...के रूप में लिखना चाहते हैं। HSL की मानव-मित्रता और HEX की सार्वभौमिकता के बीच यह सेतु है। - एक्सेसिबिलिटी विशेषज्ञ: WCAG कंट्रास्ट अनुपात को समायोजित करने के लिए HSL में हल्कापन बदलकर, फिर परिणाम को HEX में बदलने के लिए इस पृष्ठ का उपयोग कर सकते हैं। ह्यू को बनाए रखते हुए कंट्रास्ट नियंत्रित करना एक सामान्य तकनीक है।
- थीम निर्माता: जो गहरे/हल्के थीम विकसित करते हैं – HSL में हल्कापन घटाकर/बढ़ाकर रंग बनाते हैं, और फिर HEX में परिवर्तित करते हैं।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
1. क्या मैं ह्यू के लिए दशमलव मान दर्ज कर सकता हूँ?
हाँ, ह्यू 0–360 के बीच कोई भी वास्तविक संख्या (जैसे 243.5) स्वीकार की जाती है। संतृप्ति और हल्कापन पूर्णांक प्रतिशत होने चाहिए।
2. तीन अंकों की HEX शॉर्टहैंड कब दिखाई जाती है?
जब लाल, हरा और नीला प्रत्येक को एक ही हेक्स अंक (0–F) से दर्शाया जा सकता है। उदाहरण: RGB (170, 187, 204) → #AABBCC → छोटा रूप #ABC। यह केवल तब दिखाया जाता है जब प्रत्येक चैनल का मान 0, 17, 34, 51, 68, 85, 102, 119, 136, 153, 170, 187, 204, 221, 238, 255 में से कोई हो।
3. क्या पृष्ठ HSL के अलावा अन्य इनपुट मॉडल (जैसे HSV) को भी स्वीकार करता है?
नहीं, यह पृष्ठ केवल HSL इनपुट के लिए डिज़ाइन किया गया है। अन्य फ़ील्ड (RGB, HSV, आदि) आउटपुट के रूप में अपडेट होते हैं, लेकिन इनपुट के लिए नहीं उपयोग किए जा सकते।
4. यह रूपांतरण हानिरहित क्यों है?
HSL और RGB (जिस पर HEX आधारित है) दोनों sRGB कलर स्पेस में परिभाषित हैं। इनके बीच रूपांतरण एक सरल गणितीय समीकरण है, जिसमें कोई गैमट सीमा पार नहीं होती। इसके विपरीत, LAB या CMYK में रूपांतरण में कभी-कभी रंग गैमट से बाहर हो सकते हैं, जिसे समायोजित करना पड़ता है।
5. क्या मैं ऑफ़लाइन इस पृष्ठ का उपयोग कर सकता हूँ?
हाँ, सभी प्रसंस्करण ब्राउज़र में स्थानीय रूप से होते हैं। एक बार पृष्ठ लोड हो जाने के बाद, इंटरनेट कनेक्शन की आवश्यकता नहीं है।
6. HEX कोड में अपरकेस या लोअरकेस अक्षर कौन से उपयोग होते हैं?
पृष्ठ आमतौर पर लोअरकेस हेक्स अक्षर (a–f) प्रदर्शित करता है (उदाहरण #4f46e5), लेकिन सभी ब्राउज़र और CSS इंजन अपरकेस और लोअरकेस दोनों को समान रूप से पार्स करते हैं। आप चाहें तो मैन्युअल रूप से बदल सकते हैं।