रंग कन्वर्टर
किसी भी रंग को HEX, RGB, HSL, HSV और CMYK के बीच बदलें। कोई रंग चुनें या किसी भी प्रारूप में कोई मान टाइप करें — बाकी हर नोटेशन आपके ब्राउज़र में ही तुरंत अपडेट हो जाता है।
HEX
RGB
HSL
HSV
hsv(18, 95%, 96%)
CMYK
cmyk(0%, 66%, 95%, 4%)
रंग कन्वर्टर का उपयोग कैसे करें
- 1
रंग चुनें या पेस्ट करें
अपना रंग पिकर खोलने के लिए स्वैच पर क्लिक करें, या HEX, RGB या HSL फ़ील्ड में कोई मान पेस्ट करें। आप जो भी रंग चुनते हैं, पूरा टूल उसी का अनुसरण करता है।
- 2
किसी भी प्रारूप में संपादित करें
सीधे HEX, RGB या HSL फ़ील्ड में टाइप करें। बाकी हर नोटेशन — HSV और CMYK सहित — आपके बदलाव करते ही फिर से गणना हो जाता है।
- 3
हर नोटेशन पढ़ें
एक ही रंग को एक साथ पाँच तरीकों से देखें, ताकि आप CSS, प्रिंट और इमेज एडिटर के बीच किसी डिज़ाइन का मिलान दूसरे टूल की ज़रूरत के बिना कर सकें।
- 4
जो चाहिए उसे कॉपी करें
किसी भी मान के बगल में दिए कॉपी बटन का उपयोग करके उसे अपने क्लिपबोर्ड पर रखें, अपनी स्टाइलशीट या डिज़ाइन फ़ाइल में डालने के लिए तैयार।
रंग प्रारूपों के लिए एक व्यावहारिक मार्गदर्शिका
एक ही रंग, अलग-अलग नोटेशन
HEX, RGB, HSL, HSV और CMYK अलग-अलग रंग नहीं हैं; स्क्रीन के काम के लिए ये रंग-स्पेस में एक ही बिंदु को लिखने के अलग-अलग तरीके हैं। शुद्ध लाल को #ff0000, rgb(255, 0, 0), या hsl(0, 100%, 50%) के रूप में लिखा जा सकता है, और तीनों बिल्कुल एक जैसे रेंडर होते हैं। नोटेशन चुनना इस बात पर निर्भर करता है कि आपके सामने जो काम है उसके लिए कौन-सा सोचने में सबसे आसान है, और यही वजह है कि इन्हें साथ-साथ दिखाने वाला कन्वर्टर सचमुच समय बचाता है। आप वही प्रारूप चुनते हैं जो आपके टूल में फ़िट बैठता है और उसे कॉपी कर लेते हैं, हाथ से गणित करने की बजाय।
इसका एक अपवाद CMYK है, जो प्रकाश की बजाय इंक को लक्ष्य करता है और इसलिए बाकियों पर ठीक-ठीक मैप नहीं होता — यह एक ऐसी बात है जिसे ध्यान में रखना ज़रूरी है और जिस पर हम नीचे लौटेंगे।
HEX और RGB एक ही संख्याएँ हैं
RGB किसी रंग का वर्णन तीन चैनलों — लाल, हरा और नीला — के रूप में करता है, हर एक 0 से 255 तक, जो प्रकाश की तरह मिलाए जाते हैं। HEX बस वही तीन संख्याएँ हैं जो आधार सोलह में लिखी जाती हैं, प्रति चैनल दो hex अंक। तो #f5530c में f5 लाल चैनल है, यानी 245, 53 हरा है, यानी 83, और 0c नीला है, यानी 12, जो ठीक rgb(245, 83, 12) देता है। चूँकि एक बाइट 0 से 255 तक के मान रखता है, हर चैनल को ठीक दो hex अंक चाहिए, और दोनों के बीच रूपांतरण बिना किसी हानि के और सीधा होता है।
शॉर्टहैंड HEX एक सुविधा है: तीन-अंकों वाला कोड हर अंक को दोगुना कर देता है, इसलिए #f50 का विस्तार #ff5500 हो जाता है। यह टूल शॉर्टहैंड को ठीक वैसे ही पढ़ता है जैसे कोई ब्राउज़र, और कोड को आगे हैश के साथ या उसके बिना, बड़े या छोटे अक्षरों में स्वीकार करता है।
अल्फ़ा: RGBA और HSLA
अल्फ़ा चैनल जोड़ने से कोई रंग आंशिक रूप से पारदर्शी हो जाता है। RGBA और HSLA एक चौथा मान जोड़ते हैं, एक ओपेसिटी जो पूरी तरह पारदर्शी के लिए 0 से लेकर पूरी तरह अपारदर्शी के लिए 1 तक होती है, इसलिए rgba(245, 83, 12, 0.5) वही नारंगी आधी ओपेसिटी पर है। आधुनिक CSS आठ-अंकों वाले HEX को भी सपोर्ट करता है, जहाँ आख़िरी दो अंक अल्फ़ा को एक बाइट के रूप में एनकोड करते हैं, इसलिए आधी अल्फ़ा लगभग रंग के बाद जोड़ी गई hex जोड़ी 80 होती है।
अल्फ़ा ही वह चीज़ है जो किसी रंग को उसके पीछे जो भी हो उसके साथ घुलने-मिलने देती है, जो ओवरले, स्क्रिम, नरम शैडो, और रंगीन काँच जैसे प्रभावों के लिए ज़रूरी है। याद रखें कि वही अल्फ़ा अलग-अलग बैकग्राउंड पर अलग दिखती है, क्योंकि पारदर्शिता का मतलब है कि अंतिम रूप आपके रंग और नीचे की परत का मिश्रण होता है।
HSL में बदलाव करना क्यों आसान है
HSL किसी रंग का वर्णन वैसे ही करता है जैसे कोई व्यक्ति उसके बारे में सोचता है: ह्यू कलर व्हील पर 0 से 360 डिग्री तक की स्थिति है, सैचुरेशन यह है कि रंग कितना चटक है, प्रतिशत के रूप में, और लाइटनेस यह है कि वह कितना चमकीला है, प्रतिशत के रूप में। यह संरचना हाथ से समायोजन को सहज बना देती है। उसी रंग की गहरी छाया पाने के लिए आप लाइटनेस घटाते हैं और ह्यू व सैचुरेशन को छेड़े बिना छोड़ देते हैं; किसी रंग को मद्धम करने के लिए आप सैचुरेशन घटाते हैं। शुद्ध RGB में इसके समतुल्य करने का मतलब है तीनों चैनलों को एक साथ बदलना, जिसे आँख से अंदाज़ लगाना कहीं ज़्यादा मुश्किल है।
इसीलिए रंग प्रणालियाँ बनाने में HSL चमकता है। बेस से थोड़ी गहरी हॉवर अवस्था चाहिए, या स्वैच की ऐसी कतार जो एक ही ह्यू साझा करे पर लाइटनेस में आगे बढ़ती जाए? बस एक HSL संख्या को थोड़ा खिसकाएँ। HSV, जिसे HSB भी लिखा जाता है, इससे गहराई से जुड़ा है पर ह्यू और सैचुरेशन को लाइटनेस की बजाय वैल्यू, यानी ब्राइटनेस, के साथ जोड़ता है, और यह वही मॉडल है जिसे कई इमेज एडिटर और रंग पिकर दिखाते हैं, इसलिए दोनों को पढ़ पाना आपको डिज़ाइन टूल के बीच धाराप्रवाह रखता है।
हल किया हुआ उदाहरण: सफ़ेद, काला और एक मध्यम रंग
छोर साफ़-सुथरे हैं। सफ़ेद #ffffff है, जो rgb(255, 255, 255) और hsl(0, 0%, 100%) है: हर चैनल अधिकतम पर, या HSL की भाषा में बिना किसी सैचुरेशन के पूरी लाइटनेस, इसलिए ह्यू बेमानी हो जाता है। काला #000000, rgb(0, 0, 0), और hsl(0, 0%, 0%) है: सब कुछ शून्य पर। एक मध्यम धूसर बीच में बैठता है, #808080 और rgb(128, 128, 128) के पास, जो HSL में hsl(0, 0%, 50%) है, और यह बख़ूबी दिखाता है कि किसी भी न्यूट्रल रंग का सैचुरेशन शून्य होता है और लाइटनेस उसकी ब्राइटनेस के अनुरूप चलती है।
अब एक असली रंग: वही नारंगी, #f5530c, rgb(245, 83, 12) और लगभग hsl(18, 92%, 50%) के रूप में पढ़ा जाता है। HSL रूप आपको एक ही नज़र में बता देता है कि यह लाल-नारंगी के पास एक गर्म ह्यू है, ख़ूब सैचुरेटेड, और मध्यम लाइटनेस पर — ऐसी जानकारी जिसे hex स्ट्रिंग छिपा लेती है। इनमें से किसी को भी टूल में पेस्ट करें और बाकियों को तुरंत भरते हुए देखें।
CMYK और स्क्रीन-से-प्रिंट की सीमाएँ
CMYK का मतलब है सायन, मैजेंटा, येलो और की, जहाँ की काला है, और यह एक सबट्रैक्टिव मॉडल है जो स्क्रीन पर प्रकाश की बजाय कागज़ पर इंक के लिए बना है। चूँकि यह उस प्रकाश को घटाकर काम करता है जिसे कागज़ परावर्तित करता है, यह हर उस चटक रंग को दोहरा नहीं सकता जो एक चमकता हुआ डिस्प्ले दिखा सकता है, इसलिए स्क्रीन पर दिखने वाला कोई शानदार नीला या हरा प्रिंट में अक्सर ज़्यादा फीका निकलता है। यह टूल जो CMYK मान बताता है वे RGB से सीधा गणितीय रूपांतरण हैं और एक शुरुआती बिंदु के रूप में सचमुच उपयोगी हैं, पर वे किसी रंग-प्रबंधित प्रिंट वर्कफ़्लो का विकल्प नहीं हैं।
रंग-संवेदनशील प्रिंट के लिए हमेशा अपने प्रिंटर की असली ICC प्रोफ़ाइल और एक प्रूफ़ से पुष्टि करें, क्योंकि डिवाइस, कागज़ और इंक सभी नतीजे को बदल देते हैं। यहाँ के CMYK आउटपुट को एक तेज़ अनुमान समझें, गारंटी नहीं।
नामित रंग और वाइड गैमट की ओर छलांग
CSS लगभग 150 नामित रंग भी देता है, tomato, rebeccapurple और slategray जैसे शब्द, जिनमें से हर एक बस किसी विशिष्ट hex मान का एक उपनाम है। ये त्वरित प्रोटोटाइपिंग और यादगार छायाओं के लिए सुविधाजनक हैं, हालाँकि किसी असली डिज़ाइन प्रणाली के लिए स्पष्ट hex या HSL मान आपको अधिक बारीक नियंत्रण और एकरूपता देते हैं। नामित रंग सुविधाजनक लेबल हैं, कोई अलग रंग-स्पेस नहीं।
आगे की ओर देखें तो, नए CSS रंग फ़ंक्शन उस क्लासिक sRGB गैमट से आगे बढ़ जाते हैं जिसे ये प्रारूप मानकर चलते हैं। परसेप्चुअली एकसमान oklch और चौड़े display-p3 जैसे स्पेस के फ़ंक्शन उन रंगों से ज़्यादा सैचुरेटेड रंग व्यक्त कर सकते हैं जिन तक HEX और RGB पहुँच पाते हैं, और जैसे-जैसे आधुनिक स्क्रीनें ज़्यादा सक्षम होती जा रही हैं यह मायने रखता है। यह टूल जिन HEX, RGB, HSL और HSV मानों को संभालता है वे वेब की रोज़मर्रा की मुद्रा बने हुए हैं, और उन्हें समझना उन नए स्पेस को आत्मविश्वास के साथ अपनाने की नींव है।
अक्सर पूछे जाने वाले प्रश्न
मैं किसी HEX रंग को RGB में कैसे बदलूँ?
HSL और HSV में क्या अंतर है?
क्या यह 3-अंकों वाले शॉर्टहैंड HEX को सपोर्ट करता है?
CMYK का उपयोग किसलिए होता है?
क्या मेरा डेटा किसी सर्वर पर अपलोड होता है?
संबंधित टूल्स
इन उपयोगी टूल्स के साथ आगे बढ़ें