Colors & Backgrounds
टेक्स्ट और बैकग्राउंड को रंगें: HEX कोड, पारदर्शी RGBA, HSL चक्र और आधुनिक लीनियर-ग्रेडिएंट्स बनाना सीखें।
🎯 इस पाठ में आप क्या सीखेंगे
🎨 आधुनिक कलर मॉडल्स की तुलना
CSS में रंगों को दर्शाने के 4 प्रमुख दौर आए हैं। आधुनिक डिजाइन सिस्टम में कब किस मॉडल का उपयोग करना है, यह समझना बेहद जरूरी है:
#4f46e5लाल, हरे और नीले रंग को दर्शाने वाले 6 हेक्साडेसिमल अक्षर। 8 अक्षरों में ओपेसिटी भी जोड़ सकते हैं (`#4f46e580`), लेकिन इंसानों के लिए शेड्स बदलना बहुत कठिन होता है।
rgba(79, 70, 229, 0.9)0 से 255 तक के मान और 0 से 1 तक अल्फा (पारदर्शिता)। आधुनिक CSS में बिना कॉमा के स्पेस सिंटैक्स भी मान्य है: rgb(79 70 229 / 90%)।
hsl(244 76% 59%)ह्यू (0–360° पहिया), सेचुरेशन (0–100%) और लाइटनेस (0–100%)। समझने में आसान, लेकिन 50% पर पीला और नीला रंग अलग-अलग चमकते हैं।
oklch(0.55 0.25 270)समान चमक (Lightness), क्रोमा (Chroma) और ह्यू कोण। यह Apple Retina और OLED स्क्रीन्स पर 25% अधिक चमकीले नियॉन रंग प्रदर्शित करता है!
🧪 आधुनिक CSS `color-mix()`: दर्जनों HEX कोड याद रखने का अंत
पुरानी CSS में बटन होवर या डार्क शेड्स के लिए कई अलग-अलग हेक्स कोड लिखने पड़ते थे। `color-mix()` की मदद से ब्राउज़र खुद ही गणितीय रूप से नए शेड्स तैयार कर देता है:
:root {
--primary: oklch(0.6 0.25 264);
}
/* होवर स्टेट: बिना नया हेक्स कोड लिखे 15% गहरा शेड */
.button:hover {
background: color-mix(in oklch, var(--primary) 85%, black);
}
/* हल्का बैज बैकग्राउंड: 15% प्राइमरी + 85% पारदर्शी */
.card-badge {
background: color-mix(in oklch, var(--primary) 15%, transparent);
}जब भी क्लाइंट या ब्रांड डिजाइनर मुख्य --primary कलर बदलता है, तो आपकी पूरी वेबसाइट के सारे होवर रंग, हल्के बैज और बॉर्डर शेड्स अपने-आप 1 सेकंड में अपडेट हो जाते हैं!
यह सभी आधुनिक ब्राउज़रों (Chrome, Safari, Firefox, Edge) में पूरी तरह सपोर्टेड है।
💻 लाइव कलर्स और ग्रेडिएंट प्लेग्राउंड
🌈 ग्रेडिएंट में बीच के मैले धब्बे (Gray Dead Zone) को खत्म करना
क्या आपने कभी दो चटकीले रंगों (जैसे फिरोजी नीला और गुलाबी) को मिलाते समय देखा है कि बीच में एक गंदा मटमैला धूसर रंग बन जाता है? यह पुराने sRGB कलर स्पेस की कमी के कारण होता है:
background: linear-gradient(135deg, #06b6d4, #ec4899);ब्राउज़र रंगों को पुराने sRGB क्यूब के बीच से मिलाता है जिससे 50% के मोड़ पर रंग अपनी चमक खोकर फीका और गंदा दिखने लगता है।
background: linear-gradient(135deg in oklch, #06b6d4, #ec4899);in oklch जोड़ने पर ब्राउज़र बाहर की चमकदार परिधि से होकर रंग मिलाता है। पूरा ग्रेडिएंट शुरुआत से लेकर अंत तक एक जैसा दमकता रहता है!
कोड का पंक्ति-दर-पंक्ति विश्लेषण
background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 100%);135 डिग्री के कोण पर ग्रेडिएंट बनाता है (ऊपरी बाएँ से निचले दाएँ कोने की ओर)। गहरा नीला रंग धीरे-धीरे खूबसूरत बैंगनी में बदलता है।
background-color: rgba(255, 255, 255, 0.85); backdrop-filter: blur(8px);फ्रॉस्टेड ग्लास पिल: 85% सफेद रंग नीचे के ग्रेडिएंट को हल्का झलकने देता है और ऊपर का टेक्स्ट बिल्कुल साफ पठनीय रहता है।
box-shadow: 0 10px 25px -5px rgba(79, 70, 229, 0.4);रंगीन ब्रांड शैडो! सपाट काले रंग के बजाय कार्ड के अपने प्राथमिक रंग (79, 70, 229) की 40% पारदर्शी परछाई एक खूबसूरत रोशनी का अनुभव देती है।
Q1अगली पीढ़ी के आधुनिक डिजाइन सिस्टम (जैसे Tailwind v4) में HSL और HEX की जगह आधुनिक `oklch()` कलर स्पेस क्यों तेजी से लोकप्रिय हो रहा है?
Q2आधुनिक CSS का फंक्शन `color-mix(in oklch, var(--primary) 85%, black);` क्या काम करता है?
Q3डिफ़ॉल्ट CSS में दो चमकीले रंगों (जैसे नीले और पीले) का ग्रेडिएंट बनाते समय बीच में एक मैला भूरा-धूसर (Gray Dead Zone) पट्टा क्यों आ जाता है?
Q4वेब एक्सेसिबिलिटी (WCAG 2.1 AA) के अनुसार सामान्य पैराग्राफ टेक्स्ट और बैकग्राउंड के बीच कम से कम कितना कंट्रास्ट रेशियो (Contrast Ratio) होना अनिवार्य है?
प्रैक्टिस चैलेंज: 3 रंगों का सनसेट ग्रेडिएंट बनाएं
दाएँ हाथ के लाइव कोड एडिटर में:
- स्टेप 1:
.hero-cardमें 2 रंगों के बदले 3 रंगों वाला सनसेट ग्रेडिएंट लगाएं:background: linear-gradient(135deg, #4f46e5 0%, #ec4899 50%, #f59e0b 100%);। - स्टेप 2: परछाई का रंग बीच के गुलाबी रंग से मिलाएं:
box-shadow: 0 12px 30px -5px rgba(236, 72, 153, 0.45);। - स्टेप 3:
.glass-pillमें 1px पारदर्शी बॉर्डर हाइलाइट जोड़ें:border: 1px solid rgba(255, 255, 255, 0.6);। - स्टेप 4: प्रिव्यू में कार्ड की खूबसूरत गर्माहट और रंगों का खिंचाव देखें!
💡 सही समाधान कोड देखने के लिए यहाँ क्लिक करें
सामान्य गलतियाँ और सीनियर डेवलपर इंटरव्यू प्रश्न
❌ गलती: मोबाइल पर `background-attachment: fixed` का अटकना
पैरालैक्स बैकग्राउंड के लिए background-attachment: fixed लगाने से iPhone Safari पर पेज भयानक रूप से अटक-अटक कर चलने लगता है या बैकग्राउंड गायब हो जाता है! Apple ने मोबाइल पर हार्डवेयर एक्सेलेरेशन बंद कर रखा है। मोबाइल पर हमेशा CSS transform: translate3d() या साधारण बैकग्राउंड का ही उपयोग करें।
✅ प्रो टिप: कभी भी शुद्ध काला शैडो न लगाएं
रंगीन कार्ड्स पर शुद्ध काला शैडो (rgba(0,0,0,0.2)) लगाने से कार्ड मैला और गंदा दिखता है। हमेशा बैकग्राउंड या कार्ड के रंग की हल्की पारदर्शी परछाई (जैसे rgba(79, 70, 229, 0.25)) लगाएं, जो वास्तविक दुनिया में बिखरने वाली रोशनी (radiosity) जैसा सुंदर अहसास कराती है!
💬 Interview Q: Display P3 वाइड कलर गैमट क्या है और यह sRGB से कैसे अलग है?
sRGB को 1996 में पुराने भारी CRT कंप्यूटर मॉनिटर्स के लिए बनाया गया था। यह मानवीय आँख को दिखने वाले रंगों का केवल लगभग 35% हिस्सा ही दिखा सकता है।
आधुनिक स्क्रीन्स (iPhone, iPad, MacBook, हाई-एंड OLEDs) Display P3 को सपोर्ट करती हैं, जो sRGB से लगभग 25% अधिक विस्तृत है (विशेषकर गहरे हरे और चमकदार मजेंटा-लाल रंगों में)।
CSS Color 4 के साथ आप color: oklch(0.8 0.3 140); लिख सकते हैं जो ऐसे नियॉन रंग दिखाता है जो पुराने हेक्स कोड में बन ही नहीं सकते।
💬 Interview Q: `background-size: cover` और `contain` में क्या अंतर है?
- cover: तस्वीर को अनुपात में तब तक बड़ा करता है जब तक कि वह कंटेनर की चौड़ाई और ऊंचाई को पूरी तरह न भर ले। अगर आकार बेमेल हो तो किनारों से तस्वीर कट जाती है, लेकिन कोई खाली जगह नहीं बचती।
- contain: तस्वीर को बिना काटे पूरी तरह डिब्बे के अंदर समेटता है। अगर आकार बेमेल हो तो दाएँ-बाएँ या ऊपर-नीचे खाली जगह (letterboxing) छूट जाती है।
💬 Interview Q: `background-blend-mode` से विशुद्ध CSS में डुओटोन (Duotone) इफ़ेक्ट कैसे बनाते हैं?
एक ही कंटेनर पर फोटो और रंगीन ग्रेडिएंट को एक साथ लगाकर:
background-image: url('/portrait.jpg'), linear-gradient(to right, #4f46e5, #ec4899);
background-blend-mode: luminosity;ब्राउज़र फोटोशॉप की तरह GPU पर ही रंग मिला देता है, जिससे बिना फोटोशॉप खोले सीधे Spotify जैसा स्टाइलिश डुओटोन इफ़ेक्ट बन जाता है!