हेक्स कोड क्या है? सब कुछ जो आपके लिए जानना ज़रूरी है

HTML में रंगों के साथ कार्य करना अपेक्षाकृत सरल है। कुछ सरल सीएसएस घोषणाओं के साथ, आप अपने वेब पेज पर किसी भी टेक्स्ट या पृष्ठभूमि का रंग बदल सकते हैं। लेकिन आप रंग कैसे निर्दिष्ट करते हैं? इस प्रश्न का उत्तर हमें एक खरगोश के छेद में ले जाएगा जो अंततः हमें हेक्साडेसिमल रंग कोड की अवधारणा की ओर ले जाता है।

यदि आपने पहले HTML या CSS के साथ काम किया है, तो आपने शायद हेक्स कोड शब्द सुना होगा। लेकिन वास्तव में एक हेक्स कोड क्या है? हेक्स कोड के कुछ उदाहरण क्या हैं? हेक्स कोड और RGB कलर कोड में क्या अंतर है?

हेक्स कोड क्या है?

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

#FF0092

संबंधित: आवश्यक ग्राफिक डिज़ाइन शर्तें जिन्हें आपको जानना आवश्यक है

आप सीएसएस में कुछ अलग तरीकों से रंग निर्दिष्ट कर सकते हैं। आप कुछ पूर्व-निर्धारित रंगों के नामों का उपयोग कर सकते हैं जैसे कि

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

CSS दो मुख्य विकल्प प्रदान करता है: RGB और hex। दोनों प्रारूपों में, आप लाल, हरे और नीले रंग की मात्रा निर्दिष्ट करते हैं जो अंतिम रंग बनाते हैं। RGB 0 और 255 के बीच तीन नंबरों का उपयोग करता है। हेक्स बिल्कुल वैसा ही करता है, बस दशमलव (10) से भिन्न आधार (16) के साथ जिसका आप उपयोग कर रहे हैं।

हेक्स कुल 16 प्रतीकों के लिए, 0-9 अंकों के अलावा, अक्षरों ए-एफ का उपयोग करता है। हेक्स में ए दशमलव में 10 के बराबर है। एफ हेक्स में दशमलव में 15 है।

हेक्स कलर कोड कैसे काम करते हैं?

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

प्रत्येक रंग घटक के लिए 16 × 16 (256) मानों के साथ, फिर 256 × 256 × 256 संभावित संयोजन होते हैं। हेक्स में, वे #000000 (शुद्ध काला) से लेकर #FFFFFF (शुद्ध सफेद) तक होते हैं।

हेक्स कलर कोड कैसे पढ़ें

हेक्स रंग कोड की समझ बनाना आसान है। आइए #FF5733 का उदाहरण लेते हैं। सबसे पहले, छह वर्णों को तीन भागों में विभाजित करें जिनमें प्रत्येक में दो वर्ण हों। जैसा कि आप जानते हैं, पहले दो भाग लाल रंग का प्रतिनिधित्व करते हैं, दूसरे दो भाग हरे रंग का प्रतिनिधित्व करते हैं, और तीसरे दो भाग नीले रंग का प्रतिनिधित्व करते हैं। तो, हमारे उदाहरण में:

• लाल घटक, RR, का मान FF है।
• हरा घटक, जीजी, 57 है।
• नीला घटक, बीबी, 33 है।

अब, इन रंग खंडों की तीव्रता का पता लगाने के लिए, आपको इन तीन चरणों का उपयोग करके हेक्साडेसिमल संख्या की गणना करने की आवश्यकता है:

1. आरआर के पहले हेक्साडेसिमल कैरेक्टर को 16 से गुणा करें। यदि वर्ण एक अक्षर है, तो उसे उसके संगत मान में परिवर्तित करें। इस मामले में, पहला अक्षर F है जो 15 है। तो, हमारे उदाहरण के लिए, आप 15 × 16 को गुणा कर रहे हैं जो 240 के बराबर है।
2. इसके बाद, RR का दूसरा अक्षर जोड़ें। फिर से, जरूरत पड़ने पर किसी अक्षर को उसके संगत मान में बदल दें। हमारे उदाहरण में, दूसरा अक्षर F है जो 15 के बराबर है।
3. एक बार हो जाने के बाद, एकल मान प्राप्त करने के लिए योग जोड़ें। यदि आप हमारे उदाहरण से 240 और 15 जोड़ते हैं, तो आप देखेंगे कि FF का मान 255 है।

