📘 Lesson · Lesson 05
Colors in CSS
CSS में Colors
color and background-color
p {
color: white; /* the TEXT color */
background-color: navy; /* the BACKGROUND color */
}White text on a navy background
Two properties everyone confuses at first:
color always means the TEXT color (never "the element's color"), while background-color is the fill behind it. Remember: "color = ink, background-color = paper." You met color VALUES (hex, rgb) in the HTML colors chapter — now you apply them through these CSS properties, on any element.5 Ways to Write a Color
color: red; /* 1. NAME - 140 available, easy */
color: #FF0000; /* 2. HEX - the standard, precise */
color: #F00; /* 3. SHORT HEX - #F00 = #FF0000 */
color: rgb(255, 0, 0); /* 4. RGB - red, green, blue 0-255 */
color: hsl(0, 100%, 50%); /* 5. HSL - hue, saturation, lightness */All five lines above produce the EXACT same red.
Same colour, five notations. Names are quick for learning; hex is the professional standard you'll see everywhere; rgb and hsl unlock transparency and intuitive adjustments (below). You don't need all five daily — hex for most things, rgba/hsl when you need their special powers.
rgba and Opacity — see-through colors
background-color: rgba(0, 0, 0, 0.5); /* black at 50% opacity */
│ │ │ │
R G B ALPHA (0=invisible, 1=solid)
A semi-transparent white box over a navy background
The alpha channel is rgba's superpower. The 4th value (0 to 1) controls opacity:
rgba(0,0,0,0.5) is half-see-through black — the exact "dark glass overlay" placed over hero images so white text stays readable on top of a photo. There's also a opacity property, but it fades the WHOLE element (text and all); rgba fades only that one colour. Use rgba when you want a transparent background but solid text.HSL — the human-friendly color system
color: hsl(210, 100%, 50%);
│ │ │
hue sat lightness
(0-360) (0-100%) (0-100%)
/* Same hue, just lighter/darker - easy shade variations: */
hsl(210, 100%, 30%) → dark blue
hsl(210, 100%, 50%) → normal blue
hsl(210, 100%, 70%) → light blueWhy HSL is loved: hex codes are impossible to adjust by eye (what's a slightly-lighter #3B7DD8?), but HSL is intuitive — hue is the colour on a 360° wheel (0=red, 120=green, 240=blue), saturation is how vivid, lightness is how light/dark. Want a lighter shade of the same colour? Just raise the lightness. This makes HSL perfect for building colour palettes with consistent shades.
Picking Colors like a Pro
- Contrast for readability: dark text on light background or vice versa. Light-gray on white fails — pretty but unreadable.
- 60-30-10 rule: 60% dominant colour, 30% secondary, 10% accent — instantly balanced.
- Steal palettes: tools like coolors.co generate matching colour schemes; or inspect sites you admire.
- Limit your palette: 2-3 main colours plus neutrals (white, grays, black) looks far more professional than a rainbow.
Exam recall: color = text, background-color = background. Color formats: name, hex, rgb, rgba (with alpha/opacity), hsl. rgba's 4th value is opacity (0-1). HSL = hue, saturation, lightness.
color और background-color
p {
color: white; /* TEXT ka color */
background-color: navy; /* BACKGROUND ka color */
}Navy background par white text
दो properties जो शुरू में सब confuse करते हैं:
color हमेशा TEXT का color है (कभी "element का color" नहीं), जबकि background-color उसके पीछे का fill. याद रखिए: "color = स्याही, background-color = कागज़." Color VALUES (hex, rgb) आप HTML colors chapter में देख चुके — अब उन्हें इन CSS properties से किसी भी element पर लगाते हैं.Color लिखने के 5 तरीके
color: red; /* 1. NAME - 140 available, aasan */
color: #FF0000; /* 2. HEX - standard, precise */
color: #F00; /* 3. SHORT HEX - #F00 = #FF0000 */
color: rgb(255, 0, 0); /* 4. RGB - red, green, blue 0-255 */
color: hsl(0, 100%, 50%); /* 5. HSL - hue, saturation, lightness */Upar ki paanchon lines EXACT same red banati hain.
वही colour, पांच notations. Names सीखने के लिए तेज़; hex professional standard जो हर जगह दिखेगा; rgb और hsl transparency और आसान adjustments खोलते हैं (नीचे). रोज़ पांचों नहीं चाहिए — ज़्यादातर के लिए hex, special powers चाहिए तो rgba/hsl.
rgba और Opacity — आर-पार दिखते colors
background-color: rgba(0, 0, 0, 0.5); /* 50% opacity par kala */
│ │ │ │
R G B ALPHA (0=invisible, 1=solid)
Navy background par aadha-paardarshi white box
Alpha channel rgba की superpower है. चौथी value (0 से 1) opacity control करती है:
rgba(0,0,0,0.5) आधा-आर-पार काला — वही "dark glass overlay" जो hero images पर रखा जाता है ताकि photo के ऊपर white text पढ़ने लायक रहे. एक opacity property भी है, पर वह PURE element को fade करती है (text समेत); rgba सिर्फ उस एक colour को fade करती है. Transparent background पर solid text चाहिए तो rgba.HSL — इंसान-friendly color system
color: hsl(210, 100%, 50%);
│ │ │
hue sat lightness
(0-360) (0-100%) (0-100%)
/* Same hue, bas halka/gehra - aasan shade variations: */
hsl(210, 100%, 30%) → dark blue
hsl(210, 100%, 50%) → normal blue
hsl(210, 100%, 70%) → light blueHSL क्यों पसंद है: hex codes आंख से adjust करना नामुमकिन (थोड़ा हल्का #3B7DD8 क्या होगा?), पर HSL intuitive है — hue 360° wheel पर colour (0=red, 120=green, 240=blue), saturation कितना चटख, lightness कितना हल्का/गहरा. उसी colour का हल्का shade चाहिए? बस lightness बढ़ाइए. इससे HSL consistent shades के साथ colour palettes बनाने के लिए perfect है.
Pro की तरह Colors चुनना
- पढ़ने के लिए contrast: light background पर dark text या उल्टा. White पर light-gray fail — सुंदर पर पढ़ा नहीं जाता.
- 60-30-10 rule: 60% dominant colour, 30% secondary, 10% accent — तुरंत संतुलित.
- Palettes चुराइए: coolors.co जैसे tools matching colour schemes बनाते हैं; या पसंदीदा sites inspect कीजिए.
- Palette सीमित रखिए: 2-3 main colours + neutrals (white, grays, black) इंद्रधनुष से कहीं ज़्यादा professional दिखता है.
Exam recall: color = text, background-color = background. Formats: name, hex, rgb, rgba (alpha/opacity के साथ), hsl. rgba की चौथी value opacity (0-1). HSL = hue, saturation, lightness.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.