HEX रंग कोड को RGB में कैसे कनवर्ट करें

· 5 मिनट पढ़ने का समय

HEX और RGB ठीक उन्हीं रंगों को लिखने के दो तरीके हैं। डिज़ाइनर और डेवलपर्स लगातार उनके बीच स्विच करते हैं: CSS स्टाइलशीट में HEX, JavaScript एनिमेशन में RGB, डिज़ाइन टूल में HSL। यह समझना कि वे कैसे संबंधित हैं रंग के काम को बहुत आसान बनाता है। एक कनवर्टर मानसिक अंकगणित को संभालता है ताकि आप सही रंग प्राप्त करने पर ध्यान केंद्रित कर सकें, न कि बेस-16 विभाजन पर।

HEX रंग कैसे काम करते हैं

#FF5733 जैसा HEX रंग कोड एक 6-अंकीय हेक्साडेसिमल संख्या है जो लाल, हरे और नीले चैनलों का प्रतिनिधित्व करती है:

भागHexदशमलवचैनल
FFFF255लाल
575787हरा
333351नीला

प्रत्येक चैनल 00 (0, कोई रंग नहीं) से FF (255, पूर्ण तीव्रता) तक होता है। इसलिए #FF5733 का अर्थ है पूर्ण लाल, कुछ हरा, थोड़ा नीला, जो आपको एक गर्म नारंगी-लाल देता है।

HEX को RGB में कैसे बदलें

  1. अपना HEX कोड दर्ज करें: #FF5733 जैसा रंग कोड टाइप करें या पेस्ट करें या रंग चयनकर्ता का उपयोग करें।
  2. RGB मान देखें: समतुल्य लाल, हरे और नीले मान देखें (प्रत्येक 0-255)।
  3. किसी भी प्रारूप में कॉपी करें: मानों को rgb(255, 87, 51), व्यक्तिगत चैनल या HSL जैसे अन्य प्रारूपों के रूप में लें।

वेब पर रंग कोड का संक्षिप्त इतिहास

प्रारंभिक वेब ब्राउज़र (Mosaic 1993, Netscape 1994) में रंग केवल नामित रंगों का उपयोग करते थे: red, blue, green। HTML 3.2 विनिर्देश (1997) ने BGCOLOR विशेषता के माध्यम से हेक्साडेसिमल रंग कोड पेश किए, और CSS 1 (1996) ने उन्हें सार्वभौमिक बनाया। दशमलव पर HEX का चुनाव व्यावहारिक था: 6-वर्ण का HEX कोड rgb(255, 87, 51) से छोटा है और रंग चयनकर्ता से कॉपी-पेस्ट करना आसान है।

RGB रंग मॉडल स्वयं बहुत पुराना है। James Clerk Maxwell ने 1861 में दिखाया कि मानव आँख को दिखाई देने वाला कोई भी रंग लाल, हरे और नीले प्रकाश को मिलाकर बनाया जा सकता है। टेलीविजन (1930 के दशक) और कंप्यूटर मॉनिटर (1970 के दशक) ने इस सिद्धांत का सीधे उपयोग किया: प्रत्येक पिक्सेल तीन उप-पिक्सेल (एक लाल, एक हरा, एक नीला) विभिन्न चमक पर हैं।

आधुनिक CSS (2010 से) ने कई और रंग प्रारूप जोड़े: hsl() (रंग, संतृप्ति, चमक), hwb() (रंग, सफेदी, कालापन), lab() (अवधारणात्मक रूप से एकसमान), lch(), oklab(), oklch(), और मनमाने रंग स्थानों के लिए color()। सभी HEX/RGB के समान रंगों का प्रतिनिधित्व करते हैं लेकिन विभिन्न मानसिक मॉडल के साथ। HEX बना रहता है क्योंकि यह घना, कॉपी-पेस्ट करने योग्य और साझा करने में आसान है।

मैनुअल रूपांतरण: इसे अपने सिर में कैसे करें

आपको साधारण HEX मानों को बदलने के लिए किसी उपकरण की आवश्यकता नहीं है। चाल 16 की शक्तियों को जानना है:

5A जैसे HEX जोड़ी के लिए: पहला अंक 16 गुना प्लस दूसरा अंक। 5A = 5 × 16 + 10 = 90।

शॉर्टकट के लिए:

जोड़े 33, 66, 99, CC (किसी भी संयोजन में) 1990 के दशक की क्लासिक «वेब-सुरक्षित» 216-रंग पैलेट का उत्पादन करते हैं। वे आज भी डिज़ाइनर के मूडबोर्ड में लगातार दिखाई देते हैं।

