HSL से HEX कन्वर्टर
HSL रंग मानों को HEX कोड में बदलें, बिना स्प्रेडशीट या मैन्युअल फॉर्मूला इस्तेमाल किए। यह पेज तब काम आता है जब आप पैलेट HSL में बनाते हैं, लेकिन CSS या डिजाइन सिस्टम में अंतिम टोकन छोटे HEX स्ट्रिंग के रूप में रखते हैं।
HSL नोटेशन में रंग दर्ज करें और तुरंत उसका संबंधित HEX कोड प्राप्त करें। आप ह्यू, सैचुरेशन और लाइटनेस के स्लाइडर बदल सकते हैं, देख सकते हैं कि HEX मान कैसे बदलता है, और परिणाम को सीधे अपने प्रोजेक्ट में कॉपी कर सकते हैं।
कन्वर्टर के नीचे आपको HSL और HEX का ओवरव्यू, HSL से HEX एल्गोरिदम का पढ़ने योग्य विवरण, लोकप्रिय रंगों की एक रेफरेंस टेबल, और इन फॉर्मेट्स पर काम करते समय आने वाले सामान्य सवालों का एक छोटा FAQ मिलेगा।
HSL क्या है
HSL का मतलब है Hue, Saturation और Lightness। यह किसी रंग को उसके कलर व्हील पर स्थान, उसकी तीव्रता, और वह कितना गहरा या हल्का है, इन बातों से परिभाषित करता है।
ह्यू को 0 से 360 डिग्री में मापा जाता है। सैचुरेशन और लाइटनेस 0% से 100% तक होती हैं। सैचुरेशन कम होने पर रंग ग्रे की ओर जाता है। लाइटनेस 0% के पास होने पर रंग लगभग काला होता है और 100% के पास होने पर लगभग सफेद।
क्योंकि ये तीनों मान डिजाइन में रंग के बारे में बात करने के तरीके से सीधे जुड़े होते हैं, HSL थीम, टोन स्केल और सेमांटिक पैलेट बनाने में उपयोगी होता है, जहाँ एक ही ब्रांड रंग के अलग-अलग स्टेट्स के बीच अनुमानित बदलाव चाहिए होते हैं।
HEX कलर कोड क्या है
HEX मान RGB रंग को हेक्साडेसिमल नंबर सिस्टम में लिखने का एक कॉम्पैक्ट तरीका है। इसका स्टैंडर्ड फॉर्म #RRGGBB होता है, जहाँ हर जोड़ा रेड, ग्रीन और ब्लू चैनल को दर्शाता है।
हर जोड़ा 00 से FF तक हो सकता है। 00 का मतलब है कि उस चैनल से लगभग कोई रोशनी नहीं जुड़ती, जबकि FF का मतलब पूरी तीव्रता। उदाहरण के लिए, #000000 काला है, #FFFFFF सफेद है, और #FFA500 एक चमकीला नारंगी है।
ब्राउज़र और डिजाइन टूल HEX स्ट्रिंग को पढ़ते हैं, उसे तीन हिस्सों में बाँटते हैं, हर हिस्से को डेसिमल में बदलते हैं, और फिर उसे RGB के रूप में इस्तेमाल करते हैं। इसलिए HEX मूल रूप से RGB मॉडल के ऊपर एक छोटा और पढ़ने योग्य रैपर है, जो CSS, टोकन और साझा पैलेट्स में अच्छी तरह फिट बैठता है।
HSL से HEX फॉर्मूला
hsl(h, s, l) -> #RRGGBB
दिया गया:
h [0, 360) में
s [0, 100] में
l [0, 100] में
1) HSL को RGB में बदलें:
a) सैचुरेशन और लाइटनेस को सामान्यीकृत करें:
s' = s / 100
l' = l / 100
b) क्रोमा की गणना करें:
c = (1 - |2 * l' - 1|) * s'
c) सहायक मान ज्ञात करें:
x = c * (1 - |((h / 60) mod 2) - 1|)
d) एक अस्थायी ट्रिपल चुनें:
यदि 0 <= h < 60 तो (r1, g1, b1) = (c, x, 0)
अन्यथा यदि 60 <= h < 120 तो (r1, g1, b1) = (x, c, 0)
अन्यथा यदि 120 <= h < 180 तो (r1, g1, b1) = (0, c, x)
अन्यथा यदि 180 <= h < 240 तो (r1, g1, b1) = (0, x, c)
अन्यथा यदि 240 <= h < 300 तो (r1, g1, b1) = (x, 0, c)
अन्यथा (r1, g1, b1) = (c, 0, x)
e) ऑफसेट जोड़ें और स्केल करें:
m = l' - c / 2
r' = r1 + m
g' = g1 + m
b' = b1 + m
r = round(r' * 255)
g = round(g' * 255)
b = round(b' * 255)
2) RGB को HEX में बदलें:
RR = dec_to_hex(r)
GG = dec_to_hex(g)
BB = dec_to_hex(b)
dec_to_hex(x) = to_hex(x).padStart(2, "0")
3) भागों को जोड़ें:
#RRGGBBव्यवहार में कन्वर्टर पहले HSL रंग का RGB रूप बनाता है और फिर हर RGB चैनल को हेक्साडेसिमल अंकों की एक जोड़ी में बदलता है। विज़ुअल रंग वही रहता है; केवल नोटेशन HSL से HEX में बदलता है।
hsl(196, 47%, 54%) के लिए उदाहरण
1) ऊपर दिए गए एल्गोरिदम का उपयोग करके HSL को RGB में बदलें
2) मान लें कि राउंडेड RGB परिणाम है:
rgb(79, 163, 194)
3) प्रत्येक चैनल को HEX में बदलें:
79 -> 4F
163 -> A3
194 -> C2
4) अंतिम HEX:
#4FA3C2HSL से HEX कन्वर्ज़न स्टेप-बाय-स्टेप
हालाँकि HSL से HEX का फॉर्मूला कई चरणों में लिखा जाता है, पैटर्न हमेशा एक जैसा होता है। आप ह्यू, सैचुरेशन और लाइटनेस तय करते हैं, उन्हें RGB में बदलते हैं, और फिर RGB को HEX में बदलते हैं।
hsl(210, 39%, 17%)
-> rgb(r, g, b)
-> #RRGGBBयहाँ hsl(210, 39%, 17%) के लिए स्टेप्स को करीब से दिखाया गया है।
- स्टेप 1 — HSL से RGB चैनल निकालना
सैचुरेशन और लाइटनेस को नॉर्मलाइज़ करें, क्रोमा और हेल्पर वैल्यू निकालें, ह्यू सेक्टर तय करें, और एक अस्थायी ट्रिपल बनाएं। इसके बाद ऑफसेट जोड़ें और हर चैनल को
0से255की रेंज में स्केल करें।h = 210, s = 39, l = 17 rgb(26, 43, 60) राउंडिंग के बाद - स्टेप 2 — RGB चैनल को HEX जोड़ों में बदलना
हर चैनल को हेक्साडेसिमल में बदलें और अगर केवल एक अंक हो तो आगे शून्य जोड़ें। इससे यह सुनिश्चित होता है कि अंतिम HEX कोड
#के बाद हमेशा ठीक छह कैरेक्टर का हो।26 -> 1A 43 -> 2B 60 -> 3C - स्टेप 3 — हिस्सों को जोड़कर अंतिम HEX कोड बनाना
तीनों जोड़ों को जोड़ें और शुरुआत में
#लगाएँ। यही मूल HSL रंग का HEX रूप होता है।#1A2B3C
यही प्रक्रिया किसी भी वैध HSL इनपुट पर लागू होती है, इसलिए बार-बार मैन्युअल गणना करने के बजाय कन्वर्टर या यूटिलिटी फ़ंक्शन पर निर्भर रहना आसान होता है।
HSL और HEX के बीच चुनाव
HSL और HEX दोनों फ्रंटएंड काम में आम हैं, लेकिन उनका उपयोग थोड़ा अलग उद्देश्य के लिए होता है। HSL रंगों के आपसी संबंध पर ध्यान देता है, जबकि HEX कॉम्पैक्ट और कॉपी करने में आसान है।
कब HSL ज़्यादा उपयोगी है
- पैलेट डिज़ाइन और इटरेशन: ह्यू को स्थिर रखें और सैचुरेशन व लाइटनेस बदलकर संबंधित टोन के सेट बनाएँ।
- थीम पर काम करना: HSL में लाइटनेस रेंज बदलकर एक ही बेस रंग के लाइट और डार्क वेरिएंट समन्वित किए जा सकते हैं।
- डिज़ाइन फैसलों की व्याख्या:
hsl(210, 40%, 20%)जैसे मान डिजाइन रिव्यू में कच्चे HEX स्ट्रिंग की तुलना में समझाना आसान होता है।
कब HEX बेहतर विकल्प है
- स्टेबल डिजाइन टोकन: HEX स्ट्रिंग छोटी होती हैं और स्टाइल गाइड में ब्रांड रंगों और न्यूट्रल स्केल के अंतिम रूप के तौर पर अच्छी तरह काम करती हैं।
- टूल्स के बीच कॉपी करना: कई एडिटर डिफ़ॉल्ट रूप से रंग HEX में दिखाते और एक्सपोर्ट करते हैं, जिससे उन्हें CSS या कॉन्फ़िगरेशन फाइल में पेस्ट करना आसान होता है।
- रंगों की बड़ी सूचियों को देखना: HEX कोड टेबल या JSON फाइल में पंक्तिबद्ध करना आसान होता है, खासकर जब कई टोकन हों।
सारांश
रंग सिस्टम बनाने और सुधारने के लिए HSL का उपयोग करें। कोड और डॉक्यूमेंटेशन के लिए कॉम्पैक्ट अंतिम रूप चाहिए हो तो इन मानों को HEX में बदलें।
HSL और HEX को साथ इस्तेमाल करने की अच्छी प्रैक्टिस
वास्तविक प्रोजेक्ट्स में आमतौर पर एक ही कलर फॉर्मेट नहीं होता। थोड़ी सी योजना यह तय करने में मदद करती है कि HSL, RGB और HEX कहाँ सबसे उपयुक्त हैं।
एक सोर्स ऑफ़ ट्रुथ तय करें
- टोकन के लिए एक प्राथमिक फॉर्मेट चुनें: उदाहरण के लिए, मास्टर वैल्यू HSL में रखें और कन्वर्टर से HEX या RGB निकालें।
- बिना नियम के फॉर्मेट मिलाने से बचें: स्पष्ट नियम रखने से रिफैक्टर और थीम अपडेट आसान होते हैं।
ज़रूरत पड़ने पर HSL को अन्य नोटेशन के साथ मिलाएँ
- ट्रांसपेरेंसी के लिए HSLA या RGBA का उपयोग करें: बेस रंग ओपेक रह सकते हैं, जबकि ओवरले और शैडो के लिए अलग अल्फा चैनल रखा जा सकता है।
- सीमाओं पर कन्वर्ज़न करें: डिज़ाइन टोकन से CSS या कैनवस कॉल जैसी इम्प्लीमेंटेशन डिटेल्स पर जाते समय ही HSL को HEX या RGB में बदलें।
आम गलतियों पर ध्यान दें
- कॉन्ट्रास्ट और एक्सेसिबिलिटी को नज़रअंदाज़ करना: लाइटनेस बदलते समय यह नियमित रूप से जाँचें कि टेक्स्ट और आइकन पढ़ने योग्य रहें।
- बहुत अधिक सैचुरेशन का उपयोग: बड़े एरिया में बहुत तेज़ रंग थकाने वाले हो सकते हैं; बैकग्राउंड के लिए नरम वेरिएंट बेहतर होते हैं।
- हाथ से बार-बार गणना करना: मैन्युअल गणना की जगह कन्वर्टर का उपयोग करें ताकि थीम और ब्रेकपॉइंट्स में रंग एकसमान रहें।
HSL और HEX के लिए स्पष्ट नियम रखने से डिजाइन काम लचीला रहता है और स्टाइलशीट्स व कंपोनेंट्स में एकरूपता बनी रहती है।
HSL से HEX कन्वर्ज़न टेबल
नीचे दी गई रेफरेंस टेबल में कुछ प्रसिद्ध रंग HSL और HEX दोनों रूपों में दिखाए गए हैं। मान पढ़ने में आसान रखने के लिए राउंड किए गए हैं, ताकि आप थीम और लेआउट पर प्रयोग कर सकें।
| विवरण | HSL | HEX |
|---|---|---|
| सफेद | hsl(0, 0%, 100%) | #FFFFFF |
| काला | hsl(0, 0%, 0%) | #000000 |
| लाल | hsl(0, 100%, 50%) | #FF0000 |
| हरा | hsl(120, 100%, 50%) | #00FF00 |
| नीला | hsl(240, 100%, 50%) | #0000FF |
| पीला | hsl(60, 100%, 50%) | #FFFF00 |
| सायन | hsl(180, 100%, 50%) | #00FFFF |
| मैजेंटा | hsl(300, 100%, 50%) | #FF00FF |
| ग्रे 1 | hsl(0, 0%, 7%) | #111111 |
| ग्रे 2 | hsl(0, 0%, 20%) | #333333 |
| ग्रे 3 | hsl(0, 0%, 33%) | #555555 |
| ग्रे 4 | hsl(0, 0%, 47%) | #777777 |
| ग्रे 5 | hsl(0, 0%, 60%) | #999999 |
| ग्रे 6 | hsl(0, 0%, 80%) | #CCCCCC |
| नारंगी | hsl(39, 100%, 50%) | #FFA500 |
| बैंगनी | hsl(300, 100%, 25%) | #800080 |
| टील | hsl(180, 100%, 25%) | #008080 |
किसी भी अन्य HSL संयोजन के लिए आप पेज के ऊपर दिए गए कन्वर्टर पर भरोसा कर सकते हैं, जो स्टैंडर्ड HSL से RGB से HEX एल्गोरिदम का उपयोग करके सटीक मान निकालता है।
FAQ: HSL से HEX
- HSL को HEX में क्यों बदलें
HSL पैलेट डिजाइन और एडजस्टमेंट के लिए सुविधाजनक है, जबकि HEX कॉम्पैक्ट है और कोड व टूल्स में व्यापक रूप से समर्थित है। कन्वर्ज़न से आप डिजाइन वर्कफ़्लो लचीला रख सकते हैं और फिर भी स्टेबल HEX टोकन इस्तेमाल कर सकते हैं।
- H, S और L की रेंज क्या होती है
ह्यू 0 से 360 डिग्री में लिखा जाता है, और सैचुरेशन व लाइटनेस 0 प्रतिशत से 100 प्रतिशत तक होती हैं। CSS में यह
hsl(h, s%, l%)के रूप में लिखा जाता है। - क्या HEX में बदलने से रंग बदलता है
नहीं। HSL, RGB और HEX सभी एक ही कलर स्पेस को दर्शाते हैं। गणना सही होने पर HSL रंग और उसका HEX रूप स्क्रीन पर एक जैसा ही दिखेगा।
- ट्रांसपेरेंसी कैसे दिखाएँ
HEX में
#RRGGBBAAजैसा एक्सटेंडेड फॉर्म होता है, जहाँ आखिरी दो अंक अल्फा चैनल बताते हैं। आपhsla()याrgba()का भी उपयोग कर सकते हैं। - क्या एक ही प्रोजेक्ट में HSL, HEX और RGB मिला सकते हैं
हाँ। एक आम तरीका यह है कि पैलेट HSL में परिभाषित हों, अंतिम मान HEX या RGB टोकन के रूप में स्टोर हों, और टूलिंग या यूटिलिटी फ़ंक्शन से फॉर्मेट्स के बीच ऑटोमैटिक कन्वर्ज़न हो।