RGBA से HSLA कनवर्टर

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

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

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

RGBA क्या है

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

अल्फा मान पारदर्शिता को नियंत्रित करता है: 0 पूरी तरह से पारदर्शी है, 1 पूरी तरह से अपारदर्शी है, और इनके बीच के मान आंशिक पारदर्शिता उत्पन्न करते हैं। यह RGBA को ओवरले, छायाएँ, और नरम संक्रमणों के लिए एक अच्छा विकल्प बनाता है।

चूंकि RGBA संख्यात्मक चैनल का उपयोग करता है, इसलिए इसे JavaScript में उत्पन्न करना या एनिमेट करना और कैनवास और WebGL रेंडरिंग APIs में प्लग करना आसान है।

HSLA क्या है

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

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

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

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

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

Given:
  r, g, b in [0, 255]
  a in [0, 1]

1) Clamp channels:
   r_c = clamp(round(r), 0, 255)
   g_c = clamp(round(g), 0, 255)
   b_c = clamp(round(b), 0, 255)
   a_c = clamp(a,        0, 1)

2) Normalize RGB to [0, 1]:
   r' = r_c / 255
   g' = g_c / 255
   b' = b_c / 255

3) Find max and min:
   max = max(r', g', b')
   min = min(r', g', b')
   delta = max - min

4) Lightness:
   l = (max + min) / 2

5) Saturation:
   if delta == 0 then s' = 0
   else s' = delta / (1 - |2 * l - 1|)

6) Hue:
   if delta == 0 then h = 0
   else if max == r' then h = 60 * (((g' - b') / delta) mod 6)
   else if max == g' then h = 60 * (((b' - r') / delta) + 2)
   else if max == b' then h = 60 * (((r' - g') / delta) + 4)

7) Scale to final units:
   H = h
   S = s' * 100
   L = l * 100

8) Compose HSLA:
   hsla(H, S%, L%, a_c)

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

लाल, हरा, और नीला मान पहले 0 से 1 की सीमा में सामान्यीकृत होते हैं, फिर मानक सूत्रों का उपयोग करके HSL में परिवर्तित होते हैं। अल्फा घटक को बिना बदले पारित किया जाता है, क्योंकि RGBA और HSLA दोनों अपारदर्शिता के लिए समान 0 से 1 की सीमा का उपयोग करते हैं।

rgba(79, 163, 194, 0.8) के लिए उदाहरण
1) क्लैम्प:
   r_c = 79, g_c = 163, b_c = 194, a_c = 0.8
2) सामान्यीकरण और H, S, और L की गणना:
   hsl(196, 49%, 54%) (गोल)
3) अंतिम HSLA:
   hsla(196, 49%, 54%, 0.8)

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

व्यवहार में, RGBA से HSLA में परिवर्तित करना एक अलग समन्वय प्रणाली में उसी रंग का फिर से वर्णन करना है जबकि समान पारदर्शिता मान बनाए रखते हुए।

rgba(26, 43, 60, 0.5)
-> rgb(r, g, b)
-> hsl(h, s, l)
-> hsla(h, s, l, a)

यहाँ rgba(26, 43, 60, 0.5) के लिए प्रक्रिया का एक अधिक विस्तृत खाका है।

  • चरण 1 - RGB चैनलों को सामान्यीकृत करें

    लाल, हरा, और नीला मानों को अंशों में परिवर्तित करें और उनमें से अधिकतम और न्यूनतम खोजें। ये मान लाइटनेस और संतृप्ति के लिए आधार होते हैं।

    r' = 26 / 255
