इमेज से HEX कलर कोड पाएँ

हेक्स रंग कोड: किसी भी छवि से सटीक पिक्सेल रंग निकालने का सबसे सीधा तरीका

इस पृष्ठ का उद्देश्य बिल्कुल सीधा है: आप अपने डिवाइस से एक छवि चुनते हैं, उस पर होवर करते हैं या क्लिक करके कोई भी पिक्सेल चुनते हैं, और टूल तुरंत उस पिक्सेल का रंग हेक्स कोड के रूप में दिखाता है। साथ ही RGB और HSL मान भी प्रदर्शित होते हैं। आप इस हेक्स कोड को कॉपी करके CSS, डिज़ाइन सॉफ़्टवेयर, या किसी भी अन्य प्रोजेक्ट में उपयोग कर सकते हैं। एक आवर्धित दृश्य आपको सटीक पिक्सेल चुनने में मदद करता है, और आप कई रंगों को एक इतिहास में सहेज सकते हैं।

यह पृष्ठ किस प्रकार भिन्न है

यह पृष्ठ अन्य रंग चयन पृष्ठों से कई मायनों में अलग है। सबसे पहले, हेक्स रंग कोड ही प्राथमिक आउटपुट है — यह छह अंकों (या तीन अंकों के संक्षिप्त रूप) का RGB अंकन है जो CSS और डिज़ाइन टूल्स में मानक है। जहाँ सहोदर पृष्ठ RGB फ़ंक्शनल नोटेशन या HSL पर केंद्रित होते हैं, वहाँ यह पृष्ठ आपको हेक्स प्रस्तुति देता है, जिसमें इसके छह अंकों के रूप में कोई अल्फा चैनल नहीं होता। किसी भी पारदर्शिता को अलग से प्रतिशत के रूप में रिपोर्ट किया जाता है — उदाहरण के लिए, "अल्फा 85% — यह पिक्सेल आंशिक रूप से पारदर्शी है।"

चूंकि हेक्स एक कॉम्पैक्ट, वेब-नेटिव फ़ॉर्मेट है, यह पृष्ठ तब जाने का विकल्प है जब आपको एक रंग मान चाहिए जिसे color, background-color, या किसी भी CSS प्रॉपर्टी में बिना अतिरिक्त कोष्ठक या सिंटैक्स के सीधे डाला जा सके। उदाहरण के लिए, #1E90FF को सीधे CSS में उपयोग किया जा सकता है, जबकि rgb(30, 144, 255) को rgb() फ़ंक्शन की आवश्यकता होती है।

इनपुट, आउटपुट और उपयोगकर्ता प्रवाह

इनपुट: एक एकल छवि फ़ाइल जो निम्नलिखित फ़ॉर्मेट में से एक होनी चाहिए: PNG, JPG, WebP, GIF, AVIF, HEIC। स्वीकृत MIME प्रकार हैं: image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif।

आउटपुट: जब छवि लोड होती है, तो केंद्रीय पिक्सेल के रंग मान और निर्देशांक तुरंत प्रदर्शित होते हैं। इसके बाद माउस पॉइंटर को छवि पर घुमाने पर रंग पिक्सेल दर पिक्सेल नमूने लेता रहता है। क्लिक करने पर वर्तमान में नमूना लिया गया रंग आपके पिक्स में सहेजा जाता है।

आउटपुट में शामिल हैं:

• "छवि तैयार है — नमूना लेने के लिए उस पर जाएँ, रंग सहेजने के लिए क्लिक करें।"
• छवि आयाम (चौड़ाई × ऊँचाई)
• वर्तमान में नमूना लिए गए पिक्सेल के पिक्सेल निर्देशांक (x, y)
• HEX: नमूना लिए गए पिक्सेल का हेक्साडेसिमल रंग कोड (छह अंकों का, जैसे #1E90FF)
• RGB: लाल, हरा, नीला मान
• HSL: रंग, संतृप्ति, चमक मान
• यदि पिक्सेल अर्ध-पारदर्शी है: "अल्फा ‹n›% — यह पिक्सेल आंशिक रूप से पारदर्शी है।"
• क्लिक करने पर: "‹हेक्स› को आपके पिक्स में सहेजा गया।"
• सहेजे गए रंगों का इतिहास (अधिकतम 12 आइटम) — एक स्वैच पर क्लिक करने से वह रंग वापस लोड हो जाता है।
• किसी भी रंग मान (HEX, RGB, HSL) पर क्लिक करने से वह क्लिपबोर्ड पर कॉपी हो जाता है।

नियम और सीमा मामले

यह टूल कई महत्वपूर्ण नियमों और सीमा मामलों के साथ काम करता है जिन्हें समझना आवश्यक है:

1. केंद्र पिक्सेल प्रारंभिक प्रदर्शन: जब कोई छवि लोड होती है, तो केंद्रीय पिक्सेल के रंग मान और निर्देशांक तुरंत दिखाए जाते हैं। यह एक त्वरित शुरुआत देता है।

2. कीबोर्ड नेविगेशन: आप छवि पर तीर कुंजियों का उपयोग करके एक क्रॉसहेयर को घुमा सकते हैं। Shift दबाकर तीर कुंजियों का उपयोग करने से क्रॉसहेयर 10 पिक्सेल चलता है। Enter या Space दबाने से वर्तमान में नमूना लिया गया रंग सहेजा जाता है।

3. रंग इतिहास सीमा: इतिहास अधिकतम 12 आइटम संग्रहीत कर सकता है। समान RGB मानों वाले लेकिन भिन्न अल्फा मानों वाले रंगों को अलग-अलग प्रविष्टियों के रूप में सहेजा जाता है।

4. पारदर्शिता संभालना: टूल छवि में संग्रहीत सटीक पिक्सेल मान प्रदर्शित करता है। यदि कोई पिक्सेल अर्ध-पारदर्शी है, तो उसका अल्फा मान "अल्फा ‹n›% — यह पिक्सेल आंशिक रूप से पारदर्शी है" के रूप में दिखाया जाता है। अर्ध-पारदर्शी पिक्सेल को उसके पीछे क्या हो सकता है, उस पर विचार किए बिना पढ़ा जाता है। इसका मतलब है कि यदि कोई पिक्सेल पारदर्शी है, तो आपको वह रंग मिलता है जो उस पिक्सेल में वास्तव में संग्रहीत है, न कि वह रंग जो पृष्ठभूमि के साथ मिश्रित होने पर दिखाई देता है।

5. संपीड़न और एंटी-अलियासिंग: यदि छवि JPEG है या एक स्क्रीनशॉट है, तो संपीड़न और एंटी-अलियासिंग ने पिक्सेल मानों को बदल दिया होगा। इसका मतलब है कि एक समतल क्षेत्र में भी आसन्न पिक्सेल भिन्न हो सकते हैं, जो नमूना बिंदु को महत्वपूर्ण बनाता है।

6. असमर्थित फ़ाइल प्रकार: यदि कोई असमर्थित फ़ाइल प्रकार ड्रॉप किया जाता है: "वह फ़ाइल प्रकार समर्थित नहीं है। PNG, JPG, WebP, GIF, AVIF या HEIC छवि आज़माएँ।"

7. दूषित छवियाँ: यदि कोई छवि नहीं खोली जा सकती है: "वह छवि नहीं खोली जा सकी। यह दूषित हो सकती है या असमर्थित फ़ॉर्मेट में हो सकती है।"

8. डाउनस्केलिंग: सबसे लंबी भुजा वाली छवियाँ जो 4096 पिक्सेल से अधिक हों, उन्हें छोटा कर दिया जाता है। यह प्रदर्शन को बनाए रखता है, लेकिन ध्यान रखें कि डाउनस्केलिंग पिक्सेल मानों को औसत कर सकती है।

9. क्लिपबोर्ड एक्सेस: यदि ब्राउज़र क्लिपबोर्ड एक्सेस को ब्लॉक करता है, तो संदेश दिखाया जाता है: "कॉपी नहीं किया जा सका — आपके ब्राउज़र ने क्लिपबोर्ड एक्सेस को ब्लॉक कर दिया।"

10. "पुनरारंभ करें" बटन: यह छवि को साफ़ करता है, रंग इतिहास को खाली करता है, और टूल को उसकी प्रारंभिक स्थिति में रीसेट करता है।

रंग मॉडलों को समझना: HEX, RGB और HSL

यह पृष्ठ तीन प्रमुख रंग मॉडलों में मान प्रस्तुत करता है:

• HEX: एक हेक्साडेसिमल RGB अंकन जो प्रत्येक घटक (लाल, हरा, नीला) को 00 से FF तक के मानों के साथ दर्शाता है। उदाहरण के लिए, #FF5733 लाल = 255, हरा = 87, नीला = 51 को दर्शाता है। यह CSS में सबसे कॉम्पैक्ट और व्यापक रूप से उपयोग किया जाने वाला फ़ॉर्मेट है।

• RGB: rgb(लाल, हरा, नीला) के रूप में फ़ंक्शनल नोटेशन, जहाँ प्रत्येक मान 0 से 255 के बीच होता है। यह HEX के समान ही जानकारी देता है, लेकिन लंबे सिंटैक्स के साथ।

• HSL: hsl(रंग, संतृप्ति%, चमक%) रंग को उसके गुणों के अनुसार वर्णित करता है: रंग (0-360° का कोण), संतृप्ति (0-100%: ग्रे से पूर्ण रंग तक), और चमक (0-100%: काला से सफेद तक)।

हेक्स को प्राथमिकता क्यों दी जाती है? हेक्स RGB मानों को अधिक संक्षिप्त रूप में एन्कोड करता है। rgb(255, 255, 255) के बजाय #FFFFFF टाइप करना तेज़ है। CSS3 के बाद से हेक्स में तीन अंकों का संक्षिप्त रूप (जैसे #FFF) भी समर्थित है, जहाँ प्रत्येक अंक दोहराया जाता है। यह पृष्ठ छह अंकों का हेक्स प्रदर्शित करता है, जो सटीकता सुनिश्चित करता है।

पारदर्शिता और अल्फा चैनल: हेक्स की एक बड़ी सीमा

यह समझना महत्वपूर्ण है कि मानक छह अंकों का हेक्स कोई अल्फा चैनल नहीं रखता। जबकि CSS4 में #RRGGBBAA (आठ अंकों का हेक्स) पेश किया गया है, अभी भी इसका समर्थन सीमित है और अधिकांश डिज़ाइन टूल इसका उपयोग नहीं करते हैं। इसलिए, यह पृष्ठ अल्फा पारदर्शिता को अलग से रिपोर्ट करता है।

यदि आप किसी PNG छवि से एक पिक्सेल नमूना लेते हैं जिसमें 128 का अल्फा मान (लगभग 50% अपारदर्शिता) है, तो आउटपुट कुछ इस प्रकार होगा:

• HEX: #FF0000 (मान लीजिए RGB मान पूर्ण लाल हैं)
• Alpha: 50% — यह पिक्सेल आंशिक रूप से पारदर्शी है

जब आप इस रंग को CSS में उपयोग करते हैं, तो आपको rgba(255, 0, 0, 0.5) का उपयोग करना होगा, न कि केवल #FF0000 का, यदि आप पारदर्शिता बनाए रखना चाहते हैं। टूल आपको दोनों मान देता है ताकि आप सही फ़ॉर्मेट चुन सकें।

आवर्धक और सटीक पिक्सेल चयन का महत्व

एंटी-अलियासिंग और छवि संपीड़न के कारण, एक ही क्षेत्र के आसन्न पिक्सेल में अक्सर थोड़े भिन्न रंग मान होते हैं। यह विशेष रूप से ग्रेडिएंट्स, किनारों और संपीड़ित JPEG में सच है। आवर्धित दृश्य आपको यह देखने में मदद करता है कि आप वास्तव में किस पिक्सेल का चयन कर रहे हैं।

उदाहरण के लिए, एक नीले आकाश की JPEG छवि में, आसन्न पिक्सेल में छोटे RGB अंतर हो सकते हैं जैसे #4A90E2 बनाम #4A91E1। आवर्धित दृश्य के बिना, आप अनजाने में एक बफ़र पिक्सेल चुन सकते थे जो आपके इच्छित रंग का प्रतिनिधित्व नहीं करता। आवर्धक, कीबोर्ड नेविगेशन के साथ मिलकर, आपको पिक्सेल-स्तर पर सटीकता देता है जो डिज़ाइन कार्य में आवश्यक है।

डिज़ाइन वर्कफ़्लो में नमूना रंगों का एकीकरण

एक बार जब आप वांछित रंग का चयन कर लेते हैं और उसे अपने पिक्स में सहेज लेते हैं, तो आपके पास कई विकल्प होते हैं:

1. सीधे CSS में: हेक्स कोड को color, background-color, border-color आदि में कॉपी करें।
2. डिज़ाइन सॉफ़्टवेयर में: Figma, Adobe XD, Photoshop, Sketch जैसे टूल्स में हेक्स स्वीकार किया जाता है।
3. कलर पैलेट निर्माण: आप छवि के कई रंगों को नमूना ले सकते हैं और एक सुसंगत पैलेट बना सकते हैं।
4. ब्रांड एलिमेंट मिलान: किसी लोगो, फ़ोटो या स्क्रीनशॉट से सटीक रंग निकालने के लिए।

रंग इतिहास में 12 प्रविष्टियाँ आपको एक छवि से कई स्वरों को कैप्चर करने और बाद में उन्हें पुनर्प्राप्त करने की अनुमति देती हैं। स्वैच पर क्लिक करने से वह रंग वापस लोड हो जाता है, जिससे तुलना और संदर्भ आसान हो जाता है।

सामान्य प्रश्न (FAQ)

प्रश्न 1: क्या मैं पारदर्शी PNG से रंग ले सकता/सकती हूँ?

हाँ। टूल उस पिक्सेल में संग्रहीत सटीक RGB मान पढ़ता है, भले ही उसका अल्फा मान कुछ भी हो। अल्फा मान को अलग से "अल्फा ‹n›%" के रूप में दिखाया जाता है। ध्यान रखें कि पूरी तरह से पारदर्शी पिक्सेल (अल्फा = 0%) में शून्य RGB मान हो सकते हैं, जो काले रंग के रूप में दिखाई देंगे जब तक आप अल्फा को अनदेखा नहीं करते।

प्रश्न 2: क्या हेक्स कोड को सीधे CSS में कॉपी किया जा सकता है?

बिल्कुल। जब आप हेक्स मान पर क्लिक करते हैं, तो यह क्लिपबोर्ड पर कॉपी हो जाता है। आप इसे सीधे CSS फ़ाइल में पेस्ट कर सकते हैं, जैसे color: #1E90FF;। कोई अतिरिक्त सिंटैक्स की आवश्यकता नहीं है।

प्रश्न 3: कीबोर्ड शॉर्टकट कैसे काम करते हैं?

तीर कुंजियाँ क्रॉसहेयर को एक-एक पिक्सेल घुमाती हैं। Shift दबाकर तीर कुंजियाँ दबाने से क्रॉसहेयर 10 पिक्सेल चलता है। Enter या Space दबाने से वर्तमान रंग सहेजा जाता है। यह उपयोगी है जब आपको छवि के किसी विशिष्ट क्षेत्र में सटीक पिक्सेल चुनने की आवश्यकता होती है और माउस का उपयोग नहीं कर सकते।

प्रश्न 4: मैं अधिकतम कितने रंग सहेज सकता/सकती हूँ?

इतिहास में अधिकतम 12 रंग सहेजे जा सकते हैं। यदि आप 12 से अधिक रंग सहेजने का प्रयास करते हैं, तो संभवतः नवीनतम रंग जोड़े जाएंगे और पुराने हटा दिए जाएंगे। समान RGB मानों वाले लेकिन भिन्न अल्फा मानों वाले रंगों को अलग-अलग प्रविष्टियों के रूप में गिना जाता है।

प्रश्न 5: क्या JPEG संपीड़न रंग मानों को प्रभावित करता है?

हाँ, JPEG एक दोषपूर्ण संपीड़न एल्गोरिथ्म का उपयोग करता है। इसका मतलब है कि मूल छवि में एक समान रंग के क्षेत्र में भी, JPEG संपीड़न के बाद पिक्सेल मान थोड़े भिन्न हो सकते हैं। एंटी-अलियासिंग भी किनारों पर रंगों को मिला सकता है। यह एक अपेक्षित व्यवहार है, दोष नहीं। यदि आपको सटीक रंग चाहिए, तो PNG या GIF जैसे दोषरहित फ़ॉर्मेट का उपयोग करें।

प्रश्न 6: अगर छवि बहुत बड़ी है तो क्या होता है?

यदि छवि की सबसे लंबी भुजा 4096 पिक्सेल से अधिक है, तो इसे प्रदर्शन के लिए छोटा कर दिया जाता है। डाउनस्केलिंग पिक्सेल मानों को औसत कर सकती है, जिससे रंग मूल से थोड़े भिन्न हो सकते हैं। सर्वोत्तम परिणामों के लिए, 4096 पिक्सेल या उससे छोटी छवियों का उपयोग करें।