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