HSLA से RGBA कनवर्टर

कोई भी hsla(h, s, l, a) मानों को rgba(r, g, b, a) में बिना हाथ से सूत्र लिखे बदलें। यह कनवर्टर तब उपयोगी होता है जब डिज़ाइन निर्णय HSLA में वर्णित होते हैं, लेकिन आपका CSS या रेंडरिंग कोड RGBA की अपेक्षा करता है।

HSLA नोटेशन में एक रंग टाइप करें और आप तुरंत मिलते-जुलते RGBA मान देखेंगे। आप फिर rgba() फ़ंक्शन को शैलियों, कीफ्रेम्स, या कैनवास ड्राइंग रूटीन में कॉपी कर सकते हैं।

इस पृष्ठ पर आपको HSLA और RGBA का संक्षिप्त स्पष्टीकरण, एक रूपांतरण सूत्र, एक चरण-दर-चरण उदाहरण, एक संदर्भ तालिका, और प्रत्येक प्रारूप का उपयोग कब करना है, इस पर एक FAQ भी मिलेगा।

HSLA क्या है

HSLA एचएसएल रंग मॉडल है जिसमें एक अल्फा चैनल होता है। इसे hsla(h, s, l, a) के रूप में लिखा जाता है, जहाँ h रंग, s संतृप्ति, l प्रकाशता, और a पारदर्शिता मान है।

रंग को 0 से 360 डिग्री में मापा जाता है। संतृप्ति और प्रकाशता 0% से 100% प्रतिशत के बीच होती हैं। अल्फा 0 (पूर्ण पारदर्शी) से 1 (पूर्ण अपारदर्शी) के बीच एक संख्या है।

HSLA पैलेट और थीम के साथ काम करने के लिए सुविधाजनक है क्योंकि आप एक रंग के बारे में उसके मूल रंग, इसकी तीव्रता, यह कितना उज्ज्वल या गहरा दिखता है, और यह कितना पारदर्शी होना चाहिए, के संदर्भ में बात कर सकते हैं।

RGBA क्या है

RGBA RGB मॉडल है जिसमें एक अल्फा चैनल होता है। इसे rgba(r, g, b, a) के रूप में लिखा जाता है, जहाँ r, g, और b 0 से 255 तक पूर्णांक होते हैं, और a 0 और 1 के बीच एक भिन्न होता है।

तीन रंग चैनल यह परिभाषित करते हैं कि कितनी लाल, हरी, और नीली रोशनी मौजूद है, जबकि अल्फा पारदर्शिता को नियंत्रित करता है। यह प्रारूप CSS, HTML कैनवास, और कई ग्राफिक्स API में व्यापक रूप से उपयोग किया जाता है।

चूंकि RGBA कच्चे संख्यात्मक चैनलों का उपयोग करता है, यह रनटाइम गणनाओं, क्लैंपिंग, और प्रभावों के लिए सुविधाजनक है जिन्हें प्रत्येक घटक तक सीधी पहुँच की आवश्यकता होती है।

HSLA से RGBA रूपांतरण सूत्र

hsla(h, s, l, a) -> rgba(r, g, b, a)

Given:
  h in [0, 360)
  s in [0, 100]
  l in [0, 100]
  a in [0, 1]

1) Clamp inputs:
   h_c = h
   s_c = clamp(s, 0, 100)
   l_c = clamp(l, 0, 100)
   a_c = clamp(a, 0, 1)

2) Normalize saturation and lightness:
   s' = s_c / 100
   l' = l_c / 100

3) Compute chroma:
   c = (1 - |2 * l' - 1|) * s'

4) Helper value:
   x = c * (1 - |((h_c / 60) mod 2) - 1|)

5) Temporary rgb triple in [0, c]:
   if      0 <= h_c < 60   then (r1, g1, b1) = (c, x, 0)
   else if 60 <= h_c < 120 then (r1, g1, b1) = (x, c, 0)
   else if 120 <= h_c < 180 then (r1, g1, b1) = (0, c, x)
   else if 180 <= h_c < 240 then (r1, g1, b1) = (0, x, c)
   else if 240 <= h_c < 300 then (r1, g1, b1) = (x, 0, c)
   else                      (r1, g1, b1) = (c, 0, x)

6) Add the lightness offset:
   m  = l' - c / 2
   r' = r1 + m
   g' = g1 + m
   b' = b1 + m

7) Scale to final RGB:
   r = round(r' * 255)
   g = round(g' * 255)
   b = round(b' * 255)

8) Compose RGBA:
   rgba(r, g, b, a_c)

Helper:
   clamp(x, min, max) = min if x < min, max if x > max, else x

अल्फा मान HSLA इनपुट से सीधे कॉपी किया जाता है, क्योंकि दोनों प्रारूप पारदर्शिता के लिए समान 0 से 1 रेंज का उपयोग करते हैं। सभी कार्य HSL से RGB रूपांतरण चरण में होता है, जो रंग, संतृप्ति, और प्रकाशता को चैनल मानों में बदलता है।

hsla(196, 49%, 54%, 0.8) के लिए उदाहरण
1) s और l को [0, 1] में सामान्य करें और c और x की गणना करें
2) रंग क्षेत्र के आधार पर अस्थायी ट्रिपल खोजें
3) प्रत्येक चैनल में m जोड़ें और 0-255 तक स्केल करें
4) गोल RGB:
   rgb(79, 163, 194)
