RGB से HSL क्या है?
RGB किसी रंग को लाल (Red), हरा (Green) और नीला (Blue) रोशनी मिलाकर दर्शाता है, और हर चैनल की वैल्यू 0 से 255 के बीच होती है। वहीं HSL उसी रंग को तीन ज़्यादा समझने-योग्य संख्याओं से बताता है: ह्यू (कलर व्हील पर रंग की स्थिति, 0-360°), सैचुरेशन (रंग कितना गाढ़ा या चटक है, 0-100%) और लाइटनेस (रंग कितना हल्का या गहरा है, 0-100%)। डिज़ाइनरों के लिए HSL के साथ काम करना अक्सर आसान होता है, क्योंकि लाइटनेस या सैचुरेशन बदलने का सीधा मतलब होता है — "हल्का", "गहरा", "ज़्यादा चटक" या "ज़्यादा भूरा"।
इस कन्वर्टर का इस्तेमाल कैसे करें
अपने रंग की लाल, हरी और नीली वैल्यू डालें — हर एक 0 से 255 के बीच। कैलकुलेटर तुरंत उसके बराबर का HSL मान दिखा देगा, जिसे आप सीधे CSS में hsl(H, S%, L%) के रूप में पेस्ट कर सकते हैं।
फॉर्मूला आसान शब्दों में
सबसे पहले हर चैनल को 255 से भाग देकर 0 और 1 के बीच नॉर्मलाइज़ किया जाता है। मान लें कि इनमें से सबसे बड़ी वैल्यू max और सबसे छोटी min है। लाइटनेस \(L = (max + min) / 2\) होती है। अगर max और min बराबर हैं, तो रंग भूरे (ग्रे) का कोई शेड है, इसलिए सैचुरेशन और ह्यू दोनों 0 होते हैं। अन्यथा, जब \(L > 0.5\) हो तो सैचुरेशन \(= (max - min) / (2 - max - min)\) होती है, और जब \(L \le 0.5\) हो तो \((max - min) / (max + min)\)। ह्यू इस बात से तय होती है कि कौन-सा चैनल सबसे बड़ा (max) है, और फिर उसे डिग्री (0-360) में बदला जाता है।
$$L = \frac{C_{max} + C_{min}}{2}, \quad S = \begin{cases} \dfrac{\Delta}{2 - C_{max} - C_{min}} & L > 0.5 \\[0.6em] \dfrac{\Delta}{C_{max} + C_{min}} & L \le 0.5 \end{cases}$$ $$\text{where}\quad \left\{ \begin{aligned} R &= \frac{\text{Red}}{255}, \; G = \frac{\text{Green}}{255}, \; B = \frac{\text{Blue}}{255} \\ C_{max} &= \max(R,G,B), \; C_{min} = \min(R,G,B), \; \Delta = C_{max} - C_{min} \end{aligned} \right.$$ $$H = 60^{\circ} \times \begin{cases} \left(\dfrac{G - B}{\Delta}\right) \bmod 6 & C_{max} = R \\[0.7em] \dfrac{B - R}{\Delta} + 2 & C_{max} = G \\[0.7em] \dfrac{R - G}{\Delta} + 4 & C_{max} = B \end{cases}$$
हल किया हुआ उदाहरण
टमाटर जैसे लाल RGB(255, 99, 71) के लिए: नॉर्मलाइज़्ड \(= (1.0, 0.388, 0.278)\)। \(max = 1.0\), \(min = 0.278\), इसलिए \(L = 0.639 \to 63.9\%\)। चूँकि \(L > 0.5\), इसलिए $$S = (1.0 - 0.278) / (2 - 1.0 - 0.278) = 0.722 / 0.722 = 1.0 \to 100\%$$ यहाँ max लाल है, तो $$H = 60 \times ((0.388 - 0.278) / 0.722) = 60 \times 0.1525 = 9.1^{\circ}$$ नतीजा: hsl(9, 100%, 64%)।
अक्सर पूछे जाने वाले सवाल
ग्रे रंगों के लिए ह्यू 0 क्यों होती है? जब लाल, हरा और नीला बराबर हों तो कोई प्रमुख रंग नहीं रहता, इसलिए ह्यू अपरिभाषित होती है और परंपरा के अनुसार इसे 0 बताया जाता है।
क्या HSL और HSV/HSB एक ही हैं? नहीं। HSL और HSV में ह्यू एक जैसी होती है, पर सैचुरेशन और तीसरी वैल्यू अलग तरीके से निकाली जाती हैं; यह टूल HSL देता है।
क्या मैं नतीजे को सीधे CSS में पेस्ट कर सकता हूँ? हाँ — आधुनिक ब्राउज़र hsl(9, 100%, 64%) को सीधे एक कलर वैल्यू के रूप में स्वीकार कर लेते हैं।
