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