आरजीबी ते हेक्स रूपांतर: हे पेज कसे काम करते
हे पेज तीन संख्या घेते — लाल, हिरवा आणि निळा — प्रत्येकी ० ते २५५ पर्यंतची श्रेणी — आणि लगेच समतुल्य हेक्साडेसिमल रंग कोड (उदा. #1E90FF) दाखवते. यासोबतच तो रंग दृश्य स्वरूपातही दाखवला जातो आणि इतर सर्व समर्थित रंग स्वरूपे (HSL, HSV, CMYK, LAB, तसेच कलर पिकर) एकाच वेळी अपडेट होतात. तुम्ही हेक्स मूल्य थेट CSS, डिझाइन सॉफ्टवेअर किंवा हेक्स कोडची अपेक्षा करणाऱ्या कोणत्याही वर्कफ्लोमध्ये वापरू शकता.
या पेजची खासियत म्हणजे ते RGB (दशांश, तीन चॅनेल ०–२५५) वरून हेक्स (हेक्साडेसिमल, सहा-अंकी किंवा तीन-अंकी शॉर्टहँड) मध्ये रूपांतर करते. दोन्ही स्वरूप एकच रंग श्रेणी दर्शवतात — बहुतेक डिस्प्लेवर वापरले जाणारे sRGB कार्यक्षेत्र — त्यामुळे कोणतेही गॅमट क्लिपिंग किंवा अंदाजे मूल्य नाही. हेक्स आउटपुट नेहमी # ने सुरू होते आणि जोपर्यंत तुम्ही आठ-अंकी स्वरूप वापरत नाही तोपर्यंत त्यात कोणताही अल्फा चॅनेल नसतो. टूलचा RGB इनपुट तीन संख्यांची अपेक्षा करतो, स्वल्पविराम किंवा स्पेसने विभाजित (उदा. 79, 70, 229), आणि परिणामी हेक्स कोड नेहमी सहा अंकी असतो (उदा. #4F46E5) कारण प्रत्येक ०–२५५ मूल्य दोन-अंकी हेक्स जोडीत मॅप होते.
हेक्साडेसिमल रंग कोडची रचना
हेक्साडेसिमल रंग कोड हा बेस-१६ संख्यापद्धतीवर आधारित आहे. # चिन्हानंतर सहा अंक असतात: पहिले दोन लाल, दुसरे दोन हिरवे आणि शेवटचे दोन निळे. प्रत्येक जोडी ०० ते FF पर्यंत असते, म्हणजे ० ते २५५ डेसिमल. उदाहरणार्थ, #FF0000 म्हणजे शुद्ध लाल, #00FF00 म्हणजे शुद्ध हिरवा, #0000FF म्हणजे शुद्ध निळा. हा कोड केस-इनसेन्सिटिव्ह आहे — #1E90FF आणि #1e90ff एकच रंग दर्शवतात.
टूल सहा-अंकी स्वरूपच आउटपुट करते. ते आपोआप तीन-अंकी शॉर्टहँडमध्ये संकुचित करत नाही (उदा. #AABBCC हे #ABC मध्ये बदलत नाही). मात्र, हेक्स इनपुट फील्ड तीन-अंकी शॉर्टहँड स्वीकारते (उदा. #abc), जे टूल अंतर्गतपणे सहा-अंकी स्वरूपात विस्तारित करते. जर सर्व जोड्यांमध्ये दोन्ही अंक समान असतील तरच हे शक्य आहे — #abc म्हणजे #aabbcc.
तीन-अंकी शॉर्टहँडचा वापर CSS मध्ये सामान्य आहे, विशेषतः जेव्हा रंग संकुचित ठेवायचा असतो. पण हे टूल सहा-अंकी कोड दाखवते, कारण ते सर्व संभाव्य RGB मूल्यांना अचूकपणे दर्शवते.
रूपांतराचे गणित: दशांश ते हेक्साडेसिमल
प्रत्येक ०–२५५ मूल्याचे हेक्साडेसिमलमध्ये रूपांतर करण्यासाठी फक्त दोन पायऱ्या लागतात:
१. भागाकार १६ ने: ०–२५५ मधील संख्या १६ ने भागा. भागाकार (quotient) हा पहिला हेक्स अंक असेल (०–१५). बाकी (remainder) हा दुसरा हेक्स अंक असेल. २. हेक्स अंकात रूपांतर: भागाकाराचे मूल्य किंवा बाकी १०–१५ असल्यास ते A-F मध्ये रूपांतरित करा. ०–९ तसेच ठेवा.
उदाहरणार्थ, ७९ (लाल मूल्य) घ्या:
- ७९ ÷ १६ = ४ (भागाकार) आणि बाकी १५.
- १५ हेक्समध्ये F आहे.
- म्हणून ७९ → ४F.
हिरव्या ७० साठी:
- ७० ÷ १६ = ४ (भागाकार) आणि बाकी ६.
- ६ हेक्समध्ये ६च आहे.
- म्हणून ७० → ४६.
निळ्या २२९ साठी:
- २२९ ÷ १६ = १४ (भागाकार) आणि बाकी ५.
- १४ हेक्समध्ये E आहे.
- म्हणून २२९ → E5.
अशा प्रकारे #4F46E5 हा कोड तयार होतो. हे रूपांतर अचूक आणि व्यस्त आहे — #4F46E5 मधून मूळ RGB मूल्ये (७९, ७०, २२९) पुन्हा मिळवता येतात.
खाली काही सामान्य मूल्यांचे रूपांतर दिले आहे:
| दशांश (R,G,B) | हेक्स कोड |
|---|---|
| ०, ०, ० | #000000 |
| २५५, २५५, २५५ | #FFFFFF |
| २५५, ०, ० | #FF0000 |
| ०, २५५, ० | #00FF00 |
| ०, ०, २५५ | #0000FF |
| १२८, १२८, १२८ | #808080 |
आरजीबी रंग मॉडेल आणि sRGB कार्यक्षेत्र
RGB हे अॅडिटीव्ह रंग मॉडेल आहे — लाल, हिरवा आणि निळा प्रकाश एकत्र करून रंग तयार होतो. जेव्हा तिन्ही प्रकाश शून्य असतात तेव्हा काळा, आणि जेव्हा तिन्ही पूर्ण (२५५) असतात तेव्हा पांढरा रंग दिसतो. मध्यवर्ती मूल्ये इतर रंग देतात. हे मॉडेल संगणक स्क्रीन, टीव्ही आणि मोबाइल डिस्प्लेवर वापरले जाते.
प्रत्येक चॅनेल ०–२५५ का वापरतो? कारण २५६ ही २^८ आहे — एक बाइट. संगणक आठ बिट्समध्ये डेटा साठवतो, त्यामुळे प्रति चॅनेल २५६ शक्यता. यामुळे एकूण २५६^३ = १,६७,७७,२१६ रंग तयार होतात. हे सर्व रंग sRGB नावाच्या रंग कार्यक्षेत्रात परिभाषित आहेत. sRGB हे बहुतेक आधुनिक डिस्प्ले आणि वेब ब्राउझरचे डिफॉल्ट कार्यक्षेत्र आहे.
RGB आणि हेक्स यांच्यातील रूपांतर हे sRGB कार्यक्षेत्रातच राहते. म्हणून कोणतेही रंग बाहेर पडत नाहीत किंवा आकसले जात नाहीत — रूपांतर अचूक आणि उलट करता येण्याजोगे आहे. याउलट, प्रिंटिंगमध्ये वापरल्या जाणाऱ्या CMYK किंवा LAB सारख्या मॉडेल्समध्ये रूपांतर करताना गॅमट बदलामुळे रंग बदलू शकतो, पण हेक्स आणि RGB मध्ये ही समस्या नाही.
आरजीबी इनपुट फॉरमॅट आणि सामान्य चुका
टूलमध्ये RGB मूल्ये प्रविष्ट करण्यासाठी दोन स्वीकार्य स्वरूप आहेत: स्वल्पविरामाने विभाजित (उदा. 79, 70, 229) किंवा स्पेसने विभाजित (उदा. 79 70 229). तीन पेक्षा जास्त संख्या असल्यास किंवा चुकीचे स्वरूप दिल्यास त्रुटी संदेश दिसेल.
सामान्य चुका:
- मूल्य ०–२५५ च्या बाहेर: जर कोणतेही मूल्य २५५ पेक्षा मोठे किंवा ० पेक्षा लहान असेल तर त्रुटी येते. उदाहरणार्थ,
256, 0, 0वैध नाही. - व्याकरणाच्या चुका: तीन संख्या नव्हे तर दोन किंवा चार संख्या देणे. किंवा
79,70,229(स्वल्पविरामानंतर स्पेस नसली तरी चालते — टूल स्वल्पविराम आणि स्पेस दोन्ही हाताळते, पण79, 70,229हे वेगळे आहे). - अक्षर असलेली मूल्ये: उदा.
79, 70, FF— हे वैध नाही, कारण RGB इनपुट फक्त संख्याच अपेक्षित आहे. - हेक्स इनपुटमध्ये मिसळणे: कधीकधी वापरकर्ते RGB फील्डमध्ये
#FFFFFFलिहिण्याचा प्रयत्न करतात. पण हे टूल वेगळे इनपुट फील्ड वेगळे ठेवते.
जर तुम्ही चुकीचे मूल्य टाकले तर टूल हा संदेश दाखवेल: “Enter RGB as three numbers 0–255, like 79, 70, 229.” (मराठीमध्ये: “०–२५५ मधील तीन संख्या टाका, जसे ७९, ७०, २२९.”) सर्व प्रक्रिया तुमच्या ब्राउझरमध्येच होते — काहीही सर्व्हरवर पाठवले जात नाही.
हेक्स रंग कोडचा वेब डिझाइनमध्ये वापर
CSS मध्ये हेक्स रंग कोड सर्वात सामान्य स्वरूपांपैकी एक आहे. हे color, background-color, border-color इत्यादी गुणधर्मांमध्ये वापरले जातात. उदाहरणार्थ:
body { background-color: #1E90FF; }
h1 { color: #4F46E5; }
जर तुम्हाला अल्फा चॅनेल हवा असेल (अपारदर्शकता), तर आठ-अंकी हेक्स वापरता येईल: #RRGGBBAA. पण या टूलचा हेक्स आउटपुट नेहमी सहा-अंकी असतो — अल्फा नसलेला. तुम्ही इच्छित असल्यास स्वतः आठवा अंक जोडू शकता (उदा. #1E90FF80).
तीन-अंकी शॉर्टहँड CSS मध्ये वैध आहे, पण ते फक्त तेव्हाच वापरले जाते जेव्हा प्रत्येक जोडीतील दोन्ही अंक समान असतात (उदा. #AABBCC → #ABC). तथापि, टूल हे संकुचन आपोआप करत नाही, जेणेकरून रंग कोड नेहमी स्पष्ट आणि पूर्ण राहील.
हेक्स कोड वेब डिझाइनमध्ये इतके लोकप्रिय आहेत कारण ते कॉम्पॅक्ट आणि मानवी वाचनीय आहेत. डेव्हलपर सहसा डिझाइन टूल्समधून RGB मूल्ये घेतात आणि त्यांना हेक्समध्ये रूपांतरित करून CSS मध्ये पेस्ट करतात. हे टूल अचूकपणे ते काम करते.
वारंवार विचारले जाणारे प्रश्न (FAQ)
प्रश्न १: मी RGB मूल्ये ०-२५५ ऐवजी ०-१०० टक्के स्वरूपात टाकू शकतो का?
नाही. या टूलचा RGB इनपुट फक्त ०–२५५ या पूर्णांक श्रेणीची अपेक्षा करतो. टक्केवारी स्वरूप (उदा. 30%, 50%, 70%) येथे वैध नाही.
प्रश्न २: तीन-अंकी हेक्स कोड (#FFF) मी इनपुट फील्डमध्ये लिहिला तर काय होईल?
हेक्स इनपुट फील्ड तीन-अंकी शॉर्टहँड स्वीकारते. टूल अंतर्गतपणे ते सहा-अंकी स्वरूपात विस्तारित करेल (#FFF → #FFFFFF). मात्र, RGB इनपुट फील्डमध्ये हे काम करणार नाही.
प्रश्न ३: रूपांतरित हेक्स कोड sRGB व्यतिरिक्त इतर कार्यक्षेत्रात अचूक राहील का?
नाही. हे रूपांतर sRGB कार्यक्षेत्रावर आधारित आहे. जर तुम्ही हा कोड Adobe RGB किंवा DCI-P3 सारख्या इतर कार्यक्षेत्रात वापरला तर रंग वेगळा दिसू शकतो. वेब आणि बहुतेक डिस्प्लेसाठी sRGB हे सुरक्षित मानक आहे.
प्रश्न ४: मी आउटपुट हेक्स कोड CSS मध्ये थेट वापरू शकतो का?
हो. टूल दाखवलेला कोड #4F46E5 सारखा CSS-सुसंगत आहे. तो कॉपी करून तुमच्या स्टाइलशीटमध्ये पेस्ट करा.
प्रश्न ५: टूल अल्फा चॅनेल (पारदर्शकता) का दाखवत नाही?
कारण हे टूल मूळ RGB (तीन चॅनेल, कोणताही अल्फा नाही) पासून हेक्समध्ये रूपांतरित करते. जर तुम्हाला पारदर्शकता हवी असेल तर तुम्ही आठ-अंकी हेक्स स्वतः तयार करू शकता (उदा. #4F46E580), पण टूल हे आपोआप करत नाही.
प्रश्न ६: मी स्वल्पविरामाऐवजी स्पेस वापरून RGB मूल्ये टाकू शकतो का?
हो. 79 70 229 हे स्वरूप देखील वैध आहे. आपण स्वल्पविराम किंवा स्पेस — दोन्ही वापरू शकता. फक्त तीन संख्या असाव्यात आणि श्रेणी ०–२५५ मध्ये असावी.