सामान्य रंग कोड

रंगHEXRGB
सफेद#FFFFFFrgb(255, 255, 255)
काला#000000rgb(0, 0, 0)
लाल#FF0000rgb(255, 0, 0)
हरा#00FF00rgb(0, 255, 0)
नीला#0000FFrgb(0, 0, 255)
पीला#FFFF00rgb(255, 255, 0)
सियान#00FFFFrgb(0, 255, 255)
मैजेंटा#FF00FFrgb(255, 0, 255)
Tailwind slate-900#0F172Argb(15, 23, 42)
Tailwind blue-500#3B82F6rgb(59, 130, 246)
Material indigo 500#3F51B5rgb(63, 81, 181)
GitHub बटन हरा#2EA44Frgb(46, 164, 79)

अल्फा के साथ HEX (8-अंकीय HEX)

CSS 4 (2017) ने अल्फा चैनल के साथ 8-अंकीय HEX पेश किया। #FF5733CC 80% अपारदर्शिता के साथ rgb(255, 87, 51) है (CC हेक्स में = 204, 255 से विभाजित = 0.80)।

आधुनिक ब्राउज़रों में ब्राउज़र समर्थन सार्वभौमिक है (Chrome 62+, Firefox 49+, Safari 9.1+, Edge 79+)। नई परियोजनाओं के लिए, 8-अंकीय HEX rgba() का एक स्वच्छ विकल्प है। पुरानी परियोजनाओं के लिए, पीछे की संगतता के लिए rgba() पर बने रहें।

एक छोटा 4-अंकीय HEX भी मौजूद है: #F80C #FF8800CC के समान है। 3-अंकीय HEX के समान शॉर्टकट नियम।

प्रत्येक प्रारूप के लिए उपयोग के मामले

HEX का उपयोग करें जब:

RGB का उपयोग करें जब:

HSL का उपयोग करें जब:

OKLCH का उपयोग करें जब:

सामान्य कठिनाइयां

सुझाव

गोपनीयता

HEX-से-RGB कनवर्टर पूरी तरह से आपके ब्राउज़र में चलता है। आप जो रंग दर्ज करते हैं, आपके कस्टम पैलेट और कोई भी सहेजे गए मान आपके डिवाइस पर रहते हैं। यह फ़ाइल-रूपांतरण उपकरणों की तुलना में कम मायने रखता है (एक रंग कोड व्यक्तिगत रूप से संवेदनशील नहीं है), लेकिन यह डिज़ाइन-गोपनीयता कारणों से मायने रखता है: आप जिन रंगों के साथ प्रयोग कर रहे हैं वे अघोषित ब्रांड दिशाओं, NDA के तहत क्लाइंट कार्य या विकास में उत्पाद थीमिंग को प्रकट कर सकते हैं। केवल-ब्राउज़र गणना में शून्य एक्सपोज़र है।

ये टूल आज़माएं

HEX से RGB कन्वर्टर रंग पैलेट जनरेटर कंट्रास्ट चेकर

अक्सर पूछे जाने वाले प्रश्न

HEX को RGB में मैन्युअल रूप से कैसे कनवर्ट करें?

हेक्स कोड को तीन जोड़ियों में काटें (उदाहरण के लिए #FF8800 FF, 88, 00 बन जाता है)। प्रत्येक जोड़ी को आधार 16 से आधार 10 में कनवर्ट करें। FF = 255, 88 = 136, 00 = 0। परिणाम rgb(255, 136, 0) है।

3-अंकीय HEX कोड के बारे में क्या?

3-अंकीय HEX एक शॉर्टकट है जहाँ प्रत्येक अंक दोगुना होता है। #F80 #FF8800 के बराबर है। अधिकांश कन्वर्टर दोनों फ़ॉर्मेट को स्वचालित रूप से संभालते हैं।

HEX या RGB का उपयोग कब करें?

HEX अधिक कॉम्पैक्ट है और CSS में अधिक सामान्य है। जब कोड में व्यक्तिगत रूप से चैनलों में हेरफेर करना हो या पारदर्शिता के लिए rgba() का उपयोग करना हो तो RGB बेहतर है। दोनों समान रंगों का प्रतिनिधित्व करते हैं।

HEX कोड में # प्रतीक क्या दर्शाता है?

हैश (#) एक उपसर्ग है जो इंगित करता है कि मान एक हेक्साडेसिमल रंग कोड है। यह मान का हिस्सा नहीं है। कुछ टूल्स हैश के साथ या बिना कोड स्वीकार करते हैं।