ImageColorPicker.com

HSL से HEX कनवर्टर

किसी भी HSL रंग को HEX में कन्वर्ट करो — तुरंत और मुफ्त

#3398DB

कोई भी रंग मान पेस्ट करो — हम उसके फॉर्मेट का पता लगा देंगे।

H
S
L
HEX परिणाम

यह रंग हर फ़ॉर्मेट में

CMYK प्रोफ़ाइल: Coated FOGRA39 (यूरोप के लिए Photoshop का डिफ़ॉल्ट)

HSL में रंग चुनना आरामदायक है, लेकिन stylesheets, design handoffs और ब्रांड डॉक्यूमेंट अभी भी HEX पर चलते हैं। यह कन्वर्टर वह गैप बंद कर देता है और किसी भी hue, saturation और lightness कॉम्बिनेशन के लिए छह-अंकीय कोड देता है।

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 एक रंग को hue (0–360° रंग पहिये पर), saturation (कितना रंगीन, 0–100%) और lightness (कितना उज्ज्वल, 0–100%) में बाँटता है। चूँकि हर हिस्सा लोगों के रंग वर्णन से मिलता है, HSL तिन्ट्स, शेड्स और स्थिर पैलेट बनाने के लिए सबसे आसान फ़ॉर्मैट है — हाथ से या कोड में।

सिंटैक्स:
hsl(H, S%, L%)
रेंज:
0–360°, 0–100%, 0–100%
उपयुक्त:
पैलेट, टिंट और शेड, थीमिंग

HEX क्या है?

HEX कोड एक छह अंकों वाली hexadecimal संख्या होती है जो # से शुरू होकर रंग के red, green और blue चैनल को स्टोर करती है। हर दो अंकों का जोड़ा एक चैनल को बताता है, 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 कोड एक छह अंकों वाली hexadecimal संख्या होती है जो # से शुरू होकर रंग के red, green और blue चैनल को स्टोर करती है। हर दो अंकों का जोड़ा एक चैनल को बताता है, 00 (किसी का नहीं) से FF (पूरा) तक, जो कि RGB के 16.7 मिलियन रंगों को छोटी नॉटेशन में देता है। HEX CSS, डिजाइन टूल और ब्रांड गाइडलाइंस में डिफ़ॉल्ट है।

हाँ। इनपुट के बगल में मौजूद स्वैप बटन तुम्हें HEX से HSL कनवर्टर पर ले जाता है, जो बिलकुल उसी तरह काम करता है। दोनों दिशाओं में वही फ़ॉर्मूला इस्तेमाल होता है, बस उल्टा लागू किया जाता है।

palette HSL में बनाओ, फिर HEX एक्सपोर्ट करो। पैलेट अपनी लॉजिक रखता है — वही hue, स्टेप्ड lightness — जबकि दिए गए कोड डेवलपर्स की उम्मीद वाले फॉर्मेट में रहता है।