RGB से HSL कन्वर्टर
किसी डिज़ाइन टूल को खोले बिना या हाथ से गणना किए बिना rgb(r, g, b) मानों को HSL में और वापस बदलें। कन्वर्टर तब उपयोगी होता है जब आप आधुनिक CSS लिखते हैं या रंग टोकन के साथ काम करते हैं जिन्हें HSL स्पेस में समायोजित करना आसान होता है।
RGB प्रारूप में एक रंग टाइप करें और आप तुरंत मिलान करने वाला HSL ट्रिपलेट देखेंगे। उल्टा दिशा भी समर्थित है, इसलिए आप अपने वर्तमान फ़ाइल के साथ मेल खाने वाले सिंटैक्स से शुरू कर सकते हैं और फिर आवश्यकता पड़ने पर दूसरे में स्विच कर सकते हैं।
इस पृष्ठ पर आपको RGB और HSL का क्या मतलब है, इसका संक्षिप्त विवरण, एक स्पष्ट चरण-दर-चरण सूत्र, और अक्सर उपयोग किए जाने वाले रंगों के साथ एक छोटा संदर्भ तालिका मिलेगी जो दोनों नोटेशन में लिखी गई है।
RGB क्या है
RGB मॉडल एक रंग का वर्णन तीन प्रकाश घटकों के मिश्रण के रूप में करता है: लाल, हरा, और नीला। प्रत्येक चैनल को 0 से 255 तक के पूर्णांक द्वारा दर्शाया गया है, जहाँ 0 का अर्थ है इस चैनल से कोई योगदान नहीं और 255 का अर्थ है अधिकतम तीव्रता।
जब तीन चैनल मिलाए जाते हैं, तो वे उन पिक्सेल को बनाते हैं जो आप स्क्रीन पर देखते हैं। उदाहरण के लिए, rgb(255, 255, 255) सफेद है, rgb(0, 0, 0) काला है, और rgb(0, 128, 255) एक संतृप्त हल्का नीला है।
चूंकि RGB साधारण संख्याओं का उपयोग करता है, यह गतिशील प्रभावों के लिए अच्छा काम करता है: ग्रेडिएंट, एनिमेटेड संक्रमण, या उत्पन्न पैलेट सभी को तीन संख्यात्मक चैनलों में बदलाव के रूप में व्यक्त किया जा सकता है।
HSL क्या है
HSL का अर्थ है Hue, Saturation, और Lightness। यह RGB द्वारा उपयोग किए जाने वाले समान रंग स्पेस को पुनर्गठित करता है लेकिन ऐसे पैरामीटर का उपयोग करता है जो डिज़ाइन कार्य में पढ़ने और समझने में आसान होते हैं।
Hue को रंग पहिये के साथ 0 से 360 डिग्री में मापा जाता है। उदाहरण के लिए, लाल 0 के करीब है, हरा 120 के करीब है, और नीला 240 के आसपास है। Saturation और lightness को 0% से 100% तक प्रतिशत के रूप में लिखा जाता है।
कम संतृप्ति मूल्य रंग को एक तटस्थ ग्रे के करीब ले जाता है। Lightness यह नियंत्रित करता है कि रंग कितना गहरा या उज्ज्वल है: 0% काला उत्पन्न करता है, 50% hue का एक जीवंत संस्करण देता है, और 100% सफेद उत्पन्न करता है। इसलिए, HSL अक्सर पैलेट और उपयोगकर्ता इंटरफेस में स्थिति भिन्नताओं के निर्माण के लिए अधिक सहज लगता है।
RGB से HSL सूत्र
rgb(r, g, b) -> hsl(h, s, l)
1) चैनलों को [0, 1] में सामान्यीकृत करें:
r' = r / 255
g' = g / 255
b' = b / 255
2) max और min ज्ञात करें:
max = max(r', g', b')
min = min(r', g', b')
delta = max - min
3) प्रकाशता की गणना करें:
l = (max + min) / 2
4) संतृप्ति की गणना करें:
यदि delta == 0 तो
s = 0
अन्यथा
s = delta / (1 - |2 * l - 1|)
5) ह्यू की गणना करें:
यदि delta == 0 तो
h = 0
अन्यथा यदि max == r' तो
h = 60 * (((g' - b') / delta) mod 6)
अन्यथा यदि max == g' तो
h = 60 * (((b' - r') / delta) + 2)
अन्यथा यदि max == b' तो
h = 60 * (((r' - g') / delta) + 4)
6) अंतिम इकाइयों में बदलें:
H = h // [0, 360) में डिग्री
S = s * 100 // प्रतिशत
L = l * 100 // प्रतिशतएल्गोरिदम मूल RGB जानकारी को बनाए रखता है लेकिन इसे एक अलग तरीके से व्यक्त करता है। Lightness सबसे उज्ज्वल और सबसे गहरे चैनल के औसत पर आधारित है, संतृप्ति इस बात पर निर्भर करती है कि चैनल कितनी दूर फैले हुए हैं, और hue यह निर्धारित करता है कि कौन सा घटक प्रमुख है।
rgb(79, 163, 194) के लिए उदाहरण
1) r, g, b को [0, 1] रेंज में सामान्यीकृत करें
2) max, min, delta की गणना करें
3) ऊपर दिए गए नियमों का उपयोग करके h, s, l की गणना करें
4) राउंडेड परिणाम:
hsl(196, 49%, 54%)RGB से HSL रूपांतरण कैसे काम करता है चरण दर चरण
हर RGB से HSL रूपांतरण एक ही संरचना का पालन करता है: चैनलों को स्केल करें, उन्हें एक-दूसरे से तुलना करें, और hue, saturation, और lightness की गणना करने के लिए उनके बीच के संबंधों का उपयोग करें।
rgb(26, 43, 60)
[26, 43, 60] -> hsl(h, s, l)आइए rgb(26, 43, 60) का उदाहरण लेते हुए चरणों को अधिक विस्तार से देखें।
- चरण 1 — चैनलों को सामान्य करें:
r' = 26 / 255 g' = 43 / 255 b' = 60 / 255 - चरण 2 — अधिकतम, न्यूनतम, और lightness खोजें:
अधिकतम और न्यूनतम चैनल आपको बताते हैं कि रंग कितना उज्ज्वल हो सकता है। उनका औसत lightness बनता है, जो मोटे तौर पर यह दर्शाता है कि रंग स्क्रीन पर कितना हल्का या गहरा दिखता है।
max = max(r', g', b') min = min(r', g', b') l = (max + min) / 2 - चरण 3 — संतृप्ति और hue की गणना करें:
यदि सभी तीन चैनल लगभग समान हैं, तो रंग ग्रे के करीब है और संतृप्ति कम है। जब एक चैनल स्पष्ट रूप से प्रमुख होता है, तो संतृप्ति बढ़ती है और hue उस रंग पहिये के खंड की ओर इशारा करता है जहाँ वह चैनल सबसे मजबूत होता है।
hsl(210, 39%, 17%)
आप किसी भी मान्य RGB रंग पर समान विधि लागू कर सकते हैं: मानों को सामान्य करें, lightness की गणना करें, संतृप्ति निकालें, और अंततः प्रमुख चैनल से hue की गणना करें।
RGB और HSL के बीच चयन करना
RGB और HSL समान रंगों का वर्णन करते हैं लेकिन विभिन्न पहलुओं पर जोर देते हैं। RGB तीन संख्यात्मक चैनलों पर ध्यान केंद्रित करता है, जबकि HSL आधार hue, रंग की तीव्रता, और यह कितना हल्का या गहरा दिखता है, पर ध्यान केंद्रित करता है।
जब RGB उपयोगी होता है
- ग्राफिक्स और कोड में निम्न स्तर का कार्य: कई APIs और छवि प्रारूप सीधे RGB मानों के साथ काम करते हैं।
- चैनल आधारित प्रभाव: आप फ़िल्टर, ग्रेडिएंट, या संक्रमण बनाते समय JavaScript या CSS में एकल चैनल को समायोजित कर सकते हैं।
- मौजूदा कोड के साथ इंटरऑपरेबिलिटी: विरासत शैलियाँ और पुस्तकालय अक्सर RGB या HEX मानों की अपेक्षा करते हैं, इसलिए RGB एक स्वाभाविक प्रारंभिक बिंदु है।
जब HSL बेहतर फिट होता है
- पैलेट और स्थितियों का डिज़ाइन करना: संतृप्ति और lightness को बदलते हुए hue को स्थिर रखना एक ही आधार रंग से hover, सक्रिय, और निष्क्रिय स्थितियों को बनाना आसान बनाता है।
- सूक्ष्म भिन्नताओं का अन्वेषण करना: lightness में छोटे परिवर्तन अक्सर RGB चैनलों में सीधे समायोजनों की तुलना में अधिक पूर्वानुमानित लगते हैं।
- थीमिंग के साथ काम करना: HSL टोकन पढ़ने और समायोजित करने में आसान होते हैं जब आप एक इंटरफेस के लिए हल्की और गहरी दोनों थीम बनाए रखते हैं।
सारांश
RGB का उपयोग करें जब आपको स्पष्ट चैनल नियंत्रण की आवश्यकता हो या जब कोई API उस प्रारूप की अपेक्षा करता हो। HSL को प्राथमिकता दें जब आप पैलेट बनाते हैं, डिज़ाइन टोकन परिभाषित करते हैं, या रंग मान चाहते हैं जो मनुष्यों के लिए समायोजित और चर्चा करना आसान हो।
HSL पैलेट बनाने के लिए व्यावहारिक सुझाव
कई टीमें रंगों को एक प्रारूप में संग्रहीत करती हैं लेकिन उनके बारे में दूसरे में सोचती हैं। यह सामान्य है कि HEX या RGB मानों को कोड में रखा जाता है जबकि HSL में भिन्नताओं का अन्वेषण किया जाता है ताकि एक अधिक संरचित रंग प्रणाली प्राप्त हो सके।
ब्रांड रंगों के लिए Hue को स्थिर रखें
- Hue को स्थिर रखें, संतृप्ति और lightness को बदलें: यह ऐसे रंगों का उत्पादन करता है जो अभी भी उसी ब्रांड रंग की तरह महसूस होते हैं लेकिन पृष्ठभूमियों, सीमाओं, और उच्चारण जैसे विभिन्न UI भूमिकाओं के लिए काम करते हैं।
- सतहों के लिए कम संतृप्ति का उपयोग करें: एक hue के म्यूटेड संस्करण अक्सर पैनल और कार्ड के लिए अधिक आरामदायक होते हैं, जबकि उच्च संतृप्ति बटन और प्रमुख हाइलाइट्स के लिए बेहतर काम करती है।
HSL और अन्य CSS प्रारूपों के बीच चलें
- टोकन के लिए एक बार रूपांतरित करें: आप HSL में रंगों के साथ प्रयोग कर सकते हैं और फिर अंतिम मानों को अपने डिज़ाइन टोकन में HSL, RGB, या HEX के रूप में फ्रीज कर सकते हैं।
- अल्फा को अलग से मानें: पारदर्शिता के लिए, आप
hsla()याrgba()फ़ंक्शंस का उपयोग कर सकते हैं जबकि अभी भी HSL में आधार रंग के बारे में सोचते हैं।
सामान्य गलतियों से बचें
- एक फ़ाइल में बहुत सारे प्रारूप मिलाना: टोकन के लिए एक प्राथमिक नोटेशन चुनें और जब आपको आवश्यकता हो तो अन्य प्रारूपों में परिवर्तित करें।
- विपरीत की अनदेखी करना: जब lightness को समायोजित करते हैं, तो हमेशा जांचें कि पाठ और आइकन पृष्ठभूमि रंग के शीर्ष पर कैसे दिखते हैं।
- गहराई के लिए केवल lightness का उपयोग करना: बेहतर पैलेट आमतौर पर संतृप्ति और lightness दोनों को समायोजित करते हैं बजाय इसके कि एकल स्लाइडर पर निर्भर रहें।
HSL के लिए एक सुसंगत रणनीति और स्पष्ट रूपांतरण नियमों के साथ, आपका रंग प्रणाली विभिन्न थीमों और घटकों के बीच समझने और बनाए रखने में आसान हो जाती है।
RGB से HSL रूपांतरण तालिका
नीचे दी गई तालिका में RGB और HSL प्रारूपों में परिचित रंगों का एक सेट सूचीबद्ध है। स्पष्टता के लिए मानों को गोल किया गया है, जिससे तालिका आपके डिज़ाइन या थीम लागू करते समय त्वरित संदर्भ के रूप में सुविधाजनक हो जाती है।
| विवरण | RGB | HSL |
|---|---|---|
| सफेद | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| काला | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| लाल | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| हरा | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| नीला | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| पीला | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| सियान | rgb(0, 255, 255) | hsl(180, 100%, 50%) |
| मैजेंटा | rgb(255, 0, 255) | hsl(300, 100%, 50%) |
| ग्रे 1 | rgb(17, 17, 17) | hsl(0, 0%, 7%) |
| ग्रे 2 | rgb(51, 51, 51) | hsl(0, 0%, 20%) |
| ग्रे 3 | rgb(85, 85, 85) | hsl(0, 0%, 33%) |
| ग्रे 4 | rgb(119, 119, 119) | hsl(0, 0%, 47%) |
| ग्रे 5 | rgb(153, 153, 153) | hsl(0, 0%, 60%) |
| ग्रे 6 | rgb(204, 204, 204) | hsl(0, 0%, 80%) |
| नारंगी | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| बैंगनी | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| नीला हरा | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
किसी अन्य RGB ट्रिपलेट के लिए आप पृष्ठ के शीर्ष पर कन्वर्टर पर भरोसा कर सकते हैं, जो मान्य इनपुट के लिए मानक RGB से HSL एल्गोरिदम को लागू करता है।
FAQ: RGB से HSL
- मैं RGB को HSL में क्यों परिवर्तित करूँ?
RGB संग्रहण और निम्न स्तर के ग्राफिक्स कार्य के लिए सुविधाजनक है, लेकिन HSL संरचित पैलेट बनाने और डिज़ाइन निर्णयों के बारे में बात करने में आसान बनाता है। प्रारूपों के बीच चलने से आपको पूर्वानुमानित गणित को रंग के अधिक मानव-अनुकूल वर्णन के साथ संयोजित करने की अनुमति मिलती है।
- H, S, और L कौन से रेंज का उपयोग करते हैं?
Hue को 0 से 360 डिग्री में लिखा जाता है। Saturation और lightness 0 प्रतिशत से 100 प्रतिशत तक प्रतिशत होते हैं, यही कारण है कि कई डिज़ाइन टूल उन्हें प्रतिशत लेबल के साथ स्लाइडर के रूप में दिखाते हैं।
- क्या HSL में परिवर्तित करने से रंग बदलता है?
नहीं। HSL और RGB बस एक ही रंग स्पेस को एन्कोड करने के दो विभिन्न तरीके हैं। एक मान्य RGB ट्रिपलेट और इसका HSL समकक्ष स्क्रीन पर एक ही दृश्य रंग का वर्णन करते हैं।
- HSL HSV से कैसे भिन्न है?
दोनों मॉडल hue और saturation साझा करते हैं, लेकिन तीसरा मान अलग तरीके से परिभाषित किया गया है। HSL lightness का उपयोग करता है, जो रंग की तुलना काले और सफेद दोनों से करता है, जबकि HSV value का उपयोग करता है, जो रंग की तुलना केवल काले से करता है।
- क्या मैं एक परियोजना में RGB, HSL, HEX, और अन्य प्रारूपों को मिला सकता हूँ?
हाँ। एक सामान्य दृष्टिकोण यह है कि डिज़ाइन टोकन के लिए एक मुख्य नोटेशन चुनें, जैसे HSL या HEX, और जब कोई विशेष API इसकी आवश्यकता हो तो RGB या अन्य प्रारूपों में परिवर्तित करें। कुंजी यह है कि परिवर्तनों को स्वचालित रखें और मैन्युअल पुनर्गणन से बचें।