CSS रंग मान
नाम वाले रंग शुरुआत के लिए काफ़ी हैं। ब्रांड और डिज़ाइन को सटीक मान चाहिए — एक खास teal, नरम ओवरले, ऐसा फाम जिसे थोड़ा खिसका सकें। ये रंग मान फ़ॉर्मैट से आते हैं: hex, rgb() / rgba() और hsl() / hsla()।
रंग मान क्या है?
रंग मान वही है जो आप रंग लेने वाली प्रॉपर्टी के बाद लिखते हैं — जैसे color: या बाद में background-color:। वही प्रॉपर्टी; रंग लिखने के समृद्ध तरीके। नाम वाले कीवर्ड भी मान हैं। आज संख्यात्मक फ़ॉर्मैट जोड़ते हैं जो हर हफ़्ते काम आएंगे।
फ़ॉर्मैट एक नज़र में
काम के हिसाब से फ़ॉर्मैट चुनें। पहले दिन सारी सिंटैक्स ज़रूरी नहीं — नक्शा सीखें, फिर रोज़मर्रा के तीन अभ्यास करें।
📊 CSS रंग मान फ़ॉर्मैट
| फ़ॉर्मैट | उदाहरण | सबसे अच्छा |
|---|---|---|
| नाम वाला | teal |
तेज़ डेमो, शिक्षण, खुरदुरा ड्राफ़्ट |
| Hex | #0f766e |
डिज़ाइन टूल, ब्रांड टोकन, Figma से पेस्ट |
rgb() / rgba() |
rgb(15 118 110) / rgba(15, 118, 110, 0.85) |
चैनल सोच, अल्फा से पारदर्शिता |
hsl() / hsla() |
hsl(174 77% 25%) |
परिवार छोड़े बिना फाम/रोशनी समायोजित |
Hex रंग
Hex मान # से शुरू होते हैं, फिर hex अंक (0–9, a–f)। आम रूप: छह अंक #rrggbb (पूर्ण) और तीन #rgb (छोटा — हर अंक दोगुना)। अक्षरों का केस मायने नहीं रखता।
टेक्स्ट और नरम नोट पर Hex
cssh1 {
color: #0f172a;
}
.note {
color: #0f766e;
}#0f766e कैसे पढ़ें?
जोड़े लाल, हरा, नीला हैं: 0f / 76 / 6e। डिज़ाइन ऐप अक्सर यही स्ट्रिंग देते हैं — CSS में वैसे ही चिपकाएँ, # रखें।
rgb() और rgba()
rgb() लाल, हरे, नीले चैनल 0 से 255 मिलाता है (आधुनिक सिंटैक्स में प्रतिशत भी)। rgba() या चौथे मान से अल्फा जोड़ें ताकि रंग आंशिक रूप से पारदर्शी हो।
RGB चैनल और RGBA फीकापन
css.lead {
color: rgb(51, 65, 85);
}
.overlay-label {
color: rgba(15, 118, 110, 0.9);
}अल्फा एक वाक्य में
अल्फा उस रंग की पारदर्शिता है — 1 (या 100%) ठोस; कम मान पीछे दिखने देता है। लेआउट से तत्व हटाने जैसा नहीं।
फाम सोच के लिए hsl()
hsl() फाम (रंग चक्र कोण), संतृप्ति (%) और रोशनी (%) इस्तेमाल करता है। जब «वही परिवार, थोड़ा हल्का» चाहिए बिना हाथ से hex दोबारा गिने — काम आता है।
HSL एक्सेंट जिसे खिसका सकें
css.badge {
color: hsl(174, 77%, 28%);
border: 2px solid hsl(174, 77%, 20%);
}खिसकाने की आदत
फाम रखें, शांत टेक्स्ट के लिए रोशनी बढ़ाएँ, या मज़बूत शीर्षक के लिए घटाएँ। संतृप्ति बताती है रंग कितना जीवंत लगे।
कौन-सा फ़ॉर्मैट?
- Hex — डिज़ाइन फ़ाइल या ब्रांड पैलेट से कॉपी करते समय डिफ़ॉल्ट
rgb()/rgba()— जब चैनल या तेज़ अल्फा चाहिएhsl()— जब संबंधित रंग परिवार खोज/समायोजित कर रहे हों- नाम वाला — स्केच और शिक्षण डेमो के लिए अभी भी ठीक
आज ये सबcolorपर मान्य हैं; बाद में बैकग्राउंड पर भी इस्तेमाल करेंगे।
खुद आज़माएँ
- पेज:
h1,.lead,.note। - शीर्षक hex (
#0f172a), leadrgb(51, 65, 85), note#0f766e। .badgeपरhsl(174, 77%, 28%)और उसी फाम का गहरा HSL बॉर्डर।- लेबल को
rgba(15, 118, 110, 0.75)से नरम करें —1से कम ठोस दिखना चाहिए। - वैकल्पिक: जोड़े सच में दोगुने हों तभी छोटा hex; वरना छह अंक रखें।
आम गलतियाँ
- hex से पहले
#भूलना (0f766eअकेला मान्य रंग नहीं) - hex में
a–fसे बाहर अक्षर - RGB चैनल
0–255से बाहर (या इकाई गड़बड़) - अल्फा से
display: noneजैसा लेआउट स्थान हटने की उम्मीद - हर फ़ॉर्मैट को कैस्केड में «ज़्यादा विशिष्ट» समझना — फ़ॉर्मैट specificity नहीं बदलता
सार
- रंग मान उन्हीं रंग-लेने वाली प्रॉपर्टी के फ़ॉर्मैट हैं
- Hex डिज़ाइन से चिपकाने का रोज़मर्रा फ़ॉर्मैट है
rgb()/rgba()चैनल और अल्फा दिखाते हैंhsl()फाम, संतृप्ति, रोशनी में सोचने में मदद करता है- नाम वाले रंग मान्य रहते हैं; काम के हिसाब से चुनें
- hex प्लस एक कार्यात्मक फ़ॉर्मैट (
rgbaयाhsl) अभ्यास करें जब तक दोनों सहज लगें
🧠 अपने ज्ञान की परीक्षा करें
अपने ज्ञान की परीक्षा करें
इस इंटरैक्टिव क्विज़ के साथ अपनी चुनौती लें और देखें कि आप विषय को कितनी अच्छी तरह समझते हैं
📝 निर्देश
- हर प्रश्न को ध्यान से पढ़ें
- हर प्रश्न के लिए सबसे अच्छा उत्तर चुनें
- आप जितनी बार चाहें क्विज़ दोबारा दे सकते हैं
- आपकी प्रगति शीर्ष पर दिखाई जाएगी