HSL उस तरीके से रंग बताता है जैसा लोग बोलकर समझाते हैं: कौन सा hue, कितना रंगीन (saturation), कितना चमकीला (lightness)। HEX को HSL में बदलना तेज़ तरीका है जिससे तुम रंग को सचमुच छेड़छाड़ कर सको — उसे हल्का करना, मंद करना या उसी से पूरी स्केल बनाना।
HEX से HSL कन्वर्ज़न कैसे काम करता है
- HEX को RGB में बदलो और प्रत्येक चैनल को 255 से भाग करो, ताकि तीनों मान 0 और 1 के बीच आ जाएँ।
- इन तीनों मानों में सबसे बड़ा और सबसे छोटा खोजो। इनका औसत ही lightness L है।
- इनके बीच का फैलाव saturation S को नियंत्रित करता है: हल्के रंगों के लिए इसे (2 − max − min) से भाग करो, और गहरे रंगों के लिए (max + min) से।
- जिस चैनल में अधिकतम होता है वही hue H तय करता है — लाल 0°, हरा 120°, नीला 240° — और बाकी दो चैनल उस सेगमेंट के अंदर hue की पोजिशन तय करते हैं।
काम करने का उदाहरण
गणित सटीक है, लेकिन 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 में कन्वर्ट किए गए।
| रंग | HEX | HSL |
|---|---|---|
| black | #000000 | hsl(0, 0%, 0%) |
| white | #FFFFFF | hsl(0, 0%, 100%) |
| red | #FF0000 | hsl(0, 100%, 50%) |
| lime | #00FF00 | hsl(120, 100%, 50%) |
| blue | #0000FF | hsl(240, 100%, 50%) |
| yellow | #FFFF00 | hsl(60, 100%, 50%) |
| orange | #FFA500 | hsl(39, 100%, 50%) |
| teal | #008080 | hsl(180, 100%, 25%) |
| purple | #800080 | hsl(300, 100%, 25%) |
| gray | #808080 | hsl(0, 0%, 50%) |