ImageColorPicker.com

HEX से HSL कनवर्टर

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

#2ECC71

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

HSL परिणाम
ह्यू
145°
सैचुरेशन
63%
लाइटनेस
49%

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

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

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

सिंटैक्स:
#RRGGBB
रेंज:
00–FF प्रति चैनल
उपयुक्त:
CSS, डिजाइन हैंडऑफ़, ब्रांड गाइडलाइंस

HSL क्या है?

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

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

जैसे ही तुम्हें रंग के वेरिएंट चाहिए, HSL पर स्विच कर लो। H और S को फिक्स रखकर सिर्फ L बदलना तुम्हें स्थिर tint और shade स्केल देता है, जो HEX में हाथ से करना काफी मुश्किल है।