5) अंतिम RGBA:
   rgba(79, 163, 194, 0.8)

HSLA से RGBA रूपांतरण कैसे काम करता है चरण-दर-चरण

अंदर से, HSLA से RGBA रूपांतरण बस परिचित HSL से RGB एल्गोरिदम है जिसमें अल्फा घटक का एक पास शामिल है। आप रंग का वर्णन करने का तरीका बदलते हैं, यह नहीं कि यह कैसे दिखाई देता है।

hsla(210, 39%, 17%, 0.5)
-> hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> rgba(r, g, b, 0.5)

यहाँ hsla(210, 39%, 17%, 0.5) के लिए एक अधिक ठोस स्केच है।

  • चरण 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 - ऑफसेट जोड़ें और अल्फा कॉपी करें

    इस तरह से जोड़ें कि परिणाम लक्षित प्रकाशता हो, 0 से 255 तक स्केल करें, और फिर RGBA प्राप्त करने के लिए मूल अल्फा मान को संलग्न करें।

    rgba(26, 43, 60, 0.5)

यह प्रक्रिया किसी भी मान्य HSLA इनपुट के लिए काम करती है, यही कारण है कि कनवर्टर या सहायक फ़ंक्शन का उपयोग करना आमतौर पर याद से गणित करने की कोशिश करने की तुलना में अधिक विश्वसनीय होता है।

HSLA और RGBA के बीच चयन करना

HSLA और RGBA दोनों रंग और पारदर्शिता का वर्णन करते हैं, लेकिन वे विभिन्न पहलुओं पर जोर देते हैं। HSLA पैलेट की योजना बनाने के लिए बेहतर है, जबकि RGBA कोड में सीधे हेरफेर के लिए बेहतर है।

जब HSLA अधिक व्यावहारिक हो

  • थीम और पैलेट डिज़ाइन करना: रंग, संतृप्ति, और प्रकाशता के साथ काम करना एक ही मूल रंग के टिंट और शेड बनाने में आसान बनाता है।
  • डिज़ाइन विकल्पों को समझाना: जैसे hsla(210, 40%, 20%, 0.7) मान स्पष्ट रूप से दिखाते हैं कि दो संबंधित रंगों के बीच कौन सा गुण बदला।
  • हल्के और गहरे मोड का समन्वय करना: आप रंग को स्थिर रख सकते हैं और थीम के बीच प्रकाशता को बदल सकते हैं।

जब RGBA बेहतर फिट हो

  • घटक स्तर की शैलियाँ: rgba() मान सीधे शैलियों और CSS-in-JS में पढ़ने में आसान होते हैं।
  • रनटाइम प्रभाव: संख्यात्मक चैनल रंगों को फीका करने या अल्फा को क्लैंप करने के लिए जावास्क्रिप्ट में समायोजित करना सरल है।
  • ग्राफिक्स API के साथ इंटरफेस करना: कई ड्राइंग फ़ंक्शन RGBA इनपुट की अपेक्षा करते हैं।

सारांश

HSLA का उपयोग करें जब आप पैलेट डिज़ाइन और दस्तावेज़ पर काम कर रहे हों। उन मानों को RGBA में परिवर्तित करें जब आप उन्हें कोड में रेंडर या एनिमेट करते हैं।

HSLA और RGBA का एक साथ उपयोग करने के लिए सर्वोत्तम प्रथाएँ

आप एक ही प्रोजेक्ट में HSLA और RGBA को सुरक्षित रूप से मिला सकते हैं जब तक आप प्रत्येक प्रारूप को अपने कार्यप्रवाह में एक स्पष्ट भूमिका दें।

सत्य का स्रोत परिभाषित करें

  • एकल प्रारूप में टोकन स्टोर करें: कई टीमें डिज़ाइन टोकन के लिए HSLA या HEX चुनती हैं और रेंडरिंग के करीब RGBA में परिवर्तित करती हैं।
  • हाथ से डुप्लिकेशन से बचें: HSLA टोकन के RGBA संस्करण उत्पन्न करने के लिए उपयोगिताओं या निर्माण चरणों का उपयोग करें।

अन्य रंग नोटेशनों के साथ मिलाएं

  • RGB के माध्यम से परिवर्तित करें: अधिकांश पुस्तकालय HSL, RGB, HEX, और HSV के बीच RGB को पुल के रूप में उपयोग करके स्थानांतरित करने का समर्थन करते हैं।
  • रंग उत्पन्न करते समय मानों को क्लैंप करें: जब आप नए मान उत्पन्न या एनिमेट करते हैं तो हमेशा रंग, संतृप्ति, प्रकाशता, और अल्फा को उनके मान्य रेंज में रखें।

