MCP के माध्यम से कनेक्ट करें →

गणना दर्ज करें

सूत्र (फॉर्मूला)

विज्ञापन

परिणाम

Hex कलर कोड
#4080BF
लाल 64
हरा 128
नीला 191
RGB rgb(64, 128, 191)

HSL से Hex कन्वर्टर क्या है?

यह टूल HSL मॉडल — यानी Hue (रंग), Saturation (संतृप्ति) और Lightness (चमक) — में दर्शाए गए किसी रंग को हेक्साडेसिमल नोटेशन में बदल देता है, जिसका इस्तेमाल CSS, डिज़ाइन सॉफ़्टवेयर और वेब डेवलपमेंट में होता है। HSL इंसानों के लिए समझना आसान है क्योंकि Hue रंग-चक्र पर रंग चुनता है, Saturation यह तय करता है कि रंग कितना गहरा-चटक है, और Lightness बताता है कि वह कितना हल्का या गाढ़ा है। वहीं Hex (जैसे #3F7FBF) वह फ़ॉर्मेट है जिसे ब्राउज़र और टूल असल में पढ़ते हैं।

HSL color model shown as a cylinder with hue around the circumference, saturation along the radius and lightness up the vertical axis
The HSL color model: hue (angle), saturation (radius) and lightness (height).

इसका इस्तेमाल कैसे करें

Hue को 0 से 360 डिग्री के बीच, Saturation को 0 से 100 प्रतिशत और Lightness को 0 से 100 प्रतिशत के बीच डालें, फिर तुरंत नतीजे में Hex कोड, RGB चैनल वैल्यू और एक लाइव कलर स्वैच देखें। यह कन्वर्ज़न सार्वभौमिक है और किसी भी रंग पर काम करता है — कोई सॉफ़्टवेयर इंस्टॉल करने की ज़रूरत नहीं।

फ़ॉर्मूला समझें

कन्वर्ज़न सबसे पहले क्रोमा निकालता है: \( C = (1 - |2L - 1|)\cdot S \), जहाँ S और L को 0–1 के अंश के रूप में लिया जाता है। एक सहायक मान \( X = C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \) प्राथमिक रंगों के बीच के क्रमिक बदलाव (ग्रेडिएंट) को संभालता है, और एक ब्राइटनेस ऑफ़सेट \( m = L - \tfrac{C}{2} \) नतीजे को सही चमक तक उठाता है। Hue जिस 60° के खंड में पड़ता है, उसके अनुसार (R′,G′,B′) चैनल C, X और 0 में से तय होते हैं। हर अंतिम चैनल \( \text{round}((c^{\prime} + m)\cdot 255) \) होता है, और Hex स्ट्रिंग बस R, G और B के दो-अंकीय हेक्साडेसिमल को जोड़कर बनती है।

$$\text{Hex} = \texttt{\#}\,\text{HH}_{R}\,\text{HH}_{G}\,\text{HH}_{B}$$$$\text{where}\quad \left\{ \begin{aligned} C &= (1 - |2L - 1|)\cdot S \\ X &= C\left(1 - \left|\left(\tfrac{H}{60}\bmod 2\right) - 1\right|\right) \\ m &= L - \tfrac{C}{2} \\ (R,G,B) &= \text{round}\big((R^{\prime}+m,\,G^{\prime}+m,\,B^{\prime}+m)\cdot 255\big) \\ H &= \text{Hue},\quad S = \dfrac{\text{Sat}}{100},\quad L = \dfrac{\text{Light}}{100} \end{aligned} \right.$$
विज्ञापन
Flat process diagram showing HSL values transformed into RGB channels and then into a hex code
Conversion flow: HSL values map to intermediate C, X, m, then to RGB and finally a hex string.

हल किया गया उदाहरण

HSL(210, 50%, 50%) के लिए: S = 0.5, L = 0.5, तो \( C = (1 - |0|)\cdot 0.5 = 0.5 \)। \( H/60 = 3.5 \), तो \( (3.5 \bmod 2) = 1.5 \) और \( X = 0.5\cdot(1 - |0.5|) = 0.25 \)। \( m = 0.5 - 0.25 = 0.25 \)। Hue 210 खंड 3 (180–240) में आता है, जिससे (R′,G′,B′) = (0, X, C)। तो \( R = \text{round}(0.25\cdot 255) = 64 \), \( G = \text{round}(0.5\cdot 255) = 128 \), \( B = \text{round}(0.75\cdot 255) = 191 \) → #4080BF

विज्ञापन
Single example color swatch with its HSL, RGB and hex representations side by side
A worked example: one color shown as HSL, RGB and its resulting hex code.

अक्सर पूछे जाने वाले सवाल

क्या Hue चारों ओर घूमकर वापस आता है? हाँ — 360 का Hue वही लाल रंग है जो 0 का है, और यह टूल किसी भी वैल्यू को 0–360 की सीमा में सामान्य कर देता है।

मेरे चैनल कभी-कभी एक अंक से अलग क्यों दिखते हैं? नज़दीकी पूर्णांक तक राउंड करने से किसी चैनल में ±1 का फ़र्क आ सकता है, उन टूल्स की तुलना में जो वैल्यू को सीधे काट (truncate) देते हैं; राउंड करना ज़्यादा सटीक तरीका है।

क्या ग्रे रंग बन सकता है? हाँ — Saturation को 0 कर दें और कोई भी Hue रखें, तो तीनों चैनल \( \text{round}(L\cdot 255) \) के बराबर होंगे, जिससे एक न्यूट्रल ग्रे रंग बनता है।

अंतिम अपडेट: