HEX से HSL कनवर्टर
HEX रंग कोड को बिना हाथ से गणना किए HSL मानों में बदलें। यह कनवर्टर फ्रंटएंड डेवलपमेंट, डिजाइन सिस्टम, थीमिंग और उन स्थितियों में उपयोगी है जहाँ रंग को hue, saturation और lightness के आधार पर नियंत्रित किया जाता है।
HEX फॉर्मेट में रंग दर्ज करें और तुरंत उसका संबंधित HSL मान प्राप्त करें। आवश्यकता होने पर आप HSL में रंग समायोजित कर सकते हैं और फिर अपने वर्कफ़्लो में उसे वापस HEX में बदल सकते हैं।
डार्क और लाइट थीम बनाते समय, कॉन्ट्रास्ट समायोजित करते समय या टोन स्केल तैयार करते समय HSL को समझना अक्सर आसान होता है। यह पेज बताता है कि यह फॉर्मेट कैसे काम करता है और HEX से HSL में परिवर्तन कैसे किया जाता है।
HEX रंग कोड क्या है?
HEX रंग छह अक्षरों का मान होता है, जो हेक्साडेसिमल संख्या प्रणाली में लिखा जाता है और #RRGGBB फॉर्मेट में होता है। हर दो अक्षर एक रंग चैनल को दर्शाते हैं: लाल, हरा या नीला।
इन जोड़ों का मान 00 से FF तक होता है। 00 के करीब मान का अर्थ है कि उस चैनल से बहुत कम रोशनी आती है। FF के करीब मान का अर्थ है कि चैनल की तीव्रता अधिक है। उदाहरण के लिए, #000000 में लाल, हरा और नीला बिल्कुल नहीं होता, जबकि #FFFFFF में तीनों चैनल अपने अधिकतम मान पर होते हैं।
वेब ब्राउज़र और डिजाइन टूल HEX रंग को पढ़ते हैं, उसे तीन हिस्सों में बाँटते हैं और हर जोड़े को आंतरिक रूप से दशमलव में बदलकर RGB मानों के साथ काम करते हैं। इसलिए HEX, CSS और UI डिजाइन में RGB रंगों को स्टोर और साझा करने का एक संक्षिप्त तरीका है।
HSL क्या है?
HSL का अर्थ है Hue (रंग), Saturation (संतृप्ति) और Lightness (उज्ज्वलता)। अलग-अलग लाल, हरे और नीले चैनलों के बजाय, HSL रंग को कलर व्हील पर उसकी स्थिति, रंग की तीव्रता और वह कितना उजला या गहरा दिखता है, इसके आधार पर दर्शाता है।
Hue एक कोण होता है जो 0 से 360 डिग्री तक होता है और मूल रंग समूह चुनता है, जैसे लाल, हरा या नीला। Saturation प्रतिशत में लिखा जाता है, 0% से 100% तक, और यह दिखाता है कि रंग कितना तीव्र है। कम saturation पर रंग धूसर और हल्का होता है, जबकि अधिक saturation पर रंग ज्यादा गहरा और स्पष्ट होता है।
Lightness भी प्रतिशत में होती है और यह बताती है कि रंग काले या सफेद के कितना पास है। 0% पर रंग काला होता है, 100% पर सफेद, और 50% पर संतुलित उज्ज्वलता होती है। ये तीनों मान मिलकर एक HSL मान बनाते हैं, जैसे hsl(200, 80%, 50%)।
HEX से HSL का फ़ॉर्मूला
#RRGGBB -> hsl(h, s, l)
1) हर जोड़े को दशमलव में बदलें:
RR, GG, BB -> r, g, b [0, 255] में
2) [0, 1] की रेंज में सामान्यीकृत करें:
r' = r / 255, g' = g / 255, b' = b / 255
3) r', g', b' का max और min ज्ञात करें:
max = max(r', g', b')
min = min(r', g', b')
delta = max - min
4) Lightness की गणना करें:
l = (max + min) / 2
5) Saturation की गणना करें:
यदि delta == 0 तो s = 0
अन्यथा s = delta / (1 - |2 * l - 1|)
6) Hue की गणना करें:
यदि delta == 0 तो h = 0
अन्यथा यदि max == r' तो h = 60 * (((g' - b') / delta) mod 6)
अन्यथा यदि max == g' तो h = 60 * (((b' - r') / delta) + 2)
अन्यथा यदि max == b' तो h = 60 * (((r' - g') / delta) + 4)
7) h को [0, 360) में, s और l को प्रतिशत में बदलें:
H = h
S = s * 100
L = l * 100यह RGB रंग को HSL में बदलने का मानक एल्गोरिदम है, जिसे HEX रंग को RGB घटकों में बदलने के बाद लागू किया जाता है। परिणाम एक ऐसा HSL मान होता है जो उसी रंग को अधिक लचीले और थीम के अनुकूल रूप में दर्शाता है।
#4FA3C2 का उदाहरण
1) HEX से RGB:
#4FA3C2 -> (79, 163, 194)
2) सामान्यीकरण:
r' = 79 / 255
g' = 163 / 255
b' = 194 / 255
3) max, min, delta की गणना करें, फिर h, s, l
4) अंतिम HSL (राउंडेड):
hsl(196, 47%, 54%)HEX से HSL में परिवर्तन चरण दर चरण
HEX से HSL में परिवर्तन हमेशा RGB रंग मॉडल के माध्यम से होता है। पहले HEX जोड़ों को लाल, हरे और नीले मानों में बदला जाता है, फिर उन मानों से hue, saturation और lightness निकाले जाते हैं।
#1A2B3C
[1A, 2B, 3C] में विभाजित करें
-> rgb(26, 43, 60)
-> hsl(h, s, l)नीचे रंग #1A2B3C के उदाहरण से इस प्रक्रिया को विस्तार से दिखाया गया है।
- चरण 1 – HEX मान को विभाजित करें
[1A] [2B] [3C] - चरण 2 – हर जोड़े को दशमलव में बदलें
हर दो अक्षरों का समूह एक हेक्साडेसिमल संख्या होता है। इसे दशमलव में बदलकर 0 से 255 के बीच RGB चैनल मान प्राप्त किए जाते हैं।
1A = (1 * 16) + 10 = 26 2B = (2 * 16) + 11 = 43 3C = (3 * 16) + 12 = 60 - चरण 3 – RGB को HSL में बदलें
RGB मानों को 0 से 1 के बीच सामान्यीकृत करें, अधिकतम और न्यूनतम चैनल मान निकालें, और फिर HSL फ़ॉर्मूला से hue, saturation और lightness प्राप्त करें।
hsl(210, 39%, 17%)
यह प्रक्रिया किसी भी वैध HEX रंग के लिए काम करती है: पहले HEX को RGB में बदलें, फिर RGB से HSL में परिवर्तन करें।
कब HEX का उपयोग करें और कब HSL का
CSS में HEX और HSL दोनों ही रंग दर्शाने के मान्य तरीके हैं। सही विकल्प इस पर निर्भर करता है कि आपको संक्षिप्त टोकन चाहिए या hue, saturation और lightness पर सीधा नियंत्रण।
जब HEX उपयुक्त हो
- संक्षिप्त और परिचित फॉर्मेट: HEX मान छोटे होते हैं और डिजाइन टूल, दस्तावेज़ और स्टाइल गाइड में व्यापक रूप से उपयोग किए जाते हैं।
- स्थिर रंग पैलेट के लिए: डिज़ाइन टोकन और ब्रांड रंगों के लिए उपयुक्त, जो कम बदलते हैं और जिन्हें डायनामिक समायोजन की ज़रूरत नहीं होती।
- आसानी से कॉपी और शेयर:
#4FA3C2जैसी एक स्ट्रिंग को अलग-अलग टूल और टीमों में साझा करना आसान होता है।
जब HSL बेहतर विकल्प हो
- थीम बनाना: केवल lightness बदलकर एक ही hue के हल्के और गहरे वेरिएंट तैयार किए जा सकते हैं।
- नियंत्रित saturation: तीन RGB चैनलों की बजाय एक प्रतिशत बदलकर रंग की तीव्रता नियंत्रित की जा सकती है।
- स्पष्ट रंग परिवर्तन: जब केवल hue, saturation या lightness बदला जाता है, तो यह समझना आसान होता है कि रंग में क्या बदला।
सारांश
संक्षिप्त और स्थिर रंग टोकन के लिए HEX का उपयोग करें। पूर्वानुमान योग्य समायोजन, थीमिंग और रंग प्रणालियों के लिए HSL चुनें। दोनों फॉर्मेट एक ही दृश्य रंग दर्शाते हैं और एक-दूसरे में बदले जा सकते हैं।
CSS में HSL उपयोग करने की अच्छी प्रथाएँ
CSS कई रंग फॉर्मेट सपोर्ट करता है। HSL विशेष रूप से तब उपयोगी होता है जब आप डिजाइन सिस्टम, डार्क मोड या ऐसे सेमांटिक रंग टोकन बना रहे हों जिन्हें कई कॉम्पोनेंट्स में स्केल करना हो।
थीम योग्य पैलेट के लिए HSL का उपयोग
- एक hue साझा करें, lightness बदलें: ब्रांड रंग के लिए hue और saturation स्थिर रखें और lightness बदलकर hover, active और disabled स्टेट बनाएँ।
- लाइट और डार्क थीम को संतुलित करें: लाइट और डार्क बैकग्राउंड के लिए एक ही hue रखें, लेकिन अलग lightness रेंज का उपयोग करें ताकि पैलेट एकसमान रहे।
ज़रूरत होने पर अन्य फॉर्मेट के साथ उपयोग
- HSL के साथ alpha: जब पारदर्शिता चाहिए हो, तो
hsla()या नया स्पेस सेपरेटेड सिंटैक्स जैसेhsl(200 80% 50% / 0.5)का उपयोग करें। - HEX और RGB के साथ उपयोग: ब्रांड टोकन HEX में रखना ठीक है और ज़रूरत पड़ने पर कोड में उन्हें HSL में बदला जा सकता है।
आम गलतियाँ जिनसे बचें
- बिना कारण फॉर्मेट बदलना: अपने डिजाइन सिस्टम के लिए एक मुख्य फॉर्मेट चुनें और केवल स्पष्ट कारण होने पर ही परिवर्तन करें।
- कॉन्ट्रास्ट को नज़रअंदाज़ करना: Lightness बदलते समय हमेशा टेक्स्ट और मुख्य UI एलिमेंट्स का कॉन्ट्रास्ट जाँचें।
- केवल lightness पर निर्भर रहना: इंटरफ़ेस को सपाट दिखने से बचाने के लिए lightness के साथ saturation में भी छोटे बदलाव करें।
इन तरीकों का पालन करने से ऐसे रंग सिस्टम बनते हैं जो समझने में आसान होते हैं, संभालने में सरल होते हैं और छोटे कॉम्पोनेंट्स से बड़े इंटरफ़ेस तक स्केल करते हैं।
HEX से HSL कन्वर्ज़न तालिका
नीचे दी गई तालिका में सामान्य HEX रंग और उनके संबंधित HSL मान दिखाए गए हैं। इसमें मूल रंग, न्यूट्रल और UI में अक्सर उपयोग होने वाले कुछ रंग शामिल हैं।
| विवरण | HEX | HSL |
|---|---|---|
| सफेद | #FFFFFF | hsl(0, 0%, 100%) |
| काला | #000000 | hsl(0, 0%, 0%) |
| लाल | #FF0000 | hsl(0, 100%, 50%) |
| हरा | #00FF00 | hsl(120, 100%, 50%) |
| नीला | #0000FF | hsl(240, 100%, 50%) |
| पीला | #FFFF00 | hsl(60, 100%, 50%) |
| सियान | #00FFFF | hsl(180, 100%, 50%) |
| मैजेंटा | #FF00FF | hsl(300, 100%, 50%) |
| ग्रे 1 | #111111 | hsl(0, 0%, 7%) |
| ग्रे 2 | #333333 | hsl(0, 0%, 20%) |
| ग्रे 3 | #555555 | hsl(0, 0%, 33%) |
| ग्रे 4 | #777777 | hsl(0, 0%, 47%) |
| ग्रे 5 | #999999 | hsl(0, 0%, 60%) |
| ग्रे 6 | #CCCCCC | hsl(0, 0%, 80%) |
| हल्का ग्रे | #F0F0F0 | hsl(0, 0%, 94%) |
| UI ग्रे | #E0E0E0 | hsl(0, 0%, 88%) |
| डार्क UI ग्रे | #1A1A1A | hsl(0, 0%, 10%) |
| गहरा लाल | #800000 | hsl(0, 100%, 25%) |
| गहरा हरा | #008000 | hsl(120, 100%, 25%) |
| गहरा नीला | #000080 | hsl(240, 100%, 25%) |
| नारंगी | #FFA500 | hsl(39, 100%, 50%) |
| बैंगनी | #800080 | hsl(300, 100%, 25%) |
| टील | #008080 | hsl(180, 100%, 25%) |
पढ़ने में आसान बनाने के लिए इन मानों को राउंड किया गया है। प्रोडक्शन उपयोग के लिए, इस पेज पर दिए गए कनवर्टर से किसी भी वैध HEX रंग के लिए सटीक HSL मान निकाले जा सकते हैं।
FAQ: HEX से HSL
- HEX को HSL में क्यों बदलें?
HEX स्थिर रंगों को स्टोर और साझा करने के लिए अच्छा है, लेकिन HSL से brightness और saturation समायोजित करना, थीम बनाना और संबंधित रंग स्केल तैयार करना आसान होता है।
- H, S और L की रेंज क्या होती है?
Hue 0 से 360 डिग्री तक होता है। Saturation और lightness 0% से 100% तक प्रतिशत में होती हैं। CSS में आमतौर पर
hsl(h, s%, l%)फॉर्मेट का उपयोग किया जाता है। - क्या HSL पारदर्शिता को सपोर्ट करता है?
हाँ। इसके लिए
hsla(h, s%, l%, a)या नया सिंटैक्सhsl(h s% l% / a)इस्तेमाल किया जा सकता है, जहाँ alpha मान 0 (पूरी तरह पारदर्शी) से 1 (पूरी तरह अपारदर्शी) तक होता है। - क्या HSL, HEX से अधिक सटीक है?
दोनों फॉर्मेट एक ही रंग दर्शाते हैं। अंतर केवल प्रस्तुति का है। HSL को हाथ से संपादित करना आसान होता है क्योंकि इसके तीन मान सीधे hue, तीव्रता और उज्ज्वलता से जुड़े होते हैं।
- क्या एक ही प्रोजेक्ट में HEX, RGB और HSL का उपयोग किया जा सकता है?
हाँ। कई प्रोजेक्ट एक फॉर्मेट को आधार मानते हैं और आवश्यकता होने पर अन्य फॉर्मेट में बदलते हैं। मुख्य बात यह है कि डिजाइन सिस्टम के भीतर एकरूपता बनी रहे और मैन्युअल गलतियों से बचने के लिए कनवर्ज़न टूल का उपयोग किया जाए।