सिस्टम को बनाए रखने योग्य रखें

  • यह दस्तावेज करें कि प्रारूप कहाँ उपयोग किए जाते हैं: उदाहरण के लिए, टोकन और दस्तावेज़ों के लिए HSLA, निम्न स्तर की शैली कोड में RGBA, निर्यातित पैलेट के लिए HEX।
  • हाथ से संपादित करने के बजाय कनवर्टर्स का उपयोग करें: यह पैलेट को समन्वयित रखता है और थीम को फिर से तैयार करते समय गलतियों को कम करता है।

इन सम्मेलनों के साथ, HSLA और RGBA एक-दूस Complement करते हैं बजाय प्रतिस्पर्धा करने के, और आपका रंग प्रणाली समय के साथ विकसित करना आसान रहती है।

HSLA से RGBA रूपांतरण तालिका

नीचे दी गई तालिका में कई सामान्य रंगों को HSLA और RGBA रूपों में पारदर्शिता के साथ दिखाया गया है। मान पढ़ने में आसान बनाने के लिए गोल किए गए हैं, इसलिए सटीक कार्य के लिए पृष्ठ के शीर्ष पर कनवर्टर का उपयोग करें।

HSLA से RGBA संदर्भ तालिका
विवरणHSLARGBA
सफेद 50%hsla(0, 0%, 100%, 0.5)rgba(255, 255, 255, 0.5)
काला 50%hsla(0, 0%, 0%, 0.5)rgba(0, 0, 0, 0.5)
लाल 80%hsla(0, 100%, 50%, 0.8)rgba(255, 0, 0, 0.8)
हरा 40%hsla(120, 100%, 50%, 0.4)rgba(0, 255, 0, 0.4)
नीला 30%hsla(240, 100%, 50%, 0.3)rgba(0, 0, 255, 0.3)
पीला 60%hsla(60, 100%, 50%, 0.6)rgba(255, 255, 0, 0.6)
सियान 70%hsla(180, 100%, 50%, 0.7)rgba(0, 255, 255, 0.7)
मैजेंटा 90%hsla(300, 100%, 50%, 0.9)rgba(255, 0, 255, 0.9)
ओवरले ग्रेhsla(0, 0%, 7%, 0.5)rgba(17, 17, 17, 0.5)
नरम ग्रेhsla(0, 0%, 20%, 0.5)rgba(51, 51, 51, 0.5)
पैनल बॉर्डरhsla(0, 0%, 33%, 0.5)rgba(85, 85, 85, 0.5)
असेंट नारंगी 70%hsla(39, 100%, 50%, 0.7)rgba(255, 165, 0, 0.7)
बैंगनी ओवरलेhsla(300, 100%, 25%, 0.5)rgba(128, 0, 128, 0.5)
टील ओवरलेhsla(180, 100%, 25%, 0.5)rgba(0, 128, 128, 0.5)

किसी अन्य HSLA रंग के लिए, आप पृष्ठ के शीर्ष पर कनवर्टर का उपयोग करके उसी एल्गोरिदम का उपयोग करके सटीक RGBA मान प्राप्त कर सकते हैं।

FAQ: HSLA से RGBA

  • HSLA को RGBA में क्यों परिवर्तित करें

    HSLA पैलेट की योजना बनाने के लिए सुविधाजनक है, लेकिन RGBA अक्सर CSS और रेंडरिंग कोड में बेहतर फिट बैठता है। रूपांतरण आपको एक ही रंगों का मानव-अनुकूल और कार्यान्वयन-अनुकूल दृश्य बनाए रखने की अनुमति देता है।

  • क्या रूपांतरण रंग बदलता है

    नहीं। एक सही तरीके से परिवर्तित RGBA मान मूल HSLA मान के समान दृश्य रंग और पारदर्शिता का प्रतिनिधित्व करता है।

  • H, S, L, और A कौन से रेंज का उपयोग करते हैं

    रंग को 0 से 360 डिग्री में मापा जाता है। संतृप्ति और प्रकाशता 0 प्रतिशत से 100 प्रतिशत के बीच होती हैं। अल्फा 0 और 1 के बीच एक संख्या है।

  • क्या मैं RGBA को HSLA में वापस परिवर्तित कर सकता हूँ

    हाँ। आप RGBA को RGB प्लस अल्फा के रूप में मान सकते हैं, RGB को HSL में परिवर्तित करें, और HSLA के लिए अल्फा घटक का पुन: उपयोग करें।

  • क्या मुझे HSLA या RGBA पर मानकीकरण करना चाहिए

    यह आपके प्रोजेक्ट पर निर्भर करता है। कई टीमें टोकन के लिए HSLA या HEX और कार्यान्वयन के लिए RGBA का उपयोग करती हैं, सभी को समन्वयित रखने के लिए कनवर्टर्स के साथ।

संबंधित कनवर्टर:

सभी रंग कन्वर्टर्स देखें