g' = 43 / 255
b' = 60 / 255
  • चरण 2 - लाइटनेस और संतृप्ति की गणना करें

    लाइटनेस सबसे उज्ज्वल और सबसे अंधेरे चैनल का औसत है। उनके बीच का फैलाव यह परिभाषित करता है कि रंग ग्रे से कितना दूर है और संतृप्ति की गणना करने के लिए उपयोग किया जाता है।

    max = max(r', g', b')
min = min(r', g', b')
l = (max + min) / 2
if delta == 0 then s = 0 else s = delta / (1 - |2 * l - 1|)
  • चरण 3 - ह्यू निकालें और अल्फा बनाए रखें

    ह्यू इस पर निर्भर करता है कि कौन सा चैनल सबसे बड़ा है और अन्य इसके साथ कैसे तुलना करते हैं। अल्फा घटक को मूल RGBA मान से सीधे कॉपी किया जाता है।

    hsla(210, 39%, 17%, 0.5)

एक बार जब आप इस पैटर्न को समझ लेते हैं, तो RGBA को आपके रनटाइम प्रारूप के रूप में और HSLA को दस्तावेज़ीकरण और पैलेट डिज़ाइन के लिए एक अधिक वर्णनात्मक प्रतिनिधित्व के रूप में मानना आसान हो जाता है।

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

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

जब RGBA एक अच्छा विकल्प है

  • कार्यान्वयन और रेंडरिंग: RGBA मानों को कैनवास APIs, WebGL, और निम्न स्तर के रेंडरिंग कोड में प्लग करना आसान है।
  • गतिशील प्रभाव: JavaScript में संख्यात्मक चैनलों या अल्फा को समायोजित करना RGBA के साथ सीधा है।
  • छवि प्रारूपों के साथ इंटरऑप: कई फ़ाइल प्रारूप और पाइपलाइन आंतरिक रूप से RGBA चैनल डेटा का उपयोग करते हैं।

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

  • पैलेट और थीम डिज़ाइन: ह्यू, संतृप्ति, और लाइटनेस के साथ काम करना टिंट, शेड, और एक्सेंट रंगों के बारे में सोचना आसान बनाता है।
  • डिज़ाइन दस्तावेज़: HSLA मान अक्सर विशिष्टताओं और दिशानिर्देशों में पढ़ने और तुलना करने में आसान होते हैं।
  • इरादे को संप्रेषित करना: "कम संतृप्ति और उच्च लाइटनेस के साथ नीला" के रूप में रंग का वर्णन करना सीधे HSLA पैरामीटर पर मानचित्रित होता है।

सारांश

RGBA का उपयोग करें जब आप रेंडरिंग के करीब हों या कोड में संख्यात्मक नियंत्रण की आवश्यकता हो। HSLA का उपयोग करें जब आप रंग प्रणालियों को डिज़ाइन करते हैं, पैलेट को समायोजित करते हैं, या दृश्य निर्णयों का दस्तावेज़ीकरण करते हैं।

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

आपको पूरे प्रोजेक्ट के लिए केवल एक प्रारूप चुनने की आवश्यकता नहीं है। कुछ सरल नियमों के साथ, RGBA और HSLA एक साथ साफ-सुथरे तरीके से काम कर सकते हैं।

कार्यान्वयन से टोकन अलग करें

  • टोकन और दस्तावेज़ों के लिए HSLA का उपयोग करें: ह्यू, संतृप्ति, और लाइटनेस के संदर्भ में पैलेट विकल्पों को संग्रहीत और समझाएं।
  • जहाँ आप ड्रॉ करते हैं वहाँ RGBA का उपयोग करें: जब शैलियों को लिखते हैं या कैनवास पर रेंडर करते हैं, तो HSLA को RGBA में परिवर्तित करें।

अन्य रंग मॉडलों के साथ संयोजन करें

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

सिस्टम को पूर्वानुमानित रखें

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

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

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

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

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

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

अक्सर पूछे जाने वाले प्रश्न: RGBA से HSLA

  • RGBA को HSLA में परिवर्तित करने का कारण क्या है

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

  • क्या RGBA और HSLA विभिन्न रंगों का वर्णन करते हैं

    नहीं। दोनों मॉडल समान RGB आधारित रंग स्थान को कवर करते हैं। एक सही तरीके से परिवर्तित HSLA मान मूल RGBA मान के समान रंग और अपारदर्शिता का प्रतिनिधित्व करता है।

  • क्या परिवर्तित करते समय अल्फा मान बदलता है

    अधिकांश कार्यप्रवाहों में अल्फा मान को RGBA से HSLA में सीधे कॉपी किया जाता है। दोनों प्रारूप अपारदर्शिता के लिए समान 0 से 1 की सीमा का उपयोग करते हैं।

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

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

  • क्या मुझे टोकन RGBA या HSLA के रूप में संग्रहीत करना चाहिए

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

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

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