वेब डिजाइन में हेक्साडेसिमल रंग

हर वेब डिजाइनर को #FF5733 या #2C3E50 जैसे कोड मिलते हैं। ये हेक्साडेसिमल कलर कोड उसी नंबर सिस्टम का उपयोग करके रंग निर्दिष्ट करने का एक संक्षिप्त तरीका है जिसे प्रोग्रामर बाइनरी डेटा के लिए उपयोग करते हैं। Hex रंगों को समझने से वेब डिजाइन में सटीक रंग नियंत्रण खुलता है।

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

RGB कलर मॉडल

डिजिटल स्क्रीन लाल, हरे और नीले प्रकाश को मिलाकर रंग बनाती हैं।

• प्रत्येक चैनल में 256 तीव्रता स्तर (0-255) हैं
• 0 = कोई प्रकाश नहीं, 255 = पूर्ण तीव्रता
• 256 × 256 × 256 = 16.7 मिलियन संभावित रंग

हेक्साडेसिमल प्रतिनिधित्व

• 256 मान = hex में FF (दो hex अंक)
• दशमलव से अधिक संक्षिप्त (255,128,0 vs FF8000)
• टाइप करना और याद रखना आसान

उदाहरण: #FF5733

• FF = 255 red (अधिकतम)
• 57 = 87 green (मध्यम)
• 33 = 51 blue (कम)
• परिणाम: चमकीला नारंगी-लाल रंग

सामान्य रंग मान

शॉर्टहैंड Hex रंग

CSS 3-अंकों का शॉर्टहैंड अनुमति देता है जब प्रत्येक जोड़ी में दोनों अंक समान हों।

यह कैसे काम करता है

• #RGB #RRGGBB में विस्तारित होता है
• प्रत्येक अंक दोगुना होता है

उदाहरण

• #FFF = #FFFFFF (सफेद)
• #000 = #000000 (काला)
• #F00 = #FF0000 (लाल)
• #369 = #336699 (स्टील ब्लू)

सीमा

#FF5733 को छोटा नहीं किया जा सकता (57 ≠ 55 या 77)

Alpha (पारदर्शिता) के साथ Hex

8-अंकीय Hex: #RRGGBBAA

आधुनिक CSS alpha चैनल जोड़ने का समर्थन करता है:

• AA = अपारदर्शिता (00 = पारदर्शी, FF = अपारदर्शी)
• #FF573380 = 50% पारदर्शी नारंगी-लाल

सामान्य Alpha मान

• FF = 100% अपारदर्शी
• CC = ~80% अपारदर्शी
• 80 = 50% अपारदर्शी
• 40 = 25% अपारदर्शी
• 00 = पूरी तरह पारदर्शी

Hex को RGB में बदलना

विधि

1. प्रत्येक 2-अंकीय जोड़ी लें
2. hex से decimal में बदलें

उदाहरण: #4A90D9

• 4A = 4×16 + 10 = 74 red
• 90 = 9×16 + 0 = 144 green
• D9 = 13×16 + 9 = 217 blue
• RGB: rgb(74, 144, 217)

त्वरित संदर्भ

• 00 = 0
• 40 = 64
• 80 = 128
• C0 = 192
• FF = 255

RGB को Hex में बदलना

विधि

1. प्रत्येक दशमलव मान (0-255) को hex (00-FF) में बदलें
2. # उपसर्ग के साथ जोड़ें

उदाहरण: rgb(100, 200, 150)

• 100 = 64 (6×16 + 4)
• 200 = C8 (12×16 + 8)
• 150 = 96 (9×16 + 6)
• Hex: #64C896

त्वरित गणित

• 16 से भाग = पहला अंक
• शेषफल = दूसरा अंक
• 100 ÷ 16 = 6 शेषफल 4 → 64

CSS में Hex रंगों का उपयोग

मानक उपयोग

color: #FF5733;

background-color: #2C3E50;

border: 2px solid #E74C3C;

वैकल्पिक CSS रंग प्रारूप

• rgb(255, 87, 51) - RGB decimal
• rgba(255, 87, 51, 0.5) - alpha के साथ RGB
• hsl(9, 100%, 60%) - Hue, Saturation, Lightness

प्रत्येक कब उपयोग करें

• Hex: सबसे सामान्य, संक्षिप्त
• RGB/RGBA: जब गतिशील रूप से रंग की गणना करें
• HSL: जब चमक/संतृप्ति समायोजित करें

Hex में लोकप्रिय रंग पैलेट

Material Design

• Primary Blue: #2196F3
• Green: #4CAF50
• Red: #F44336
• Purple: #9C27B0

Flat UI Colors

• Turquoise: #1ABC9C
• Emerald: #2ECC71
• Wet Asphalt: #34495E
• Alizarin: #E74C3C

निष्कर्ष

हेक्साडेसिमल कलर कोड base-16 नंबर सिस्टम का उपयोग करके RGB रंगों को व्यक्त करने का एक संक्षिप्त तरीका है। अंकों की प्रत्येक जोड़ी (00-FF) एक रंग चैनल की 0-255 तक की तीव्रता दर्शाती है। Hex रंगों को समझने से वेब डिजाइनरों को कलर पिकर, स्टाइल शीट और डिजाइन टूल्स के साथ कुशलता से काम करने में मदद मिलती है। हालांकि टूल्स रूपांतरण कर सकते हैं, hex रंगों को समझने से बेहतर रंग हेरफेर और तेज डिबगिंग संभव होती है।

संबंधित लेख

• नंबर बेस कैसे बदलें: चरण-दर-चरण गाइड
• बाइनरी, दशमलव और हेक्साडेसिमल: नंबर बेस को समझना
• कंप्यूटिंग में बाइनरी
• Bits vs Bytes