HSL मा रंग छान्न सहज हुन्छ, तर stylesheet, design handoffs र ब्रान्ड दस्तावेजहरू अझै HEX मा चल्छन्। यो कन्वर्टरले दुबैको खाडल बन्द गर्छ र कुनै पनि hue, saturation र lightness को संयोजनको लागि six-digit कोड दिन्छ।
HSL बाट HEX रूपान्तरण कसरी काम गर्छ
- saturation र lightness लाई भिन्नाङ्कमा बदल: 60% ले 0.6 हुन्छ।
- chroma C = (1 − |2L − 1|) × S गणना गर — यो रंग ग्रेबाट कति टाढा छ भन्ने संकेत हो।
- ह्यूको प्रयोग गरी त्यो chroma लाई रातो, हरियो र नीलो च्यानलमा राख र त्यसपछि सबैलाई L − C/2 ले सार।
- प्रत्येक च्यानललाई 255 ले गुणा गर, राउन्ड गर, र दुई hexadecimal अंकको रूपमा लेख।
कार्यकुशल उदाहरण
राउन्डिङ अन्तिम चरणमै एक पटक मात्र हुन्छ, जब प्रत्येक च्यानललाई 0–255 को पूर्ण मानमा नजिक गरिन्छ। नतिजा सामान्यतया तिम्रो HSL इनपुटको सबैभन्दा नजिकको HEX कोड हो र प्रायः डिजाइन टूलले देखाउने जस्तै नै हुन्छ।
HSL र HEX व्याख्या
HSL के हो?
HSL ले रंगलाई ह्युआ (रंगचक्रमा 0–360°), स्याचुरेसन (कति रङगार, 0–100%) र लाइटनेस (कति उज्यालो, 0–100%) मा विभाजन गर्छ। प्रत्येक भागले मानिसहरूले रंगलाई वर्णन गर्ने तरिकासँग मेल खानाले HSL टिन्ट, शेड र सुसंगत प्यालेटहरू — हातले वा कोडमा — बनाउन सजिलो बनाउँछ।
- सिन्ट्याक्स:
- hsl(H, S%, L%)
- सीमा:
- 0–360°, 0–100%, 0–100%
- उत्तम प्रयोग:
- प्यालेटहरू, टिन्ट र शेड, थिमिङ
HEX के हो?
HEX कोड एउटा छैठौं-डिजिट हेक्साडेसिमल संख्या हो जसले अग्रशिर # पछाडि रङको रातो, हरियो र निलो च्यानल भण्डारण गर्छ। प्रत्येक दुई अंकले एउटा च्यानल कभर गर्छ, 00 (कुनै) देखि FF (पूर्ण) सम्म, जसले RGB जस्तै 16.7 मिलियन रंगहरू छोटो नोटेशनमा दिन्छ। HEX CSS, डिजाइन टूल र ब्राण्ड गाइडलाइनहरूमा पूर्वनिर्धारित हुन्छ।
- सिन्ट्याक्स:
- #RRGGBB
- सीमा:
- च्यानलप्रति 00–FF
- उत्तम प्रयोग:
- CSS, डिजाइन ह्यान्डअफ, ब्रान्ड गाइडलाइन
HSL बाट HEX सन्दर्भ तालिका
सबैभन्दा सामान्य CSS रंगहरू, HSL बाट HEX मा रूपान्तरण गरिएको।
| रंग | HSL | HEX |
|---|---|---|
| black | hsl(0, 0%, 0%) | #000000 |
| white | hsl(0, 0%, 100%) | #FFFFFF |
| red | hsl(0, 100%, 50%) | #FF0000 |
| lime | hsl(120, 100%, 50%) | #00FF00 |
| blue | hsl(240, 100%, 50%) | #0000FF |
| yellow | hsl(60, 100%, 50%) | #FFFF00 |
| orange | hsl(39, 100%, 50%) | #FFA600 |
| teal | hsl(180, 100%, 25%) | #007F80 |
| purple | hsl(300, 100%, 25%) | #80007F |
| gray | hsl(0, 0%, 50%) | #808080 |