HSL बाट HEX मा रूपान्तरण

कुनै पनि HSL रंगलाई HEX मा रूपान्तरण गर्नुहोस् — तुरुन्त र निःशुल्क

#3398DB

कुनै पनि रंग मान टाँस्नुहोस् — हामी स्वतः फर्म्याट पहिचान गर्छौं।

H
S
L
HEX नतिजा

यो रंग सबै फर्म्याटहरूमा

CMYK प्रोफाइल: Coated FOGRA39 (युरोपका लागि Photoshop को पूर्वनिर्धारित)

HSL मा रंग छान्न सहज हुन्छ, तर stylesheet, design handoffs र ब्रान्ड दस्तावेजहरू अझै HEX मा चल्छन्। यो कन्वर्टरले दुबैको खाडल बन्द गर्छ र कुनै पनि hue, saturation र lightness को संयोजनको लागि six-digit कोड दिन्छ।

HSL बाट HEX रूपान्तरण कसरी काम गर्छ

  1. saturation र lightness लाई भिन्नाङ्कमा बदल: 60% ले 0.6 हुन्छ।
  2. chroma C = (1 − |2L − 1|) × S गणना गर — यो रंग ग्रेबाट कति टाढा छ भन्ने संकेत हो।
  3. ह्यूको प्रयोग गरी त्यो chroma लाई रातो, हरियो र नीलो च्यानलमा राख र त्यसपछि सबैलाई L − C/2 ले सार।
  4. प्रत्येक च्यानललाई 255 ले गुणा गर, राउन्ड गर, र दुई hexadecimal अंकको रूपमा लेख।

कार्यकुशल उदाहरण

HSL hsl(204, 70%, 53%)=HEX #3398DB

राउन्डिङ अन्तिम चरणमै एक पटक मात्र हुन्छ, जब प्रत्येक च्यानललाई 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 मा रूपान्तरण गरिएको।

रंगHSLHEX
blackhsl(0, 0%, 0%)#000000
whitehsl(0, 0%, 100%)#FFFFFF
redhsl(0, 100%, 50%)#FF0000
limehsl(120, 100%, 50%)#00FF00
bluehsl(240, 100%, 50%)#0000FF
yellowhsl(60, 100%, 50%)#FFFF00
orangehsl(39, 100%, 50%)#FFA600
tealhsl(180, 100%, 25%)#007F80
purplehsl(300, 100%, 25%)#80007F
grayhsl(0, 0%, 50%)#808080

अक्सर सोधिने प्रश्नहरू

saturation र lightness लाई भिन्नाङ्कमा बदल: 60% ले 0.6 हुन्छ। chroma C = (1 − |2L − 1|) × S गणना गर — यो रंग ग्रेबाट कति टाढा छ भन्ने संकेत हो। ह्यूको प्रयोग गरी त्यो chroma लाई रातो, हरियो र नीलो च्यानलमा राख र त्यसपछि सबैलाई L − C/2 ले सार। प्रत्येक च्यानललाई 255 ले गुणा गर, राउन्ड गर, र दुई hexadecimal अंकको रूपमा लेख।

राउन्डिङ अन्तिम चरणमै एक पटक मात्र हुन्छ, जब प्रत्येक च्यानललाई 0–255 को पूर्ण मानमा नजिक गरिन्छ। नतिजा सामान्यतया तिम्रो HSL इनपुटको सबैभन्दा नजिकको HEX कोड हो र प्रायः डिजाइन टूलले देखाउने जस्तै नै हुन्छ।

HEX कोड एउटा छैठौं-डिजिट हेक्साडेसिमल संख्या हो जसले अग्रशिर # पछाडि रङको रातो, हरियो र निलो च्यानल भण्डारण गर्छ। प्रत्येक दुई अंकले एउटा च्यानल कभर गर्छ, 00 (कुनै) देखि FF (पूर्ण) सम्म, जसले RGB जस्तै 16.7 मिलियन रंगहरू छोटो नोटेशनमा दिन्छ। HEX CSS, डिजाइन टूल र ब्राण्ड गाइडलाइनहरूमा पूर्वनिर्धारित हुन्छ।

हो। इनपुटको छेउको स्व्याप बटनले तिमीलाई HEX बाट HSL मा रूपान्तरण गर्ने उपकरणमा लैजान्छ, जुन बिल्कुलै सोही तरिकाले काम गर्छ। दुवै दिशाले एउटै सूत्र प्रयोग गर्छ, केवल उल्टो रूपमा लागू हुन्छ।

पैले HSL मा प्यालेट बनाऊ, अनि HEX मा एक्सपोर्ट गर। प्यालेटले आफ्नो तर्क राख्छ — एउटै hue, कदमदार lightness — र प्रदान गरिएको कोड डेभलपरहरूले अपेक्षा गर्ने फर्म्याटमा हुन्छ।