HSL से RGB कनवर्टर
कोई भी मैनुअल गणना किए बिना HSL रंग मानों को rgb(r, g, b) में परिवर्तित करें। यह उपकरण तब उपयोगी होता है जब आप HSL में पैलेट डिज़ाइन करते हैं लेकिन CSS, ग्राफिक्स एपीआई या मौजूदा कोडबेस के लिए RGB में अंतिम मानों की आवश्यकता होती है।
HSL प्रारूप में एक रंग दर्ज करें और आप तुरंत संबंधित RGB त्रिकोण देखेंगे। आप रंग, संतृप्ति और हल्कापन स्लाइडर्स के साथ प्रयोग कर सकते हैं, फिर RGB मान को अपने शैलियों या घटकों में कॉपी कर सकते हैं।
इस पृष्ठ पर आपको HSL और RGB का एक अवलोकन, रूपांतरण सूत्र का एक मानव-पठनीय संस्करण, और दोनों प्रारूपों में लिखे गए लोकप्रिय रंगों के साथ एक छोटा सा तालिका भी मिलेगी।
HSL क्या है
HSL का अर्थ है Hue, Saturation, और Lightness। यह रंग का वर्णन एक ऐसे तरीके से करता है जो लोगों के दैनिक काम में इसके बारे में बात करने के करीब है: यह कौन सा मूल रंग है, यह कितना मजबूत लगता है, और क्या यह अधिक गहरा है या हल्का।
Hue रंग पहिये पर 0 से 360 तक का एक कोण है। Saturation और lightness 0% से 100% तक के प्रतिशत हैं। कम संतृप्ति रंग को ग्रे की ओर ले जाती है, जबकि हल्कापन काले से सफेद तक की समग्र चमक को नियंत्रित करता है।
इस संरचना के कारण, HSL टोन स्केल, थीम भिन्नताओं और सेमांटिक टोकन बनाने के लिए सुविधाजनक है: आप hue को स्थिर रख सकते हैं और संबंधित रंगों के परिवार प्राप्त करने के लिए संतृप्ति या हल्कापन को बदल सकते हैं।
RGB क्या है
RGB तीन प्रकाश घटकों: लाल, हरा, और नीला पर आधारित एक रंग मॉडल है। प्रत्येक घटक 0 से 255 तक का एक पूर्णांक है। 0 का मान मतलब है कि वह चैनल बंद है, और 255 का मतलब है पूर्ण तीव्रता।
जब इन चैनलों को मिलाया जाता है, तो वे स्क्रीन पर पिक्सल बनाते हैं। उदाहरण के लिए, rgb(255, 255, 255) सफेद है, rgb(0, 0, 0) काला है, और rgb(0, 128, 255) एक उज्ज्वल नीला है जो अक्सर लिंक और बटन के लिए उपयोग किया जाता है।
RGB कई ग्राफिक्स और रेंडरिंग सिस्टम के लिए मूल प्रारूप है, यही कारण है कि यह CSS, कैनवास एपीआई, छवि प्रारूपों और UI ढांचों में हर जगह दिखाई देता है।
HSL से RGB सूत्र
hsl(h, s, l) -> rgb(r, g, b)
Given:
h in [0, 360)
s in [0, 100]
l in [0, 100]
1) Normalize saturation and lightness:
s' = s / 100
l' = l / 100
2) Compute chroma:
c = (1 - |2 * l' - 1|) * s'
3) Find a helper value:
x = c * (1 - |((h / 60) mod 2) - 1|)
4) Compute a temporary rgb triple in [0, c]:
if 0 <= h < 60 then (r1, g1, b1) = (c, x, 0)
else if 60 <= h < 120 then (r1, g1, b1) = (x, c, 0)
else if 120 <= h < 180 then (r1, g1, b1) = (0, c, x)
else if 180 <= h < 240 then (r1, g1, b1) = (0, x, c)
else if 240 <= h < 300 then (r1, g1, b1) = (x, 0, c)
else (r1, g1, b1) = (c, 0, x)
5) Add the lightness offset:
m = l' - c / 2
r' = r1 + m
g' = g1 + m
b' = b1 + m
6) Convert to final RGB:
r = round(r' * 255)
g = round(g' * 255)
b = round(b' * 255)सूत्र पहले एक दिए गए क्रोमा और ह्यू के साथ एक रंग बनाता है, फिर इसे इस तरह से स्थानांतरित करता है कि अंतिम हल्कापन लक्षित मान से मेल खाता है। अंत में, सामान्यीकृत चैनलों को RGB में उपयोग किए जाने वाले 0 से 255 रेंज में स्केल किया जाता है।
hsl(196, 47%, 54%) के लिए उदाहरण
1) s और l को [0, 1] रेंज में सामान्य करें
2) c, x, और m की गणना करें
3) ह्यू सेक्टर के आधार पर सही अस्थायी ट्रिपल चुनें
4) प्रत्येक चैनल में m जोड़ें और 0-255 तक स्केल करें
5) गोल परिणाम:
rgb(79, 163, 194)HSL से RGB रूपांतरण कैसे काम करता है चरण दर चरण
HSL से RGB एल्गोरिदम पहली बार में डरावना लग सकता है, लेकिन यह हमेशा एक ही पैटर्न का पालन करता है: यह पता लगाएं कि रंग कितना मजबूत होना चाहिए, रंग पहिये पर एक मूल दिशा चुनें, फिर सब कुछ समायोजित करें ताकि हल्कापन सही हो।
hsl(210, 39%, 17%)
-> rgb(r, g, b)यहाँ hsl(210, 39%, 17%) के लिए एक अधिक विस्तृत विवरण है।
- चरण 1 — सामान्यीकृत करें और क्रोमा की गणना करें:
संतृप्ति और हल्कापन को भिन्नों में बदलें और उनका उपयोग क्रोमा की गणना करने के लिए करें, जो वर्णन करता है कि रंग ग्रे से कितनी दूर जाता है।
s' = 39 / 100 l' = 17 / 100 c = (1 - |2 * l' - 1|) * s' - चरण 2 — ह्यू सेक्टर और बेस ट्रिपल निर्धारित करें:
रंग पहिये पर सेक्टर खोजने के लिए ह्यू को 60 से विभाजित करें, फिर
(c, x, 0)या(0, x, c)जैसे अस्थायी ट्रिपल में से एक चुनें। यह चरण यह चयन करता है कि अंतिम हल्कापन परिवर्तन से पहले कितना लाल, हरा और नीला दिखाई देता है।h = 210 h / 60 is between 3 and 4 temporary triple uses (0, x, c) - चरण 3 — ऑफसेट जोड़ें और RGB में वापस स्केल करें:
प्रत्येक अस्थायी चैनल में ऑफसेट
mजोड़ें ताकि परिणाम में वांछित हल्कापन हो। अंत में, सब कुछ 0 से 255 रेंज में स्केल करें और पूर्णांकों में गोल करें।rgb(26, 43, 60)
एक बार जब आप इन चरणों को समझ लेते हैं, तो आप किसी भी HSL रंग पर समान विधि लागू कर सकते हैं और इसे कोड में या इस पृष्ठ पर कनवर्टर का उपयोग करके आत्मविश्वास से RGB में परिवर्तित कर सकते हैं।
HSL और RGB कहाँ उपयोगी हैं
HSL और RGB एक ही रंगों के बारे में बात करते हैं, लेकिन प्रत्येक प्रारूप विभिन्न परिस्थितियों में चमकता है। HSL पैलेट की योजना बनाने के लिए बेहतर है, जबकि RGB वह प्रारूप है जिसे रेंडरिंग इंजन और कई एपीआई वास्तव में उपभोग करते हैं।
HSL के लिए सामान्य उपयोग
- थीम डिज़ाइन करना: घटकों के बीच ह्यू को स्थिर रखें और लगातार स्केल बनाने के लिए संतृप्ति और हल्कापन को समायोजित करें।
- भिन्नताओं की खोज करना: हल्कापन और संतृप्ति में छोटे बदलाव एक ही मूल रंग के हल्के या गहरे संस्करणों का पूर्वानुमानित उत्पादन करते हैं।
- पैलेट्स का दस्तावेजीकरण करना: जब आप डिज़ाइन स्पेक्स में ब्रांड रंगों का वर्णन करते हैं, तो HSL मान पढ़ने में आसान होते हैं।
RGB के लिए सामान्य उपयोग
- लो लेवल ग्राफिक्स और रेंडरिंग: कई ड्राइंग एपीआई और शेडर कोड RGB मानों की सीधे अपेक्षा करते हैं।
- मौजूदा कोड के साथ इंटरफेसिंग: विरासती शैलियाँ, पुस्तकालय, और डिज़ाइन टोकन अक्सर रंगों को RGB या HEX के रूप में संग्रहीत करते हैं।
- छवियों के साथ काम करना: पिक्सेल डेटा और कई छवि प्रारूप RGB चैनलों पर आधारित होते हैं।
सारांश
जब आप चाहते हैं कि रंग एक-दूसरे के साथ कैसे संबंधित हों, उस पर अधिक नियंत्रण हो। जब उन्हें CSS, ड्राइंग एपीआई, या उन घटकों में पास करने का समय हो जो संख्यात्मक चैनलों की आवश्यकता होती है, तो उन मानों को RGB में परिवर्तित करें।
HSL के साथ RGB का उपयोग करने के लिए व्यावहारिक सुझाव
वास्तविक परियोजनाओं में आप शायद ही कभी केवल एक रंग प्रारूप चुनते हैं। यह सामान्य है कि HSL में सोचना, HEX में टोकन संग्रहीत करना, और रनटाइम पर RGB चैनलों के माध्यम से सब कुछ रेंडर करना।
HSL में पैलेट बनाएं, RGB या HEX में मान संग्रहीत करें
- पहले HSL में प्रयोग करें: जब तक पैलेट सही न लगे तब तक ह्यू, संतृप्ति, और हल्कापन को समायोजित करें। फिर अपने डिज़ाइन टोकन के लिए RGB या HEX में परिवर्तित करें।
- कोड के अनुकूल मान रखें: RGB त्रिकोण प्रोग्रामेटिक हेरफेर के लिए अच्छी तरह से काम करते हैं, जबकि HEX कॉम्पैक्ट और कॉन्फ़िगरेशन फ़ाइलों के लिए सुविधाजनक है।
पारदर्शिता को अलग से संभालें
- HSLA या RGBA का उपयोग करें: बेस रंग को HSL या RGB में रखें और केवल तभी एक अल्फा चैनल जोड़ें जब आपको वास्तव में पारदर्शिता की आवश्यकता हो, जैसे ओवरले या फोकस रिंग।
- टोकन में अल्फा को एन्कोड न करें जब तक आवश्यक न हो: बेस रंग अक्सर पुन: उपयोग करने में आसान होते हैं जब वे पूरी तरह से अपारदर्शी होते हैं।
प्रारूपों को सुसंगत रखें
- प्रत्येक परत के लिए एक संग्रह प्रारूप चुनें: उदाहरण के लिए, डिज़ाइन स्पेक्स के लिए HSL, टोकन के लिए HEX, और RGB का उपयोग करें जहां ग्राफिक्स लाइब्रेरी इसकी मांग करती है।
- हाथ से गणित के बजाय कनवर्टर्स पर भरोसा करें: यह गलतियों को कम करता है और समय के साथ आपके डिज़ाइन सिस्टम को बनाए रखना आसान रखता है।
जब HSL का उपयोग करना है और कब RGB में वापस परिवर्तित करना है, इस पर स्पष्ट रणनीति के साथ, आपका रंग प्रणाली पूर्वानुमानित रहती है और जैसे-जैसे परियोजना बढ़ती है, इसे विकसित करना सरल होता है।
HSL से RGB रूपांतरण तालिका
नीचे दी गई तालिका में कई परिचित रंग HSL और RGB प्रारूपों में लिखे गए हैं। संख्याएँ उन्हें स्कैन करना आसान रखने के लिए गोल की गई हैं जबकि आप लेआउट, थीम, या UI घटकों पर काम कर रहे हैं।
| विवरण | HSL | RGB |
|---|---|---|
| सफेद | hsl(0, 0%, 100%) | rgb(255, 255, 255) |
| काला | hsl(0, 0%, 0%) | rgb(0, 0, 0) |
| लाल | hsl(0, 100%, 50%) | rgb(255, 0, 0) |
| हरा | hsl(120, 100%, 50%) | rgb(0, 255, 0) |
| नीला | hsl(240, 100%, 50%) | rgb(0, 0, 255) |
| पीला | hsl(60, 100%, 50%) | rgb(255, 255, 0) |
| सियान | hsl(180, 100%, 50%) | rgb(0, 255, 255) |
| मैजेंटा | hsl(300, 100%, 50%) | rgb(255, 0, 255) |
| ग्रे 1 | hsl(0, 0%, 7%) | rgb(17, 17, 17) |
| ग्रे 2 | hsl(0, 0%, 20%) | rgb(51, 51, 51) |
| ग्रे 3 | hsl(0, 0%, 33%) | rgb(85, 85, 85) |
| ग्रे 4 | hsl(0, 0%, 47%) | rgb(119, 119, 119) |
| ग्रे 5 | hsl(0, 0%, 60%) | rgb(153, 153, 153) |
| ग्रे 6 | hsl(0, 0%, 80%) | rgb(204, 204, 204) |
| नारंगी | hsl(39, 100%, 50%) | rgb(255, 165, 0) |
| बैंगनी | hsl(300, 100%, 25%) | rgb(128, 0, 128) |
| नीला हरा | hsl(180, 100%, 25%) | rgb(0, 128, 128) |
सटीक काम के लिए, आप हमेशा पृष्ठ के शीर्ष पर कनवर्टर का उपयोग कर सकते हैं जो किसी भी मान्य इनपुट के लिए मानक HSL से RGB एल्गोरिदम का पालन करता है।
अक्सर पूछे जाने वाले प्रश्न: HSL से RGB
- HSL को RGB में वापस क्यों परिवर्तित करें
कई उपकरण और डिज़ाइन सिस्टम पैलेट की योजना बनाने के लिए HSL को प्राथमिकता देते हैं, लेकिन ब्राउज़र और ग्राफिक्स पुस्तकालय अक्सर RGB या HEX की अपेक्षा करते हैं। रूपांतरण आपको एक आरामदायक डिज़ाइन कार्यप्रवाह बनाए रखने की अनुमति देता है जबकि अभी भी आपके स्टैक द्वारा आवश्यक प्रारूपों को वितरित करता है।
- H, S, और L कौन से रेंज का उपयोग करते हैं
Hue 0 से 360 डिग्री में मापा जाता है, और संतृप्ति और हल्कापन 0 प्रतिशत से 100 प्रतिशत तक के प्रतिशत होते हैं। CSS आमतौर पर इसे
hsl(h, s%, l%)के रूप में लिखता है। - क्या RGB में परिवर्तित करने से रंग बदलता है
नहीं। HSL और RGB बस एक ही रंग स्थान के दो प्रतिनिधित्व हैं। एक सही तरीके से परिवर्तित RGB त्रिकोण मूल HSL मान के समान दिखाई देगा जब इसे रेंडर किया जाएगा।
- मैं HSL और RGB के साथ पारदर्शिता को कैसे संभालूं
जब आपको अल्फा चैनल की आवश्यकता हो तो
hsla()याrgba()का उपयोग करें। दोनों नोटेशन बेस रंग प्रारूप को एक चौथे पैरामीटर के साथ विस्तारित करते हैं जो अपारदर्शिता को नियंत्रित करता है। - क्या मैं एक परियोजना में HSL, RGB, और HEX मिला सकता हूँ
हाँ। एक सामान्य दृष्टिकोण यह है कि टोकन के लिए सत्य के स्रोत के रूप में एक प्रारूप चुनें और सभी अन्य मामलों के लिए कनवर्टर्स पर भरोसा करें। यह आपके सिस्टम को लचीला रखता है बिना स्थिरता का त्याग किए।