HSL से RGB रूपांतरण पृष्ठ: मानव सोच से स्क्रीन तक
यह पृष्ठ आपको HSL (ह्यू, संतृप्ति, लाइटनेस) में दिए गए रंग को तुरंत RGB (लाल, हरा, नीला) मानों में बदलने की सुविधा देता है। आप ह्यू को 0–360 डिग्री में और संतृप्ति एवं लाइटनेस को प्रतिशत में दर्ज करते हैं, और उपकरण तुरंत समतुल्य RGB मान (0–255) प्रदर्शित करता है। यह आपको रंग के बारे में मानवीय तर्क के लिए बनाए गए मॉडल (HSL) से उन सटीक संख्याओं तक ले जाता है जिनका उपयोग स्क्रीन प्रकाश उत्सर्जित करने के लिए करती है।
यह पृष्ठ दूसरों से कैसे भिन्न है
- HSL मानवीय तर्क के लिए डिज़ाइन किया गया है; RGB ऑन-स्क्रीन रंग गणित का कार्यक्षेत्र है। HSL में लाइटनेस बदलने पर ह्यू बरकरार रहता है, यही कारण है कि पैलेट और थीम जनरेशन के लिए HSL का उपयोग किया जाता है। RGB में, ह्यू को अकेला बदलना उतना सरल नहीं है।
- रूपांतरण हानिरहित (लॉसलेस) है: प्रत्येक मान्य HSL मान प्रदर्शन योग्य सीमा के अंदर एकल RGB त्रिक (ट्रिपलेट) में मैप होता है। जब आप HSL से RGB और वापस HSL में जाते हैं, तो कोई जानकारी नहीं खोती।
- कोई आउट-ऑफ-गैमट क्लिपिंग नहीं होती: LAB या CMYK से RGB में रूपांतरण के विपरीत, HSL से RGB में कोई रंग स्थानांतरण नहीं होता। HSL और RGB दोनों sRGB रंग स्थान के अंतर्गत आते हैं, इसलिए सभी HSL मान RGB सीमा में ही होते हैं।
- सभी गणना आपके ब्राउज़र में होती है: आप जो कुछ भी दर्ज करते हैं वह अपलोड नहीं होता। कोई सर्वर कॉल नहीं, कोई प्राइवेसी चिंता नहीं।
इनपुट, आउटपुट और कार्यप्रणाली
इनपुट
- HSL: ह्यू 0–360 डिग्री, संतृप्ति (प्रतिशत), लाइटनेस (प्रतिशत)। उदाहरण:
243, 75%, 59%
आउटपुट – सभी फ़ील्ड तुरंत अपडेट होते हैं:
- HEX – #4F46E5
- RGB – 79, 70, 229
- HSL – 243°, 75%, 59%
- HSV – 243°, 69%, 90%
- CMYK – 65%, 69%, 0%, 10% (सांकेतिक अनुमान)
- LAB – 35.3, 34.8, -75.9
कार्यप्रणाली का सरल विवरण
HSL को RGB में बदलने के लिए निम्नलिखित मानक एल्गोरिदम का उपयोग किया जाता है (यह CSS और W3C स्पेसिफिकेशन के अनुरूप है):
- संतृप्ति और लाइटनेस को प्रतिशत से 0–1 में बदलें। उदाहरण: 75% संतृप्ति → 0.75, 59% लाइटनेस → 0.59।
- एक अस्थायी रंग स्पेस (आर, जी, बी) की गणना करें जो ह्यू, संतृप्ति और लाइटनेस पर निर्भर करता है। इसके लिए ह्यू को 0–360 डिग्री से 0–6 चक्र में परिवर्तित किया जाता है।
- प्रत्येक चैनल को 0–255 में मैप करें और अंतिम RGB मान प्राप्त करें।
उदाहरण: hsl(243°, 75%, 59%) → rgb(79, 70, 229)
नियम और किनारी स्थितियाँ (एज केसेस)
मान्य इनपुट नियम
- ह्यू को 0–360 डिग्री के बीच एक पूर्णांक या दशमलव होना चाहिए। पृष्ठ स्वचालित रूप से मॉड्यूलर गणना नहीं करता, इसलिए 361° दर्ज करने पर त्रुटि मिलेगी।
- संतृप्ति और लाइटनेस को प्रतिशत के रूप में दर्ज करना होगा (जैसे 75% या 75)। आपको
%चिह्न लगाना होगा या नहीं, यह इंटरफ़ेस पर निर्भर करता है; फ़ैक्ट शीट के अनुसार फ़ॉर्मेट243, 75%, 59%है। यदि आप243, 75, 59दर्ज करते हैं तो उपकरण त्रुटि दिखाएगा। - अलग करने के लिए कॉमा और स्पेस का उपयोग करें।
त्रुटि संदेश
यदि HSL मान गलत प्रारूप में दर्ज किया जाता है, तो उपकरण दिखाता है:
"HSL को 0–360 के बीच ह्यू और दो प्रतिशत के रूप में दर्ज करें, जैसे 243, 75%, 59%।"
CMYK आउटपुट की सीमा
CMYK मान जो दिखाया जाता है वह केवल ऑन-स्क्रीन अनुमान है। वास्तविक प्रिंटिंग में कागज़, स्याही, और प्रिंटर प्रोफ़ाइल के कारण अलग-अलग मान हो सकते हैं। इसलिए इस CMYK का उपयोग प्रिंट डिज़ाइन के अंतिम मान के रूप में न करें।
रंग गैमट और क्लिपिंग का अभाव
HSL और RGB दोनों sRGB गैमट में काम करते हैं। इसलिए किसी भी HSL मान को RGB में बदलने पर कोई क्लिपिंग नहीं होती। यह LAB या CMYK से RGB में बदलने के विपरीत है, जहाँ कभी-कभी आउट-ऑफ-गैमट रंगों को क्लिप करना पड़ता है, जिससे रंग बदल जाता है।
रंग मॉडल: HSL और RGB का उद्देश्य और अंतर
HSL – मानवीय अनुभव के लिए
HSL रंग को तीन घटकों में विभाजित करता है जो हमारी सोच से मेल खाते हैं:
- ह्यू: असली रंग (लाल, हरा, नीला, बैंगनी, आदि)। इसे 0–360 डिग्री के रंग चक्र में व्यक्त किया जाता है।
- संतृप्ति: रंग की तीव्रता – 0% (ग्रे) से 100% (पूर्ण रंग) तक।
- लाइटनेस: रंग की चमक – 0% (काला) से 100% (सफेद) तक।
HSL का मुख्य लाभ यह है कि लाइटनेस बदलने पर ह्यू प्रभावित नहीं होता। इसलिए डिज़ाइनर एक ही ह्यू के कई शेड्स या टिंट्स बनाने के लिए केवल लाइटनेस बदल सकते हैं – इसे रंग सामंजस्य कहते हैं।
RGB – स्क्रीन के लिए
RGB एक योगात्मक रंग मॉडल है। लाल, हरा, और नीला प्रकाश को अलग-अलग तीव्रता (0–255) पर मिलाकर स्क्रीन रंग उत्पन्न करती हैं। अधिकतम तीव्रता (255,255,255) सफेद प्रकाश देती है। यह CMYK (व्यकलनात्मक मॉडल) के विपरीत है, जहाँ स्याही मिलाने पर प्रकाश अवशोषित होता है।
HSL से RGB रूपांतरण की आवश्यकता
- डिज़ाइन टूल्स (जैसे Figma, Adobe XD) अक्सर HSL या HSV में रंग दिखाते हैं, जबकि CSS (कोड में) RGB या HEX की अपेक्षा करता है। इस पृष्ठ का उपयोग करके आप तुरंत कोड के लिए आवश्यक मान प्राप्त कर सकते हैं।
- फ्रंट-एंड डेवलपर जो थीम या पैलेट को कोड में ट्रांसफर कर रहे हैं, उनके लिए यह रूपांतरण समय बचाता है।
- रंग पहुंच (एक्सेसिबिलिटी) के लिए, कभी-कभी HSL में लाइटनेस को बदलकर कंट्रास्ट अनुपात को समायोजित करना आसान होता है, और फिर RGB में बदलकर सटीक मान प्राप्त किया जा सकता है।
रंग मॉडल समझने के अन्य तरीके: HEX, HSV, LAB, CMYK
इस पृष्ठ पर आपको अतिरिक्त रूप से HEX, HSV, CMYK, और LAB मान भी मिलते हैं।
HEX
HEX रंग को #RRGGBB फ़ॉर्मेट में दर्शाता है, जहाँ प्रत्येक जोड़ी हेक्साडेसिमल संख्या (00–FF) एक RGB चैनल को दर्शाती है। यह वेब डेवलपमेंट में सबसे आम फ़ॉर्मेट है।
HSV (ह्यू, संतृप्ति, मान)
HSL के समान, लेकिन यह लाइटनेस के बजाय "मान" (V) का उपयोग करता है, जो 0 (काला) से 1 (पूर्ण रंग) होता है। HSV ग्राफ़िक डिज़ाइन टूल्स में लोकप्रिय है क्योंकि यह रंग चयन के लिए अधिक सहज है।
LAB
LAB रंग स्थान मानव आँख की रंग धारणा का गणितीय मॉडल है। इसमें L (लाइटनेस), a (हरा–लाल अक्ष), b (नीला–पीला अक्ष) शामिल होते हैं। sRGB से LAB में रूपांतरण अरेखीय होता है और गैमट के कारण कभी-कभी छोटी त्रुटियाँ हो सकती हैं, लेकिन यह वैज्ञानिक और उच्च-गुणवत्ता वाले रंग प्रबंधन के लिए उपयोगी है।
CMYK – सबसे भिन्न मॉडल
CMYK एक व्यकलनात्मक मॉडल है जो स्याही मिश्रण पर आधारित है। sRGB से CMYK में रूपांतरण में हमेशा एक अनुमान शामिल होता है क्योंकि प्रिंट गैमट स्क्रीन गैमट से छोटा होता है। इसीलिए पृष्ठ स्पष्ट रूप से बताता है कि दिखाया गया CMYK मान केवल ऑन-स्क्रीन अनुमान है और पेशेवर प्रिंटिंग के लिए सटीक नहीं हो सकता।
रंग गैमट और आउट-ऑफ-गैमट रंग – व्यावहारिक सीमाएँ
रंग गैमट एक विशेष उपकरण (जैसे मॉनिटर या प्रिंटर) द्वारा प्रदर्शित या मुद्रित किए जा सकने वाले रंगों का पूरा सेट है।
- sRGB गैमट: अधिकांश वेब और मॉनिटर sRGB का उपयोग करते हैं। HSL और RGB दोनों इसी गैमट में परिभाषित हैं। इसलिए HSL से RGB में रूपांतरण में कोई रंग नहीं खोता।
- सीमा: यदि आप किसी अन्य रंग स्थान (जैसे Adobe RGB या ProPhoto RGB) से HSL या RGB में बदल रहे हैं, तो आउट-ऑफ-गैमट रंग क्लिप किए जा सकते हैं। इस पृष्ठ पर ऐसा नहीं होता।
- प्रिंट गैमट: CMYK प्रिंटर sRGB की तुलना में कम रंग उत्पन्न कर सकते हैं। इसलिए एक चमकीला sRGB नीला रंग प्रिंट में फीका दिखाई दे सकता है।
सामान्य गलतियाँ
hsl(243, 75, 59)दर्ज करना – लेकिन संतृप्ति और लाइटनेस को प्रतिशत के रूप में होना चाहिए।- ह्यू को 360 से अधिक डालना – पृष्ठ स्वचालित रूप से मॉड्यूलर कमी नहीं करता।
- मान्य मान होने के बावजूद कॉमा और स्पेस का गलत उपयोग।
अक्सर पूछे जाने वाले प्रश्न (FAQ)
मैं HSL को RGB में कैसे बदलूं – क्या कोई फ़ॉर्मूला है?
हाँ, मानक फ़ॉर्मूला है: पहले S और L को 0–1 में बदलें, फिर एक सहायक फ़ंक्शन (जैसे hueToRgb) का उपयोग करके प्रत्येक RGB चैनल की गणना करें। इस पृष्ठ पर यह गणना स्वचालित रूप से होती है।
क्या HSL और RGB के बीच हमेशा एक-से-एक मानचित्रण होता है?
पूर्ण रूप से हाँ। प्रत्येक मान्य HSL मान एक अद्वितीय RGB त्रिक से मेल खाता है। रिवर्स में भी, प्रत्येक RGB मान एक अद्वितीय HSL मान में बदल सकता है (हालाँकि ह्यू 0 और 360 डिग्री एक ही रंग को दर्शाते हैं, वैकल्पिक रूप से)।
क्या यह रूपांतरण मेरे डेटा को सर्वर पर भेजता है?
नहीं। सभी गणनाएँ आपके ब्राउज़र में जावास्क्रिप्ट द्वारा की जाती हैं। कोई भी इनपुट या परिणाम कहीं अपलोड नहीं होता।
CMYK मान प्रिंटिंग के लिए उपयोग में ला सकता हूँ?
यह केवल एक ऑन-स्क्रीन अनुमान है। वास्तविक प्रिंटिंग के लिए, आपको अपने प्रिंटर प्रोफ़ाइल के अनुसार रंग प्रबंधन करना चाहिए और यदि संभव हो तो सीधे CMYK वर्कफ़्लो का उपयोग करना चाहिए।
यदि मैं 361 डिग्री ह्यू दर्ज करूँ तो क्या होगा?
पृष्ठ त्रुटि संदेश दिखाएगा क्योंकि ह्यू 0–360 के बीच होना चाहिए। उपकरण मॉड्यूलर गणना (361° → 1°) नहीं करता।
HSL या RGB – कौन सा बेहतर है?
यह उपयोग पर निर्भर करता है। रंग पैलेट डिज़ाइन करने के लिए HSL बेहतर है (क्योंकि लाइटनेस बदलने पर ह्यू बरकरार रहता है), जबकि स्क्रीन रेंडरिंग और CSS के लिए RGB या HEX अधिक उपयुक्त हैं। इसलिए इस पृष्ठ की आवश्यकता है – दोनों दुनियाओं के बीच सेतु।