HSL ले रंगलाई मानिसहरूले बोल्ने तरिकाले वर्णन गर्छ: कुन hue, कति रंगीन, कति उज्यालो। HEX कोडलाई HSL मा रूपान्तरण गर्नु रंगलाई तिव्र रूपमा यस्तो रूप दिन्छ जसमा तिमीले साँच्चिकै समायोजन गर्न सक्छौ — हल्का बनाउन, म्यूट गर्न वा त्यसबाट पूर्ण स्केल बनाउनु।
HEX बाट HSL रूपान्तरण कसरी काम गर्छ
- HEX कोडलाई RGB मा बदल र प्रत्येक च्यानललाई 255 ले भाग गर, ता कि ती सबै 0 र 1 को बीचमा बसून्।
- ती तीन मानमध्ये सबभन्दा ठूलो र सबभन्दा सानो पहिचान गर। तिनीहरूको औसत नै lightness L हो।
- उनीहरूबीचको फैलावटले saturation S लाई चलाउँछ: उज्यालो रंगहरूको लागि यसलाई (2 − max − min) ले भाग गर, वा अँध्यारा रंगहरूको लागि (max + min) ले भाग गर।
- सबैभन्दा बढी राख्ने च्यानलले hue H निर्धारण गर्छ — रातो 0°, हरियो 120°, नीलो 240° — र बाँकी दुई च्यानलले उक्त सेग्मेन्ट भित्र hue को स्थिति बताउँछन्।
कार्यकुशल उदाहरण
गणितिक रुपमा ठिक हुन्छ, तर HSL मानहरू सामान्यतया पूर्ण डिग्री र प्रतिशतमा घुमाइन्छन्। त्यसैले फिर्ता परिवर्तन गर्दा मूल RGB भन्दा एक वा दुई कदम टाढा आउन सक्छ — व्यवहारमा अनुप्रेक्ष्य, तर बारम्बार राउन्ड-ट्रिप गर्दा जान्नै पर्ने कुरा हो।
HEX र HSL व्याख्या
HEX के हो?
HEX कोड एउटा छैठौं-डिजिट हेक्साडेसिमल संख्या हो जसले अग्रशिर # पछाडि रङको रातो, हरियो र निलो च्यानल भण्डारण गर्छ। प्रत्येक दुई अंकले एउटा च्यानल कभर गर्छ, 00 (कुनै) देखि FF (पूर्ण) सम्म, जसले RGB जस्तै 16.7 मिलियन रंगहरू छोटो नोटेशनमा दिन्छ। HEX CSS, डिजाइन टूल र ब्राण्ड गाइडलाइनहरूमा पूर्वनिर्धारित हुन्छ।
- सिन्ट्याक्स:
- #RRGGBB
- सीमा:
- च्यानलप्रति 00–FF
- उत्तम प्रयोग:
- CSS, डिजाइन ह्यान्डअफ, ब्रान्ड गाइडलाइन
HSL के हो?
HSL ले रंगलाई ह्युआ (रंगचक्रमा 0–360°), स्याचुरेसन (कति रङगार, 0–100%) र लाइटनेस (कति उज्यालो, 0–100%) मा विभाजन गर्छ। प्रत्येक भागले मानिसहरूले रंगलाई वर्णन गर्ने तरिकासँग मेल खानाले HSL टिन्ट, शेड र सुसंगत प्यालेटहरू — हातले वा कोडमा — बनाउन सजिलो बनाउँछ।
- सिन्ट्याक्स:
- hsl(H, S%, L%)
- सीमा:
- 0–360°, 0–100%, 0–100%
- उत्तम प्रयोग:
- प्यालेटहरू, टिन्ट र शेड, थिमिङ
HEX बाट HSL सन्दर्भ तालिका
सबैभन्दा सामान्य CSS रंगहरू, HEX बाट HSL मा रूपान्तरण गरिएको।
| रंग | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |