RGB से HSV कनवर्टर
किसी भी फार्मूले या स्प्रेडशीट को छुए बिना rgb(r, g, b) मानों को HSV में बदलें। यह उपकरण CSS, रंग पिकर्स, या डिज़ाइन सिस्टम के साथ काम करते समय बहुत उपयोगी है जो रंगों का वर्णन रंग, संतृप्ति, और मान के माध्यम से करते हैं।
RGB प्रारूप में एक रंग दर्ज करें और आप तुरंत मेल खाने वाला HSV त्रैतीयक देखेंगे। आप तब रंग के बारे में इसके रंग कोण, इसकी तीव्रता, और इसकी चमक के संदर्भ में सोच सकते हैं, बजाय इसके कि तीन अलग-अलग चैनलों के बारे में सोचें।
HSV ग्राफिक्स सॉफ़्टवेयर और इंटरैक्टिव पिकर्स में एक लोकप्रिय रंग मॉडल है। इस पृष्ठ पर आपको RGB और HSV का संक्षिप्त अवलोकन, रूपांतरण के लिए एक स्पष्ट फार्मूला, और सामान्य मानों के लिए एक संदर्भ तालिका मिलेगी।
RGB क्या है
RGB एक तरीके से रंगों का वर्णन करता है जो लाल, हरा, और नीला प्रकाश के संयोजन के रूप में है। प्रत्येक घटक को 0 से 255 के बीच दशमलव मान के रूप में लिखा जाता है, जहां 0 उस चैनल से कोई योगदान नहीं दर्शाता है और 255 पूर्ण तीव्रता दर्शाता है।
जब तीन चैनल एक साथ मिलते हैं, तो वे उन पिक्सेलों का निर्माण करते हैं जो आप स्क्रीन पर देखते हैं। उदाहरण के लिए, rgb(255, 255, 255) सफेद उत्पन्न करता है, rgb(0, 0, 0) काला परिणाम देता है, और rgb(255, 0, 0) शुद्ध लाल देता है।
चूंकि RGB संख्यात्मक चैनलों पर आधारित है, यह कोड के लिए सुविधाजनक है: आप ग्रेडिएंट उत्पन्न कर सकते हैं, चैनलों को गतिशील रूप से समायोजित कर सकते हैं, और केवल संख्याओं को बदलकर रंग संक्रमण को एनिमेट कर सकते हैं।
HSV क्या है
HSV का अर्थ है रंग, संतृप्ति, और मान। यह रंग को इस तरह से व्यवस्थित करता है जो लोगों के इसे बताने के तरीके के करीब है: यह कौन सा मूल रंग है, उस रंग की तीव्रता कितनी है, और यह स्क्रीन पर कितना उज्ज्वल या अंधेरा दिखता है।
रंग को 0 से 360 डिग्री में मापा जाता है और यह रंग पहिए के चारों ओर घूमता है (उदाहरण के लिए, लाल 0 के करीब, हरा 120 के करीब, नीला 240 के करीब)। संतृप्ति और मान प्रतिशत के रूप में 0% से 100% के बीच लिखे जाते हैं।
कम संतृप्ति मान रंग को ग्रे की ओर धकेलता है। कम मान सेटिंग रंग को गहरा और काले के करीब बनाती है। उच्च संतृप्ति और उच्च मान पर रंग जीवंत और उज्ज्वल हो जाता है, यही कारण है कि HSV अक्सर इंटरफेस में उपयोग किया जाता है जहां उपयोगकर्ता रंग की तीव्रता और चमक को ठीक करते हैं।
RGB से HSV फार्मूला
rgb(r, g, b) -> hsv(h, s, v)
1) Normalize channels to [0, 1]:
r' = r / 255, g' = g / 255, b' = b / 255
2) Find max and min:
max = max(r', g', b')
min = min(r', g', b')
delta = max - min
3) Compute value:
v = max
4) Compute saturation:
if max == 0 then s = 0
else s = delta / max
5) Compute hue:
if delta == 0 then h = 0
else if max == r' then h = 60 * (((g' - b') / delta) mod 6)
else if max == g' then h = 60 * (((b' - r') / delta) + 2)
else if max == b' then h = 60 * (((r' - g') / delta) + 4)
6) Convert to final units:
H = h // degrees in [0, 360)
S = s * 100 // percentage
V = v * 100 // percentageएल्गोरिदम पहले RGB घटकों को 0 से 1 के दायरे में स्केल करता है, फिर देखता है कि वे कितने दूर फैले हुए हैं। वह फैलाव संतृप्ति को नियंत्रित करता है, जबकि उच्चतम चैनल मान को परिभाषित करता है। रंग उस चैनल पर निर्भर करता है जो प्रमुख है और अन्य चैनलों की तुलना में कैसे हैं।
rgb(79, 163, 194) के लिए उदाहरण
1) सामान्यीकरण:
r' = 79 / 255
g' = 163 / 255
b' = 194 / 255
2) max, min, delta की गणना करें
3) उपरोक्त नियमों के साथ h, s, v की गणना करें
4) गोल परिणाम:
hsv(196, 59%, 76%)RGB से HSV रूपांतरण कैसे काम करता है चरण दर चरण
RGB से HSV में रूपांतरण हमेशा एक ही पैटर्न का पालन करता है: चैनलों को स्केल करें, उन्हें एक-दूसरे की तुलना करें, और उन संबंधों का उपयोग करके रंग, संतृप्ति और मान निकालें।
rgb(26, 43, 60)
↓ ↓ ↓
[26, 43, 60] -> hsv(h, s, v)यहाँ rgb(26, 43, 60) के लिए व्यक्तिगत चरणों पर एक नज़र है।
- चरण 1 — चैनलों को सामान्य करें:
r' = 26 / 255 g' = 43 / 255 b' = 60 / 255 - चरण 2 — अधिकतम, न्यूनतम, और डेल्टा खोजें:
ये तीन मान आपको बताते हैं कि रंग कितना उज्ज्वल हो सकता है और चैनल कितने अलग हैं। अधिकतम और न्यूनतम के बीच का अंतर अंततः संतृप्ति को आकार देता है।
max = max(r', g', b') min = min(r', g', b') delta = max - min - चरण 3 — H, S, और V की गणना करें:
प्रमुख चैनल से रंग निकालने के लिए HSV समीकरणों का उपयोग करें, फिर संतृप्ति और मान की गणना करें। अंततः, संतृप्ति और मान को प्रतिशत में बदलें जो दस्तावेज़ और डिज़ाइन स्पेक्स में पढ़ने में आसान हैं।
hsv(210, 57%, 24%)
यहां तक कि किसी भी मान्य RGB रंग के लिए वही कार्यप्रवाह काम करता है: चैनलों को सामान्य करें, उनके दायरे को खोजें, और HSV प्रतिनिधित्व प्राप्त करने के लिए फार्मूलों को लागू करें।
RGB और HSV कहाँ उपयोगी हैं
RGB और HSV एक ही रंगों के बारे में विभिन्न कोणों से बात करते हैं। RGB इस बात पर ध्यान केंद्रित करता है कि कितनी लाल, हरा, और नीला प्रकाश मौजूद है, जबकि HSV इस पर ध्यान केंद्रित करता है कि कौन सा रंग चुना गया है, रंग की तीव्रता कितनी है, और यह स्क्रीन पर कितना उज्ज्वल दिखता है।
RGB के लिए सामान्य उपयोग
- प्रोग्रामिंग और एनिमेशन: तीन संख्यात्मक चैनल JavaScript और CSS की कीफ्रेम में हेरफेर करना आसान हैं।
- निम्न स्तर ग्राफिक्स कार्य: कई रेंडरिंग API और छवि प्रारूप सीधे RGB मानों के साथ काम करते हैं।
- सटीक नियंत्रण: 0 से 255 तक के चैनल मान आपको कोड में रंग उत्पन्न करने या क्लैंप करने पर बारीकी से नियंत्रण देते हैं।
HSV के लिए सामान्य उपयोग
- रंग पिकर्स और पैलेट: रंग, संतृप्ति, और मान के लिए स्लाइडर स्वाभाविक रूप से HSV मॉडल पर मानचित्रित होते हैं।
- विविधताओं का अन्वेषण: आप संतृप्ति और मान को समायोजित करके एक मूल रंग के हल्के, गहरे, या नरम संस्करण जल्दी से बना सकते हैं।
- मानव अनुकूल ट्यूनिंग: गैर-तकनीकी उपयोगकर्ता अक्सर तीन संख्यात्मक चैनलों की तुलना में रंग को इसकी तीव्रता और चमक के द्वारा समायोजित करना आसान पाते हैं।
सारांश
RGB का उपयोग करें जब आपको कोड और प्रभावों के लिए स्पष्ट संख्यात्मक चैनल की आवश्यकता हो। HSV चुनें जब आप पिकर्स बना रहे हों, पैलेट के साथ प्रयोग कर रहे हों, या रंग विकल्पों को अधिक दृश्य तरीके से संप्रेषित कर रहे हों।
RGB के साथ HSV का उपयोग करने के लिए व्यावहारिक सुझाव
कई परियोजनाएँ रंगों को एक संकेतन में संग्रहीत करती हैं लेकिन उनके बारे में दूसरे में सोचती हैं। यह सामान्य है कि RGB या HEX में टोकन परिभाषित करें जबकि डिज़ाइन उपकरणों और पिकर्स में विविधताओं का अन्वेषण करने के लिए HSV का उपयोग करें।
HSV आधारित पैलेट बनाएं
- रंग को स्थिर रखें, संतृप्ति और मान को बदलें: एक ब्रांड रंग के लिए रंग को स्थिर रखें और संतृप्ति और मान को समायोजित करें ताकि हवर, दबाया गया, और निष्क्रिय जैसे राज्य बनाए जा सकें।
- पृष्ठभूमियों के लिए कम संतृप्ति का उपयोग करें: एक रंग के म्यूटेड संस्करण अक्सर सतहों और कंटेनरों के लिए बेहतर होते हैं, जबकि उच्च संतृप्ति उच्चारण और कॉल टू एक्शन तत्वों के लिए काम करती है।
HSV और CSS संकेतन के बीच जाएं
- टोकन को बदलें और स्थिर करें: HSV से RGB या HSL में जाने के लिए एक कनवर्टर का उपयोग करें, फिर अंतिम मानों को अपने स्टाइलशीट या डिज़ाइन टोकनों के अंदर एकल प्रारूप में संग्रहीत करें।
- पारदर्शिता को अलग से संभालें: जब आपको अपारदर्शिता की आवश्यकता हो, तो CSS में
rgba()याhsla()का उपयोग करें, लेकिन फिर भी HSV स्पेस में मूल रंग का चयन करें।
सामान्य pitfalls
- एक फ़ाइल में कई प्रारूपों को मिलाना: RGB या HSL जैसे एक प्राथमिक टेक्स्ट प्रारूप का चयन करें और केवल आवश्यकतानुसार परिवर्तित करें।
- मान को हल्कापन के साथ भ्रमित करना: HSV में मान काले के सापेक्ष चमक को मापता है, जो HSL में हल्कापन के समान नहीं है।
- गहराई के लिए केवल मान बदलना: बेहतर परिणाम आमतौर पर संतृप्ति और मान दोनों को समायोजित करने से आते हैं, बजाय एकल स्लाइडर पर निर्भर रहने के।
जब RGB का उपयोग करना है और कब HSV में सोचना है, इस पर एक स्पष्ट रणनीति के साथ, आपका रंग प्रणाली समय के साथ पूर्वानुमानित और बनाए रखने में आसान रहती है।
RGB से HSV रूपांतरण तालिका
नीचे दी गई तालिका में कुछ परिचित रंगों का सेट है जो RGB और HSV प्रारूप दोनों में लिखा गया है। मान पढ़ने में आसान हैं, इसलिए ये रोज़मर्रा के काम में त्वरित संदर्भ के लिए आदर्श हैं।
| विवरण | RGB | HSV |
|---|---|---|
| सफेद | rgb(255, 255, 255) | hsv(0, 0%, 100%) |
| काला | rgb(0, 0, 0) | hsv(0, 0%, 0%) |
| लाल | rgb(255, 0, 0) | hsv(0, 100%, 100%) |
| हरा | rgb(0, 255, 0) | hsv(120, 100%, 100%) |
| नीला | rgb(0, 0, 255) | hsv(240, 100%, 100%) |
| पीला | rgb(255, 255, 0) | hsv(60, 100%, 100%) |
| सियान | rgb(0, 255, 255) | hsv(180, 100%, 100%) |
| मैजेंटा | rgb(255, 0, 255) | hsv(300, 100%, 100%) |
| ग्रे 1 | rgb(17, 17, 17) | hsv(0, 0%, 7%) |
| ग्रे 2 | rgb(51, 51, 51) | hsv(0, 0%, 20%) |
| ग्रे 3 | rgb(85, 85, 85) | hsv(0, 0%, 33%) |
| ग्रे 4 | rgb(119, 119, 119) | hsv(0, 0%, 47%) |
| ग्रे 5 | rgb(153, 153, 153) | hsv(0, 0%, 60%) |
| ग्रे 6 | rgb(204, 204, 204) | hsv(0, 0%, 80%) |
| नारंगी | rgb(255, 165, 0) | hsv(39, 100%, 100%) |
| बैंगनी | rgb(128, 0, 128) | hsv(300, 100%, 50%) |
| टील | rgb(0, 128, 128) | hsv(180, 100%, 50%) |
सटीक काम के लिए आप हमेशा पृष्ठ के शीर्ष पर कनवर्टर का उपयोग कर सकते हैं, जो किसी भी मान्य इनपुट के लिए मानक RGB से HSV एल्गोरिदम का पालन करता है।
अक्सर पूछे जाने वाले प्रश्न: RGB से HSV
- मैं RGB को HSV में क्यों बदलूँ?
RGB संग्रहण और निम्न स्तर के काम के लिए उत्कृष्ट है, लेकिन HSV रंग की तीव्रता और चमक को समायोजित करना आसान बनाता है। प्रारूपों के बीच चलने से आपको रंग के बारे में सोचने के दोनों तरीकों का लाभ उठाने की अनुमति मिलती है।
- H, S, और V कौन से रेंज का उपयोग करते हैं?
रंग को 0 से 360 डिग्री में लिखा जाता है। संतृप्ति और मान 0 प्रतिशत से 100 प्रतिशत तक के प्रतिशत होते हैं, यही कारण है कि अधिकांश पिकर्स उन्हें प्रतिशत लेबल के साथ स्लाइडर के रूप में दिखाते हैं।
- क्या HSV में परिवर्तित करने से रंग बदलता है?
नहीं। RGB और HSV दोनों एक ही रंग स्थान का वर्णन करते हैं। एक मान्य RGB त्रैतीयक और इसका HSV समकक्ष एक ही दृश्य रंग का प्रतिनिधित्व करते हैं; केवल संकेतन अलग है।
- HSV HSL से कैसे भिन्न है?
दोनों मॉडल रंग और संतृप्ति साझा करते हैं, लेकिन तीसरा मान समान नहीं है। HSL हल्कापन का उपयोग करता है, जो रंग की तुलना काले और सफेद दोनों से करता है, जबकि HSV मान का उपयोग करता है, जो रंग की तुलना केवल काले से करता है।
- क्या मैं एक परियोजना में RGB, HSV, और अन्य प्रारूपों को मिला सकता हूँ?
हाँ। एक सामान्य दृष्टिकोण यह है कि टोकनों के लिए एक मुख्य टेक्स्ट प्रारूप चुनें, जैसे HEX या HSL, और जब आपको अधिक सहज नियंत्रण की आवश्यकता हो तो उपकरणों या उपयोगिताओं में HSV में परिवर्तित करें। कुंजी यह है कि प्रणाली को सुसंगत बनाए रखें और मैनुअल गणनाओं के बजाय कनवर्टर्स पर भरोसा करें।