हेक्स रंग कोड: वेब डिझाइनसाठी थेट मार्ग
हे पृष्ठ इमेजमधील कोणत्याही पिक्सेलचा रंग HEX स्वरूपात दाखवते. CSS आणि डिझाइन टूल्समध्ये हेक्स कोड (जसे #1E90FF) हे डीफॉल्ट नोटेशन आहे. या पृष्ठाचे वैशिष्ट्य म्हणजे ते इतर सहोदर पृष्ठांप्रमाणे RGB फंक्शनल नोटेशन किंवा HSL न देता थेट हेक्स कोड देते. हेक्स कोडमध्ये स्वतःच अल्फा चॅनेल (पारदर्शकता) नसते; म्हणून पृष्ठ सहा-अंकी हेक्स कोडसोबतच पारदर्शकता टक्केवारी स्वतंत्रपणे दाखवते: “Alpha ‹n›% — this pixel is partly transparent.”
हेक्स हे कॉम्पॅक्ट आणि वेब-नेटिव्ह फॉरमॅट आहे. तुम्हाला color, background-color किंवा इतर कोणत्याही CSS प्रॉपर्टीमध्ये थेट मूल्य टाकायचे असेल (अतिरिक्त कंस किंवा सिंटॅक्सशिवाय) तर हे पृष्ठ सर्वोत्तम पर्याय आहे. यामुळे डिझायनर आणि डेव्हलपर एका क्लिकवर अचूक हेक्स कोड मिळवू शकतात.
प्रतिमा इनपुट आणि आउटपुट: नियम आणि मर्यादा
समर्थित फॉरमॅट:
PNG, JPG, WebP, GIF, AVIF, HEIC.
MIME प्रकार: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif.
असमर्थित फाइल टाकल्यास संदेश दिसतो: “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.”
प्रतिमा आकार मर्यादा:
जर प्रतिमेची सर्वात लांब बाजू 4096 पिक्सेलपेक्षा जास्त असेल तर ती आपोआप स्केल डाउन केली जाते. हे ब्राउझरच्या मेमरी मर्यादा आणि कार्यक्षमतेसाठी केले जाते.
डीफॉल्ट आउटपुट:
प्रतिमा लोड झाल्याबरोबर केंद्रस्थ पिक्सेलचे रंग मूल्ये आणि स्थान (x, y) दाखवली जातात. “Image ready — move over it to sample, click to save a color.” हा संदेश दिसतो. प्रतिमेचे परिमाण (रुंदी × उंची) देखील दाखवले जातात.
रंग मूल्ये:
- HEX: सहा-अंकी हेक्साडेसिमल कोड (जसे
#1E90FF). - RGB: लाल, हिरवा, निळा मूल्ये (0-255).
- HSL: ह्यू, सॅच्युरेशन, लाइटनेस मूल्ये.
पारदर्शकता:
जर पिक्सेल अर्धपारदर्शक असेल तर “Alpha ‹n›% — this pixel is partly transparent.” हा संदेश दिसतो. हेक्स कोडच्या सहा-अंकी स्वरूपात अल्फा माहिती नसल्याने ही वेगळी सूचना आवश्यक आहे. लक्षात ठेवा की मूळ प्रतिमेतील पिक्सेल मूल्यच दाखवले जाते; त्यामागील बॅकग्राउंड विचारात घेतले जात नाही.
पारदर्शकता आणि अल्फा चॅनेल: हेक्स कोडमध्ये समावेश नाही
हेक्स नोटेशन (उदा. #RRGGBB) फक्त लाल, हिरवा आणि निळा या तीन चॅनेलसाठी आहे. CSS मध्ये #RRGGBBAA हे आठ-अंकी स्वरूप अस्तित्वात आहे, पण हे पृष्ठ केवळ सहा-अंकी हेक्स कोड देते. म्हणून पारदर्शकता स्वतंत्रपणे टक्केवारीत दाखवली जाते.
उदाहरणार्थ:
एका PNG प्रतिमेत 50% अपारदर्शक लाल पिक्सेल असेल तर:
- HEX:
#FF0000 - RGB:
255, 0, 0 - HSL:
0°, 100%, 50% - Alpha: “Alpha 50% — this pixel is partly transparent.”
हे पिक्सेलचे अचूक मूल्य आहे. JPEG किंवा स्क्रीनशॉटमध्ये कॉम्प्रेशन किंवा अँटी-अलायसिंगमुळे जवळच्या पिक्सेलची मूल्ये बदलू शकतात, त्यामुळे नमुना घेताना काळजी घेणे आवश्यक आहे.
इतिहासातील वेगळी नोंद:
जर दोन रंगांचे RGB मूल्ये समान असतील पण अल्फा मूल्ये वेगळी असतील, तर ते इतिहासात वेगवेगळ्या नोंदी म्हणून सेव्ह केले जातात. उदाहरणार्थ, rgba(255,0,0,0.5) आणि rgba(255,0,0,0.8) या दोन स्वतंत्र नोंदी असतील.
रंग इतिहास आणि क्लिपबोर्ड प्रतिलिपी
इतिहास (Picks):
तुम्ही प्रतिमेवर क्लिक करून सध्याच्या नमुन्याचा रंग सेव्ह करू शकता. “Saved ‹hex› to your picks.” हा संदेश दिसतो. इतिहास जास्तीत जास्त 12 नोंदी साठवू शकतो. प्रत्येक नोंद एक स्वॅच म्हणून दाखवली जाते. स्वॅचवर क्लिक केल्यास तो रंग पुन्हा लोड होतो.
क्लिपबोर्ड प्रतिलिपी:
कोणत्याही दाखवलेल्या रंग मूल्यावर (HEX, RGB, किंवा HSL) क्लिक केल्यास ते आपोआप क्लिपबोर्डवर कॉपी होते. जर ब्राउझरने क्लिपबोर्ड प्रवेश अवरोधित केला तर हा संदेश दिसतो: “Could not copy — your browser blocked clipboard access.” हे सुरक्षा सेटिंग्जमुळे होऊ शकते; अशावेळी मॅन्युअली कॉपी करा.
स्टार्ट ओव्हर:
“Start over” बटण दाबल्यास प्रतिमा काढून टाकली जाते, सर्व नोंदी मिटवल्या जातात आणि साधन प्रारंभिक स्थितीत परत येते.
प्रतिमा कॉम्प्रेशन आणि अँटी-अलायसिंगचा परिणाम
JPEG प्रतिमा हानिकारक कॉम्प्रेशन वापरतात, त्यामुळे मूळ रंग बदलू शकतात. स्क्रीनशॉटमध्ये देखील अनेकदा अँटी-अलायसिंगमुळे कडा अस्पष्ट होतात. यामुळे एकाच रंगाच्या भागातही जवळच्या पिक्सेलची मूल्ये भिन्न असू शकतात.
उदाहरणार्थ:
एका लाल बटणाच्या JPEG प्रतिमेत मध्यभागी #D32F2F आणि कडेला #D53435 असे भिन्न मूल्ये असू शकतात. यामुळे अचूक पिक्सेल निवडण्यासाठी मॅग्निफायर (मोठे दृश्य) आवश्यक आहे. साधन प्रतिमेवर फिरताना पिक्सेल स्तरावर रंग दाखवते, त्यामुळे तुम्ही हेतुपुरस्सर पिक्सेल निवडू शकता.
अर्धपारदर्शक पिक्सेल वाचताना:
ती त्यांच्या स्वतःच्या मूल्यावरून वाचली जातात, मागे काय आहे याची पर्वा न करता. म्हणून जर एखादा पिक्सेल 30% अपारदर्शक हिरवा असेल, तर तो #00FF00 दाखवेल (अल्फा 30% असल्याची सूचना देऊन).
कीबोर्ड नेव्हिगेशन: माउसशिवाय अचूक निवड
साधन पूर्णपणे कीबोर्डवरून चालवता येते:
- बाण की (↑ ↓ ← →): क्रॉसहेअर एका पिक्सेलने हलवा.
- Shift + बाण की: क्रॉसहेअर 10 पिक्सेलने हलवा. मोठ्या हालचालीसाठी उपयुक्त.
- Enter किंवा Space: सध्याचा रंग सेव्ह करा (प्रतिमेवर क्लिक केल्यासारखेच).
हे वैशिष्ट्य अपंगत्व असलेल्या वापरकर्त्यांसाठी आणि अत्यंत अचूकता आवश्यक असलेल्या कामांसाठी (उदा. एकाच पिक्सेलच्या फरकाने रंग बदलत असल्यास) उपयुक्त आहे.
डिझाइनमध्ये समाकलन:
हेक्स कोड थेट CSS फाइलमध्ये color: #1E90FF म्हणून टाकता येतो. Figma किंवा Photoshop सारख्या डिझाइन टूल्समध्येही हेक्स कोड इनपुट बॉक्स असतो. इतिहासातील रंगांचा वापर करून कलर पॅलेट तयार करता येते.
FAQ (वारंवार विचारले जाणारे प्रश्न)
प्रश्न १: हेक्स कोड थेट CSS मध्ये वापरता येतो का?
होय. #RRGGBB हे फॉरमॅट CSS मध्ये color, background-color, border-color इत्यादी प्रॉपर्टीमध्ये थेट वापरता येते. अतिरिक्त सिंटॅक्सची आवश्यकता नाही. उदाहरण: background-color: #FF5733;
प्रश्न २: पारदर्शक पिक्सेलसाठी हेक्स कोड मिळतो का?
होय, पण फक्त सहा-अंकी हेक्स कोड मिळतो (अल्फा नसलेला). पारदर्शकता टक्केवारी स्वतंत्रपणे दाखवली जाते. जर तुम्हाला आठ-अंकी हेक्स (जसे #FF000080) हवा असेल तर तुम्हाला स्वतः अल्फा मूल्य रूपांतरित करावे लागेल.
प्रश्न ३: इतिहासात किती रंग सेव्ह करता येतात?
जास्तीत जास्त 12 नोंदी. त्यापेक्षा जास्त सेव्ह केल्यास जुनी नोंद आपोआप काढून टाकली जाते का? फॅक्ट शीटनुसार, तसे स्पष्ट नाही; पण साधन फक्त 12 नोंदी दाखवते. त्या पूर्ण झाल्यावर नवीन नोंद जोडता येते की नाही हे वापरून पहावे.
प्रश्न ४: मोठ्या प्रतिमा हाताळल्या जातात का?
होय, पण जर सर्वात लांब बाजू 4096 पिक्सेलपेक्षा जास्त असेल तर प्रतिमा आपोआप मोजक्या केली जाते. यामुळे मूळ रंग मूल्यांमध्ये किंचित बदल होऊ शकतो.
प्रश्न ५: रंग मूल्य कसे कॉपी करावे?
कोणत्याही दाखवलेल्या मूल्यावर (HEX, RGB, किंवा HSL) क्लिक करा. ते आपोआप तुमच्या क्लिपबोर्डवर कॉपी होईल. जर ब्राउझरने ब्लॉक केले तर मॅन्युअली निवडून Ctrl+C (किंवा Cmd+C) वापरा.
प्रश्न ६: प्रतिमा उघडता न आल्यास काय होते?
“That image could not be opened. It may be corrupted or in an unsupported format.” हा संदेश दिसतो. फाइल फॉरमॅट बरोबर असल्याची खात्री करा.