HEX से HSV कन्वर्टर
मैन्युअल गणनाएँ किए बिना HEX रंग कोड को HSV मानों में बदलें। यह कन्वर्टर वेब डेवलपर्स, डिज़ाइनर्स और उन सभी के लिए बनाया गया है जिन्हें HEX और HSV के बीच तेज़ और भरोसेमंद तरीके से काम करना होता है।
HEX फॉर्मेट में एक रंग दर्ज करें और आप उसका संबंधित HSV मान देखेंगे। HSV, HEX और RGB की तरह ही उसी रंग का वर्णन करता है, लेकिन इसे ह्यू, सैचुरेशन और ब्राइटनेस के आधार पर व्यवस्थित करता है, जिसे समायोजित करना अक्सर आसान होता है।
HSV का उपयोग खास तौर पर कलर पिकर और ग्राफ़िक्स सॉफ़्टवेयर में किया जाता है। इस पेज पर आप जानेंगे कि HSV कैसे काम करता है और किसी भी HEX रंग को चरण दर चरण HSV में कैसे बदला जाए।
HEX रंग कोड क्या है
HEX रंग RGB मानों को हेक्साडेसिमल संख्या प्रणाली में लिखने का एक संक्षिप्त तरीका है। इसे #RRGGBB के रूप में लिखा जाता है, जहाँ हर दो अक्षर एक चैनल को नियंत्रित करते हैं: लाल, हरा या नीला।
ये जोड़े 00 से FF तक होते हैं। 00 के पास के मान उस चैनल की कम तीव्रता दिखाते हैं, जबकि FF के पास के मान अधिक तीव्रता दर्शाते हैं। उदाहरण के लिए, #000000 सभी चैनल बंद करता है और काला रंग देता है, जबकि #FFFFFF सभी को अधिकतम पर सेट करके सफेद रंग बनाता है।
जब ब्राउज़र किसी HEX मान को पढ़ता है, तो वह उसे तीन भागों में बाँटता है और हर भाग को 0 से 255 के बीच दशमलव संख्या में बदलता है। यही RGB ट्रिपलेट रेंडरिंग इंजन इस्तेमाल करते हैं। HEX बस RGB रंगों का एक सुविधाजनक टेक्स्ट रूप है, जो CSS और डिज़ाइन टूल्स में स्वाभाविक रूप से फिट होता है।
HSV क्या है
HSV का अर्थ है Hue, Saturation और Value। यह एक रंग मॉडल है जो रंगों को उनके मूल टोन, रंग की तीव्रता और कुल ब्राइटनेस के आधार पर व्यवस्थित करता है, न कि अलग-अलग लाल, हरे और नीले चैनलों के रूप में।
Hue को रंग चक्र पर 0 से 360 डिग्री तक मापा जाता है। सैचुरेशन और वैल्यू को 0% से 100% तक प्रतिशत में लिखा जाता है। सैचुरेशन यह नियंत्रित करता है कि रंग कितना चटख या धूसर दिखता है, जबकि वैल्यू यह बताती है कि रंग काले की तुलना में कितना चमकीला है।
कम सैचुरेशन पर रंग धूसर की ओर जाते हैं, और कम वैल्यू पर रंग गहरे और लगभग काले हो जाते हैं। वैल्यू बढ़ाने से रंग हल्का होता है, जबकि सैचुरेशन बढ़ाने से रंग अधिक तीव्र दिखता है। ये तीनों मिलकर hsv(210, 50%, 70%) जैसे HSV मान बनाते हैं।
HEX से HSV का फ़ॉर्मूला
#RRGGBB -> hsv(h, s, v)
1) Convert each pair to decimal:
RR, GG, BB -> r, g, b in [0, 255]
2) Normalize to the range [0, 1]:
r' = r / 255, g' = g / 255, b' = b / 255
3) Find max and min of r', g', b':
max = max(r', g', b')
min = min(r', g', b')
delta = max - min
4) Compute value:
v = max
5) Compute saturation:
if max == 0 then s = 0
else s = delta / max
6) 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)
7) Convert h to [0, 360), s and v to percentages:
H = h
S = s * 100
V = v * 100यह एल्गोरिदम पहले HEX रंग को RGB में बदलता है, फिर चैनलों को सामान्यीकृत करता है और न्यूनतम व अधिकतम मानों के अंतर के आधार पर ह्यू, सैचुरेशन और वैल्यू की गणना करता है। परिणाम एक HSV ट्रिपलेट होता है, जो उसी रंग को ऐसे रूप में दर्शाता है जिसे दृश्य रूप से समायोजित करना आसान होता है।
#4FA3C2 के लिए उदाहरण
1) HEX से RGB:
#4FA3C2 -> (79, 163, 194)
2) सामान्यीकरण:
r' = 79 / 255
g' = 163 / 255
b' = 194 / 255
3) max, min, delta, फिर h, s, v की गणना करें
4) अंतिम HSV (गोल):
hsv(196, 59%, 76%)HEX से HSV रूपांतरण चरण दर चरण कैसे काम करता है
जब आप किसी HEX रंग को HSV में बदलते हैं, तो प्रक्रिया हमेशा RGB रूप से होकर गुजरती है। HEX मान को तीन जोड़ों में बाँटा जाता है, उन्हें दशमलव मानों में बदला जाता है और फिर HSV फ़ॉर्मूला लागू किया जाता है।
#1A2B3C
split into [1A, 2B, 3C]
-> rgb(26, 43, 60)
-> hsv(h, s, v)नीचे #1A2B3C रंग के लिए हर चरण को विस्तार से दिखाया गया है।
- चरण 1 - HEX मान को विभाजित करें
[1A] [2B] [3C] - चरण 2 - हर जोड़े को दशमलव में बदलें
हर दो अक्षरों का समूह एक हेक्साडेसिमल संख्या होता है। इसे दशमलव में बदलने पर आपको 0 से 255 के बीच RGB चैनल मान मिलते हैं, जिनका उपयोग HSV फ़ॉर्मूला करता है।
1A = (1 * 16) + 10 = 26 2B = (2 * 16) + 11 = 43 3C = (3 * 16) + 12 = 60 - चरण 3 - RGB को HSV में बदलें
RGB मानों को 0 से 1 की सीमा में सामान्यीकृत करें, फिर अधिकतम, न्यूनतम और डेल्टा निकालें और ह्यू, सैचुरेशन व वैल्यू के लिए HSV समीकरण लागू करें। अंत में सैचुरेशन और वैल्यू को प्रतिशत में बदलें।
hsv(210, 57%, 24%)
यही प्रक्रिया किसी भी मान्य HEX रंग के लिए काम करती है: RGB में बदलें, HSV फ़ॉर्मूला लागू करें और CSS या डिज़ाइन सिस्टम के लिए ज़रूरी सटीकता तक परिणाम को राउंड करें।
HEX और HSV कहाँ उपयोगी हैं
HEX और HSV एक ही रंग स्थान को अलग-अलग दृष्टिकोण से दर्शाते हैं। HEX डेवलपर्स के लिए संक्षिप्त और परिचित है, जबकि HSV डिज़ाइन टूल्स में स्लाइडर या व्हील के साथ काम करते समय ज़्यादा सहज लगता है।
HEX के उपयोग
- संक्षिप्त रंग टोकन: HEX मान पढ़ने और कॉपी करने में आसान होते हैं, इसलिए ये डिज़ाइन टोकन और डॉक्युमेंटेशन के लिए उपयुक्त हैं।
- स्थिर पैलेट: जब कोई रंग शायद ही बदलता हो, तो एक ही HEX स्ट्रिंग काफ़ी होती है और फ़ाइलों को साफ़ रखती है।
- टूल्स के साथ संगतता: अधिकांश ग्राफ़िक्स एडिटर और ब्राउज़र सीधे HEX इनपुट स्वीकार करते हैं, इसलिए यह एक सुरक्षित डिफ़ॉल्ट फ़ॉर्मेट है।
HSV के उपयोग
- इंटरएक्टिव कलर पिकर: कई पिकर ह्यू को व्हील के रूप में और सैचुरेशन व वैल्यू को स्लाइडर के रूप में दिखाते हैं, जो सीधे HSV मॉडल से मेल खाते हैं।
- वेरिएशन बनाना: सिर्फ सैचुरेशन और वैल्यू बदलकर किसी आधार रंग के हल्के, गहरे या कम सैचुरेटेड संस्करण बनाना आसान होता है।
- डिज़ाइन एक्सप्लोरेशन: पैलेट के साथ प्रयोग करते समय HSV मान समायोजित करना तीन अलग-अलग RGB चैनल बदलने से ज़्यादा सहज लगता है।
सार
जब आपको संक्षिप्त और स्थिर रंग कोड चाहिए हों, तो HEX का उपयोग करें। पिकर के साथ काम करने, रंग स्केल बनाने या ब्राइटनेस और तीव्रता को सीधे नियंत्रित करने के लिए HSV चुनें। आप बिना जानकारी खोए दोनों फ़ॉर्मेट के बीच आसानी से बदल सकते हैं।
CSS और डिज़ाइन टूल्स में HSV उपयोग करने के व्यावहारिक सुझाव
हालाँकि CSS मूल रूप से RGB और HSL के साथ काम करता है, कई डिज़ाइनर HSV में सोचते हैं क्योंकि अधिकांश पिकर यही दिखाते हैं। नीचे दिए गए सुझाव इन रूपों के बीच आसानी से काम करने में मदद करते हैं।
HSV को अपने डिज़ाइन सिस्टम से मेल कराएँ
- एक आधार ह्यू चुनें: ब्रांड रंग के लिए एक ही ह्यू चुनें और होवर, एक्टिव और डिसेबल जैसी अवस्थाओं के लिए सैचुरेशन और वैल्यू बदलें।
- सैचुरेशन से ताक़त दिखाएँ: हल्के बैकग्राउंड के लिए कम सैचुरेशन और मुख्य एक्शन व एक्सेंट के लिए अधिक सैचुरेशन रखें।
HSV और अन्य फ़ॉर्मेट के बीच काम करना
- एक बार कन्वर्ट करें, फिर दोबारा उपयोग करें: HSV से HEX या HSL में बदलने के लिए कन्वर्टर का उपयोग करें और अंतिम टोकन को अपने कोडबेस में एक ही फ़ॉर्मेट में रखें।
- अल्फ़ा को अलग रखें: जब अपारदर्शिता चाहिए हो, तो CSS में RGBA या HSLA का उपयोग करें, लेकिन आधार रंग चुनते समय HSV में ही सोचें।
आम गलतियाँ जिनसे बचना चाहिए
- वैल्यू को लाइटनेस से भ्रमित करना: HSV में वैल्यू काले के सापेक्ष ब्राइटनेस को मापती है, न कि HSL की तरह काले और सफेद के बीच संतुलन को।
- गहराई के लिए सिर्फ वैल्यू का उपयोग: फीके या बहुत कठोर रंगों से बचने के लिए सैचुरेशन और वैल्यू दोनों में बदलाव करें।
- बहुत ज़्यादा नोटेशन मिलाना: अपनी स्टाइल्स में एक मुख्य फ़ॉर्मेट (HEX, RGB या HSL) चुनें और केवल ज़रूरत पड़ने पर HSV से कन्वर्ट करें।
इन दिशानिर्देशों का पालन करने से आपके रंग अनुमानित रहते हैं और उनका रखरखाव आसान होता है, भले ही आप अलग-अलग टूल्स और रंग मॉडलों के बीच स्विच करें।
HEX से HSV रूपांतरण तालिका
नीचे दी गई संदर्भ तालिका में कुछ सामान्य HEX रंग और उनके संबंधित HSV मान दिए गए हैं। इसमें प्राथमिक रंग, ग्रेस्केल स्टेप्स और यूज़र इंटरफ़ेस में अक्सर इस्तेमाल होने वाले मान शामिल हैं।
| विवरण | HEX | HSV |
|---|---|---|
| सफेद | #FFFFFF | hsv(0, 0%, 100%) |
| काला | #000000 | hsv(0, 0%, 0%) |
| लाल | #FF0000 | hsv(0, 100%, 100%) |
| हरा | #00FF00 | hsv(120, 100%, 100%) |
| नीला | #0000FF | hsv(240, 100%, 100%) |
| पीला | #FFFF00 | hsv(60, 100%, 100%) |
| सियान | #00FFFF | hsv(180, 100%, 100%) |
| मैजेंटा | #FF00FF | hsv(300, 100%, 100%) |
| धूसर 1 | #111111 | hsv(0, 0%, 7%) |
| धूसर 2 | #333333 | hsv(0, 0%, 20%) |
| धूसर 3 | #555555 | hsv(0, 0%, 33%) |
| धूसर 4 | #777777 | hsv(0, 0%, 47%) |
| धूसर 5 | #999999 | hsv(0, 0%, 60%) |
| धूसर 6 | #CCCCCC | hsv(0, 0%, 80%) |
| हल्का धूसर | #F0F0F0 | hsv(0, 0%, 94%) |
| UI धूसर | #E0E0E0 | hsv(0, 0%, 88%) |
| गहरा UI धूसर | #1A1A1A | hsv(0, 0%, 10%) |
| गहरा लाल | #800000 | hsv(0, 100%, 50%) |
| गहरा हरा | #008000 | hsv(120, 100%, 50%) |
| गहरा नीला | #000080 | hsv(240, 100%, 50%) |
| नारंगी | #FFA500 | hsv(39, 100%, 100%) |
| बैंगनी | #800080 | hsv(300, 100%, 50%) |
| टील | #008080 | hsv(180, 100%, 50%) |
तालिका में दिए गए HSV मान पढ़ने में आसान रखने के लिए राउंड किए गए हैं। अधिक सटीक काम के लिए आप किसी भी मान्य HEX रंग के लिए कन्वर्टर का उपयोग कर सकते हैं।
FAQ: HEX से HSV
- HEX से HSV में क्यों बदलें
HEX रंग टोकन स्टोर करने के लिए बेहतरीन है, लेकिन ब्राइटनेस या तीव्रता को नियंत्रित करना HSV में आसान होता है। दोनों के बीच कन्वर्ट करने से सुविधा और नियंत्रण दोनों मिलते हैं।
- H, S और V की रेंज क्या होती है
Hue की रेंज 0 से 360 डिग्री होती है। Saturation और Value की रेंज 0 प्रतिशत से 100 प्रतिशत तक होती है। कई टूल HSV को तीन संख्यात्मक फ़ील्ड या स्लाइडर के रूप में दिखाते हैं।
- क्या HSV, HEX या RGB से ज़्यादा सटीक है
नहीं। ये सभी एक ही रंगों का वर्णन करते हैं। अंतर सिर्फ़ इस बात में है कि जानकारी कैसे व्यवस्थित की गई है और हाथ से रंग समायोजित करना कितना आसान है।
- HSV, HSL से कैसे अलग है
दोनों में ह्यू और सैचुरेशन समान होते हैं, लेकिन तीसरा मान अलग होता है। HSL लाइटनेस का उपयोग करता है, जबकि HSV वैल्यू का, जो काले के सापेक्ष ब्राइटनेस मापता है।
- क्या एक प्रोजेक्ट में HEX, HSV, RGB और HSL को मिलाया जा सकता है
हाँ। कई टीमें एक मुख्य फ़ॉर्मेट चुनती हैं और ज़रूरत के अनुसार अन्य फ़ॉर्मेट में कन्वर्ट करती हैं। मुख्य बात यह है कि सिस्टम सुसंगत रहे और मानसिक गणनाओं के बजाय कन्वर्टर का उपयोग किया जाए।