HSV से HSL कनवर्टर
गणित किए बिना HSV रंग मानों को HSL में परिवर्तित करें। यह कनवर्टर तब सहायक होता है जब आप एक पिकर या API से HSV में रंग प्राप्त करते हैं लेकिन उन्हें समझना या अपने डिज़ाइन सिस्टम में HSL के रूप में स्टोर करना चाहते हैं।
HSV प्रारूप में एक रंग टाइप करें और मिलान करने वाला HSL त्रैतीयक तुरंत दिखाई देगा। आप इंटरैक्टिव रूप से रंग, संतृप्ति और मान को समायोजित कर सकते हैं और फिर परिणामस्वरूप HSL मान को CSS, टोकन या दस्तावेज़ में कॉपी कर सकते हैं।
इस पृष्ठ पर आप HSV और HSL का एक संक्षिप्त अवलोकन, रूपांतरण एल्गोरिदम का स्पष्ट विवरण, चरण-दर-चरण मार्गदर्शिका, एक संदर्भ तालिका, और दोनों मॉडलों के साथ उपयोग करने के बारे में सामान्य प्रश्नों के उत्तर भी पाएंगे।
HSV क्या है
HSV का अर्थ है ह्यू, संतृप्ति, और मान। यह रंगों का वर्णन रंग पहिए पर एक ह्यू कोण, उस ह्यू की तीव्रता, और काले के सापेक्ष परिणाम कितना उज्ज्वल है, के माध्यम से करता है।
ह्यू 0 से 360 डिग्री तक होता है। संतृप्ति और मान 0% से 100% तक प्रतिशत होते हैं। कम संतृप्ति मान अधिक म्यूट और ग्रे टोन उत्पन्न करता है, जबकि कम मान रंग को काला के करीब और गहरा बनाता है।
इस लेआउट के कारण, HSV पेंटिंग सॉफ़्टवेयर और रंग पिकर्स में सामान्य है। यह उपयोगकर्ताओं को "कितना मजबूत" और "कितना उज्ज्वल" एक रंग महसूस करता है, इस संदर्भ में सोचने की अनुमति देता है बिना व्यक्तिगत RGB चैनलों को छुए।
HSL क्या है
HSL का अर्थ है ह्यू, संतृप्ति, और हल्कापन। यह ह्यू कोण के उसी विचार का उपयोग करता है लेकिन मान को हल्कापन से बदलता है, जो यह मापता है कि रंग काले या सफेद के कितने करीब है।
HSL में ह्यू भी 0 से 360 डिग्री में लिखा जाता है। संतृप्ति और हल्कापन 0% से 100% तक प्रतिशत होते हैं। 0% हल्कापन पर रंग काला होता है, 100% पर यह सफेद होता है, और 50% पर इसका मध्य स्तर की चमक होती है।
यह HSL को थीम और पैलेट बनाने के लिए एक आरामदायक प्रारूप बनाता है। डिज़ाइनर एक ब्रांड रंग के लिए ह्यू को स्थिर रख सकते हैं और संतृप्ति और हल्कापन को समन्वयित राज्यों और गहराई स्तरों को बनाने के लिए बदल सकते हैं।
HSV से HSL रूपांतरण सूत्र
hsv(h, s_v, v) -> hsl(h, s_l, l)
दिया गया:
h [0, 360) में
s_v [0, 100] में // HSV संतृप्ति
v [0, 100] में // मान
1) HSV मानों को सामान्यीकृत करें:
s_v' = s_v / 100
v' = v / 100
2) HSV को RGB में बदलें (मध्यवर्ती चरण):
a) क्रोमा की गणना करें:
c = v' * s_v'
b) सहायक मान:
x = c * (1 - |((h / 60) mod 2) - 1|)
c) ह्यू सेक्टर के आधार पर अस्थायी ट्रिपल:
यदि 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)
d) ऑफसेट जोड़ें:
m = v' - c
r' = r1 + m
g' = g1 + m
b' = b1 + m
3) RGB को HSL में बदलें:
a) max और min ज्ञात करें:
max = max(r', g', b')
min = min(r', g', b')
delta = max - min
b) प्रकाशता:
l = (max + min) / 2
c) HSL संतृप्ति:
यदि delta == 0 तो s_l' = 0
अन्यथा s_l' = delta / (1 - |2 * l - 1|)
4) अंतिम इकाइयों में बदलें:
H = h
S_l = s_l' * 100
L = l * 100इस एल्गोरिदम में ह्यू कोण को संरक्षित किया जाता है। कनवर्टर अस्थायी रूप से HSV रंग को RGB के रूप में व्यक्त करता है और फिर उन RGB मानों से हल्कापन और एक नई संतृप्ति की गणना करता है ताकि HSL त्रैतीयक प्राप्त किया जा सके।
hsv(196, 59%, 76%) के लिए उदाहरण
1) s_v और v को [0, 1] रेंज में सामान्यीकृत करें
2) c, x, m की गणना करें और r', g', b' निकालें
3) RGB के लिए max, min और delta ज्ञात करें
4) HSL नियमों का उपयोग करके l और s_l की गणना करें
5) राउंडेड परिणाम (एक संभावित सन्निकटन):
hsl(196, 49%, 54%)HSV से HSL रूपांतरण कैसे काम करता है चरण-दर-चरण
वैसे, HSV से HSL में परिवर्तित करना रंग स्थान में एक अलग सेट के अक्षों के साथ उसी बिंदु का वर्णन करने के बारे में है। ह्यू वही रहता है, जबकि संतृप्ति और तीसरा मान हल्कापन के संदर्भ में फिर से व्याख्यायित होते हैं।
hsv(210, 57%, 24%)
-> rgb(r, g, b)
-> hsl(h, s, l)यहाँ hsv(210, 57%, 24%) के लिए एक सरल मार्गदर्शिका है।
- चरण 1 - HSV को RGB के रूप में व्याख्यायित करें
संतृप्ति और मान को सामान्य करें, क्रोमा और सहायक मान की गणना करें, ह्यू सेक्टर के आधार पर एक अस्थायी त्रैतीयक चुनें, और ऑफसेट जोड़ें। यह तीन सामान्य RGB चैनल उत्पन्न करता है।
s_v' = 0.57 v' = 0.24 rgb(26, 43, 60) राउंडिंग के बाद - चरण 2 - RGB से HSL पैरामीटर निकालें
हल्कापन की गणना करने और यह मापने के लिए अधिकतम और न्यूनतम चैनल मानों का उपयोग करें कि रंग ग्रे से कितना दूर है। वह फैलाव HSL स्थान में नई संतृप्ति बन जाता है।
max = max(r', g', b') min = min(r', g', b') l = (max + min) / 2 if delta == 0 then s_l = 0 else s_l = delta / (1 - |2 * l - 1|) - चरण 3 - परिणाम को hsl(h, s, l) के रूप में व्यक्त करें
मूल ह्यू कोण को बनाए रखें, लेकिन HSV संतृप्ति और मान को नई संतृप्ति और हल्कापन से बदलें। स्क्रीन पर रंग वही रहता है; केवल नोटेशन बदलता है।
hsl(210, 39%, 17%)
यह वही तर्क किसी भी मान्य HSV मान के लिए काम करता है, यही कारण है कि एक कनवर्टर या उपयोगिता फ़ंक्शन आमतौर पर हाथ से गणनाओं की तुलना में बेहतर विकल्प होता है।
कब HSV का उपयोग करें और कब HSL का उपयोग करें
HSV और HSL एक ही ह्यू आयाम साझा करते हैं लेकिन वे उज्ज्वलता और तीव्रता को कैसे दर्शाते हैं, इस मामले में भिन्न होते हैं। प्रत्येक मॉडल कार्यप्रवाह के विभिन्न भागों में अधिक सुविधाजनक हो सकता है।
जहाँ HSV सहायक है
- रंग पिकर्स और पेंटिंग उपकरण: मान और संतृप्ति स्लाइडर तब सहज होते हैं जब लोग दृश्य रूप से रंग समायोजित करते हैं।
- उज्ज्वलता पर केंद्रित UI के साथ काम करना: कुछ इंटरफेस इस संदर्भ में सोचते हैं कि रंग "कितना उज्ज्वल" है, न कि यह काले और सफेद के कितने करीब है।
- त्वरित अन्वेषण: मान बदलना अक्सर एक ह्यू के हल्के या गहरे रूपों की खोज करते समय तेज़ प्रतिक्रिया देता है।
जहाँ HSL बेहतर फिट बैठता है
- संरचित पैलेट डिजाइन करना: हल्कापन टिंट और शेड बनाने के लिए एक पूर्वानुमानित तरीका प्रदान करता है।
- डिज़ाइन स्पेक्स लिखना: HSL मान जैसे
hsl(210, 40%, 20%)दस्तावेज़ और कोड में पढ़ने में आसान होते हैं। - हल्के और गहरे थीम का समन्वय करना: ह्यू को स्थिर रखते हुए हल्कापन रेंज को समायोजित करना एक सुसंगत अनुभव बनाए रखने में मदद करता है।
सारांश
HSV का उपयोग इंटरैक्टिव समायोजन और उपकरणों के लिए करें जो मान पर ध्यान केंद्रित करते हैं। डिज़ाइन टोकन, पैलेट, और दस्तावेज़ के लिए HSL को प्राथमिकता दें जहाँ हल्कापन आधारित नियंत्रण अधिक सहज होता है।
HSV और HSL का एक साथ उपयोग करने के लिए व्यावहारिक सुझाव
एक ही प्रोजेक्ट में HSV और HSL दोनों का उपयोग करना सामान्य है। थोड़ी योजना इन मॉडलों को एक साथ काम करने में मदद कर सकती है बजाय इसके कि वे प्रतिस्पर्धा करें।
संपादन और संग्रहण को अलग करें
- HSV में प्रयोग करें: जब तक रंग पिकर में सही महसूस न हो तब तक ह्यू, संतृप्ति और मान को समायोजित करें।
- HSL में टोकन स्टोर करें: अंतिम मानों को HSL में रखें जहाँ उन्हें पढ़ना, समायोजित करना और दस्तावेज़ करना आसान होता है।
अन्य प्रारूपों के साथ संयोजन करें
- जब आवश्यक हो तो RGB के माध्यम से परिवर्तित करें: कई पुस्तकालय पहले से ही HSV से RGB और RGB से HSL को लागू करते हैं, इसलिए आप उन्हें संयोजित कर सकते हैं बजाय इसके कि कस्टम गणित लिखें।
- पारदर्शिता के लिए HSLA या RGBA का उपयोग करें: बेस रंगों को HSL या RGB में रखें और केवल तभी अल्फा जोड़ें जब आपको वास्तव में अर्ध-पारदर्शी ओवरले की आवश्यकता हो।
फार्मेट्स को स्थिर रखें
- प्रत्येक परत के लिए स्पष्ट नियम परिभाषित करें: उदाहरण के लिए, पिकर्स में HSV, टोकन में HSL, अंतिम CSS में RGB या HEX।
- यादृच्छिक रूप से मॉडलों को मिलाने से बचें: प्रारूपों का लगातार उपयोग भविष्य के रिफ़ैक्टर्स और थीम परिवर्तनों को प्रबंधित करना आसान बनाता है।
जहाँ HSV और HSL का उपयोग किया जाता है, वहाँ एक जानबूझकर विभाजन के साथ, आप दोनों मॉडलों का लाभ उठा सकते हैं बिना अपने कोडबेस में भ्रम जोड़े।
HSV से HSL रूपांतरण तालिका
नीचे दी गई तालिका में कई परिचित रंगों को HSV और HSL दोनों में वर्णित किया गया है। मानों को स्कैन करना आसान रखने के लिए गोल किया गया है, इसलिए जब आपको सटीक संख्याओं की आवश्यकता हो तो ऊपर दिए गए कनवर्टर पर भरोसा करें।
| विवरण | HSV | HSL |
|---|---|---|
| सफेद | hsv(0, 0%, 100%) | hsl(0, 0%, 100%) |
| काला | hsv(0, 0%, 0%) | hsl(0, 0%, 0%) |
| लाल | hsv(0, 100%, 100%) | hsl(0, 100%, 50%) |
| हरा | hsv(120, 100%, 100%) | hsl(120, 100%, 50%) |
| नीला | hsv(240, 100%, 100%) | hsl(240, 100%, 50%) |
| पीला | hsv(60, 100%, 100%) | hsl(60, 100%, 50%) |
| सियान | hsv(180, 100%, 100%) | hsl(180, 100%, 50%) |
| मैजेंटा | hsv(300, 100%, 100%) | hsl(300, 100%, 50%) |
| ग्रे 1 | hsv(0, 0%, 7%) | hsl(0, 0%, 7%) |
| ग्रे 2 | hsv(0, 0%, 20%) | hsl(0, 0%, 20%) |
| ग्रे 3 | hsv(0, 0%, 33%) | hsl(0, 0%, 33%) |
| ग्रे 4 | hsv(0, 0%, 47%) | hsl(0, 0%, 47%) |
| ग्रे 5 | hsv(0, 0%, 60%) | hsl(0, 0%, 60%) |
| ग्रे 6 | hsv(0, 0%, 80%) | hsl(0, 0%, 80%) |
| नारंगी | hsv(39, 100%, 100%) | hsl(39, 100%, 50%) |
| बैंगनी | hsv(300, 100%, 50%) | hsl(300, 100%, 25%) |
| टील | hsv(180, 100%, 50%) | hsl(180, 100%, 25%) |
किसी अन्य HSV रंग के लिए आप पृष्ठ के शीर्ष पर दिए गए कनवर्टर का उपयोग करके मानक एल्गोरिदम का उपयोग करके संबंधित HSL मान प्राप्त कर सकते हैं।
अक्सर पूछे जाने वाले प्रश्न: HSV से HSL
- मैं HSV को HSL में क्यों परिवर्तित करूंगा
कई उपकरण HSV नियंत्रण प्रदान करते हैं, जबकि आपके टोकन और दस्तावेज़ HSL का उपयोग कर सकते हैं। रूपांतरण आपको एक मॉडल के साथ डिज़ाइन करने और दूसरे के साथ रंगों को स्टोर या साझा करने की अनुमति देता है बिना उनके स्वरूप को बदले।
- क्या HSV और HSL विभिन्न रंगों का वर्णन करते हैं
नहीं। वे केवल RGB आधारित रंग स्थान के लिए विभिन्न समन्वय प्रणाली हैं। कोई भी मान्य HSV रंग का एक मेल खाता HSL प्रतिनिधित्व होता है और इसके विपरीत।
- क्या रूपांतरण के समय ह्यू वही रहता है
मानक एल्गोरिदम में ह्यू कोण को संरक्षित किया जाता है। जो बदलता है वह संतृप्ति और तीसरा मान है, जिन्हें प्रत्येक मॉडल के नियमों के अनुसार फिर से गणना की जाती है।
- क्या मैं डेटा खोए बिना HSL से HSV में वापस जा सकता हूँ
हाँ। RGB के माध्यम से HSV और HSL के बीच जाना रिवर्सिबल है जब तक कि गोलाई न हो। जब तक मान सही ढंग से क्लैम्प किए जाते हैं, दृश्य रंग वही रहता है।
- क्या सभी मामलों में एक मॉडल दूसरे से बेहतर है
वास्तव में नहीं। HSV अक्सर पिकर्स और पेंटिंग उपकरणों में अधिक सुविधाजनक होता है, जबकि HSL डिज़ाइन टोकन, पैलेट, और लिखित स्पेक्स के लिए स्पष्ट होता है। यह सामान्य है कि स्पष्ट रूपांतरण नियमों के साथ एक ही प्रोजेक्ट में दोनों का उपयोग किया जाए।