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

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

#2ECC71

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

HSL नतिजा
ह्यू
145°
सैचुरेसन
63%
लाइटनेस
49%

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

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

HSL ले रंगलाई मानिसहरूले बोल्ने तरिकाले वर्णन गर्छ: कुन hue, कति रंगीन, कति उज्यालो। HEX कोडलाई HSL मा रूपान्तरण गर्नु रंगलाई तिव्र रूपमा यस्तो रूप दिन्छ जसमा तिमीले साँच्चिकै समायोजन गर्न सक्छौ — हल्का बनाउन, म्यूट गर्न वा त्यसबाट पूर्ण स्केल बनाउनु।

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

  1. HEX कोडलाई RGB मा बदल र प्रत्येक च्यानललाई 255 ले भाग गर, ता कि ती सबै 0 र 1 को बीचमा बसून्।
  2. ती तीन मानमध्ये सबभन्दा ठूलो र सबभन्दा सानो पहिचान गर। तिनीहरूको औसत नै lightness L हो।
  3. उनीहरूबीचको फैलावटले saturation S लाई चलाउँछ: उज्यालो रंगहरूको लागि यसलाई (2 − max − min) ले भाग गर, वा अँध्यारा रंगहरूको लागि (max + min) ले भाग गर।
  4. सबैभन्दा बढी राख्ने च्यानलले hue H निर्धारण गर्छ — रातो 0°, हरियो 120°, नीलो 240° — र बाँकी दुई च्यानलले उक्त सेग्मेन्ट भित्र hue को स्थिति बताउँछन्।

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

HEX #2ECC71=HSL hsl(145, 63%, 49%)

गणितिक रुपमा ठिक हुन्छ, तर 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 मा रूपान्तरण गरिएको।

रंगHEXHSL
black#000000hsl(0, 0%, 0%)
white#FFFFFFhsl(0, 0%, 100%)
red#FF0000hsl(0, 100%, 50%)
lime#00FF00hsl(120, 100%, 50%)
blue#0000FFhsl(240, 100%, 50%)
yellow#FFFF00hsl(60, 100%, 50%)
orange#FFA500hsl(39, 100%, 50%)
teal#008080hsl(180, 100%, 25%)
purple#800080hsl(300, 100%, 25%)
gray#808080hsl(0, 0%, 50%)

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

HEX कोडलाई RGB मा बदल र प्रत्येक च्यानललाई 255 ले भाग गर, ता कि ती सबै 0 र 1 को बीचमा बसून्। ती तीन मानमध्ये सबभन्दा ठूलो र सबभन्दा सानो पहिचान गर। तिनीहरूको औसत नै lightness L हो। उनीहरूबीचको फैलावटले saturation S लाई चलाउँछ: उज्यालो रंगहरूको लागि यसलाई (2 − max − min) ले भाग गर, वा अँध्यारा रंगहरूको लागि (max + min) ले भाग गर। सबैभन्दा बढी राख्ने च्यानलले hue H निर्धारण गर्छ — रातो 0°, हरियो 120°, नीलो 240° — र बाँकी दुई च्यानलले उक्त सेग्मेन्ट भित्र hue को स्थिति बताउँछन्।

गणितिक रुपमा ठिक हुन्छ, तर HSL मानहरू सामान्यतया पूर्ण डिग्री र प्रतिशतमा घुमाइन्छन्। त्यसैले फिर्ता परिवर्तन गर्दा मूल RGB भन्दा एक वा दुई कदम टाढा आउन सक्छ — व्यवहारमा अनुप्रेक्ष्य, तर बारम्बार राउन्ड-ट्रिप गर्दा जान्नै पर्ने कुरा हो।

HSL ले रंगलाई ह्युआ (रंगचक्रमा 0–360°), स्याचुरेसन (कति रङगार, 0–100%) र लाइटनेस (कति उज्यालो, 0–100%) मा विभाजन गर्छ। प्रत्येक भागले मानिसहरूले रंगलाई वर्णन गर्ने तरिकासँग मेल खानाले HSL टिन्ट, शेड र सुसंगत प्यालेटहरू — हातले वा कोडमा — बनाउन सजिलो बनाउँछ।

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

रंगका भेरिएसन चाहिँदैछ भने तुरुन्त HSL मा स्विच गर। H र S स्थिर राखेर केवल L सँग खेल्दा तिमीले स्थिर tint र shade स्केल पाउनेछौ, जुन HEX मा हातले गर्न धेरै गाह्रो हुन्छ।