शेष दो खंडों के लिए समान सूत्र दोहराएं, GG को 57 से और BB को 33 से दर्शाया गया है। यदि मैन्युअल गणना बहुत भारी लगती है, तो आप हमेशा हेक्स से आरजीबी रूपांतरण उपकरण का उपयोग कर सकते हैं (जैसे बाइनरीहेक्स कन्वर्टर) एक रंग पढ़ने के लिए। आपको पता होना चाहिए कि हेक्स मान #FF5733 के बराबर है आरजीबी (255, 87, 51).

हेक्स कलर कोड इतना लोकप्रिय क्यों है?

जबकि कई अलग-अलग रंग मॉडल (आरजीबी, सीएमवाईके, एचएसएल) हैं, हेक्स रंग कोड शायद सबसे व्यापक रूप से उपयोग किए जाने वाले प्रतिनिधित्व हैं। ऐसा इसलिए है क्योंकि वे सरल और समझने में आसान हैं।

एक निश्चित-चौड़ाई वाला प्रारूप भी बहुत उपयोगी है। पूर्ण-लंबाई वाले हेक्साडेसिमल रंग हमेशा सात वर्ण होते हैं, जिनमें प्रमुख शामिल हैं # प्रतीक।

16 मिलियन से अधिक रंगों का प्रतिनिधित्व करने के लिए केवल इन सात वर्णों का उपयोग करके हेक्स रंग बहुत कुशल हैं। और इन रंगों के बीच अंतर करना एक सीधी प्रक्रिया है।

हेक्स बनाम। आरजीबी: क्या कोई अंतर है?

रंग-कोडिंग की आरजीबी प्रणाली लाल, हरे और नीले रंग की सापेक्ष तीव्रता को इंगित करने के लिए तीन दशमलव संख्याओं का उपयोग करती है। यह 0-9 अंकों का उपयोग करता है।

हेक्स भी लाल, हरे और नीले रंग का प्रतिनिधित्व करने के लिए तीन नंबरों का उपयोग करता है, लेकिन यह आधार 16 को पूरा करने के लिए अतिरिक्त अंकों (ए-एफ) का उपयोग करता है। परिणामी रंगों में कोई अंतर नहीं है, वे एक ही जानकारी को संप्रेषित करने के लिए बस अलग-अलग प्रारूप हैं।

संबंधित: CSS फंडामेंटल: कलर्स के साथ काम करना

हेक्स कोड किसके लिए उपयोग किया जाता है?

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

आप हेक्स कोड को रंगों की पहचान करने के सार्वभौमिक तरीके के रूप में भी देख सकते हैं। कई वेबसाइटें एक विशिष्ट रंग की पहचान करने के लिए उनका उपयोग करती हैं क्योंकि वे छोटे होते हैं और आमतौर पर संदर्भ में स्पष्ट नहीं होते हैं।

हेक्स कलर कोड रॉकेट साइंस नहीं है

तो, वहां आपके पास हेक्स रंग कोड की मूल बातें हैं। वे बिल्कुल कठिन विज्ञान नहीं हैं, लेकिन वे डिजाइन (और तकनीक की दुनिया में) में एक निश्चित उद्देश्य की पूर्ति करते हैं। यदि आप एक ऐसे टूल की तलाश कर रहे हैं जो आपको यह समझने में मदद करे कि हेक्स रंग कैसे काम करते हैं, या जो आपको RGB मिक्स थ्योरी के बारे में सिखाएगा, तो बहुत सारे ऑनलाइन हैं। याद रखें, कुछ भी नया सीखने की कुंजी एक बार में एक कदम उठाना है।

हेक्स रंग कोड दुनिया में सबसे रोमांचक चीज नहीं हैं, लेकिन यदि आप वेब डिज़ाइन में काम कर रहे हैं तो उन्हें समझना महत्वपूर्ण है। हेक्स रंग कोड के साथ काम करने में सक्षम होने से आपके डिजाइन का काम बहुत आसान हो जाएगा।

अपनी स्क्रीन पर किसी भी रंग का हेक्स मान कैसे खोजें

अपनी स्क्रीन से किसी भी रंग मान को सेकंडों में चुनने का तरीका जानें। वेब डिजाइनरों के लिए विशेष रूप से उपयोगी!

आगे पढ़िए

लेखक के बारे में