RGB ले स्क्रिनलाई कति प्रकाश निकाल्ने भनेर बताउँछ; HSL ले रंग कस्तो देखिन्छ भनेर बताउँछ। तीन च्यानलहरूलाई hue, saturation र lightness मा रूपान्तरण गर्दा रंगलाई हातले समायोजन गर्न सजिलो हुन्छ।
RGB बाट HSL रूपान्तरण कसरी काम गर्छ
- R, G र B लाई 255 ले भाग गर ताकि प्रत्येक मान 0 र 1 को बीचमा बसून्।
- ती तीनमध्ये अधिकतम र न्यूनतम लिईयो — तिनीहरूको औसत नै lightness L हो।
- यदि अधिकतम र न्यूनतम बराबर छन् भने रंग ग्रे हो: hue र saturation दुवै 0 हुन्छन्।
- अर्को अवस्थामा S लाई अधिकतम र न्यूनतम बीचको फैलावटबाट निकाल र H पढ जस च्यानलले अधिकतम मान धारण गरेको छ।
कार्यकुशल उदाहरण
सिद्धान्तमा ठिकठाक। किनभने H, S र L प्रायः घुमाइएका पूर्ण संख्यामा देखाइन्छन्, फिर्ता रूपान्तरण गर्दा कुनै च्यानल एक-दुई कदमले सर्न सक्छ।
RGB र HSL व्याख्या
RGB के हो?
RGB ले रंगलाई प्रकाशका तीन च्यानल—रातो, हरियो र निलो—को रूपमा वर्णन गर्छ, प्रत्येक 0 देखि 255 सम्म। यो स्क्रीनहरू कसरी काम गर्दछन् भनी झल्किन्छ: सबै तीन 255 मा सेट हुँदा सेतो आउँछ, सबै 0 हुँदा कालो। जब पनि तिमीले रंगसँग गणना गर्नुपर्ने हुन्छ RGB उपयुक्त छ, र rgba() ले माथि पारदर्शिता थप्छ।
- सिन्ट्याक्स:
- rgb(R, G, B)
- सीमा:
- च्यानलप्रति 0–255
- उत्तम प्रयोग:
- कोड, क्यानभास, rgba() संग पारदर्शिता
HSL के हो?
HSL ले रंगलाई ह्युआ (रंगचक्रमा 0–360°), स्याचुरेसन (कति रङगार, 0–100%) र लाइटनेस (कति उज्यालो, 0–100%) मा विभाजन गर्छ। प्रत्येक भागले मानिसहरूले रंगलाई वर्णन गर्ने तरिकासँग मेल खानाले HSL टिन्ट, शेड र सुसंगत प्यालेटहरू — हातले वा कोडमा — बनाउन सजिलो बनाउँछ।
- सिन्ट्याक्स:
- hsl(H, S%, L%)
- सीमा:
- 0–360°, 0–100%, 0–100%
- उत्तम प्रयोग:
- प्यालेटहरू, टिन्ट र शेड, थिमिङ
RGB बाट HSL सन्दर्भ तालिका
सबैभन्दा सामान्य CSS रंगहरू, RGB बाट HSL मा रूपान्तरण गरिएको।
| रंग | RGB | HSL |
|---|---|---|
| black | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| white | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| red | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| lime | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| blue | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| yellow | rgb(255, 255, 0) | hsl(60, 100%, 50%) |
| orange | rgb(255, 165, 0) | hsl(39, 100%, 50%) |
| teal | rgb(0, 128, 128) | hsl(180, 100%, 25%) |
| purple | rgb(128, 0, 128) | hsl(300, 100%, 25%) |
| gray | rgb(128, 128, 128) | hsl(0, 0%, 50%) |