📘 Lesson · Lesson 18
Colors in HTML
HTML में Colors
Where Colors are Applied
<p style="color:red">Text color</p>
<p style="background-color:yellow">Background color</p>
<p style="border:2px solid blue">Border color</p>Text color ← red letters
Background color ← yellow strip behind text
Border color ← blue frame around
Honest framing: color is CSS's job — HTML only provides the elements. We use the
style attribute here to learn color VALUES; in the CSS course these move to proper stylesheets. The three color VALUE formats below, though, are a forever-skill: names, hex, rgb.Color Names — 140 ready-made words
red blue green orange purple pink gray black white
tomato gold skyblue coral crimson teal indigo salmonBrowsers know ~140 names. Great for quick tests and learning; real projects use hex codes because "blue" is one fixed shade while a brand needs its EXACT blue. Names you'll genuinely use forever: white, black, transparent.
Hex Codes — decoded digit by digit
#FF5733
│└┬┘└┬┘└┬┘
│ FF 57 33
│ Red Green Blue each pair: 00 (none) → FF (full)
#FF0000 = full red, no green, no blue = RED
#000000 = nothing of anything = BLACK
#FFFFFF = full everything = WHITE
#FFFF00 = red + green = YELLOW (light mixing!)A hex code is a recipe: how much Red, Green and Blue light to mix (screens mix LIGHT, so red+green = yellow — unlike paint!). 00 to FF is just 0 to 255 written in hexadecimal. You never calculate these by hand — pickers give them to you — but READING them is a skill: see #E34C26 and think "high red, medium green, low blue → orange-ish" (that's HTML's official logo color, and this tutorial's theme!).
Shorthand: #F00 = #FF0000, #333 = #333333 (each digit doubles)rgb() and rgba() — the same recipe, plus transparency
color: rgb(227, 76, 38); same as #E34C26, in decimal
background: rgba(0, 0, 0, 0.5); 4th number = OPACITY (0 to 1)
0.5 = 50% see-through blackrgba(0,0,0,0.5) is the classic "dark glass" overlay you see on every
hero image with text on top — half-transparent black lets the photo
show through while keeping text readable.
Hex vs rgb: identical power, pick either; rgba's transparency is the reason rgb-family survives (modern hex also allows #RRGGBBAA with an alpha pair, e.g. #00000080 = the same 50% black).
Picking Colors like a Pro
- Type "color picker" in Google — a full picker opens right in search; slide, copy the hex.
- Steal from the pros: the sites you admire — Ctrl+U or DevTools shows their exact hex codes.
- The 60-30-10 rule: 60% one dominant color, 30% secondary, 10% accent — instantly balanced pages.
- Contrast matters: light gray text on white looks "modern" and is unreadable — dark text on light background (or the reverse) always wins. Google also ranks accessibility.
Exam quickies: #000000 = black, #FFFFFF = white, #FF0000 = red. Hex = hexadecimal RGB recipe. rgba's a = alpha (opacity 0–1). 140 named colors exist.
Colors लगते कहां हैं
<p style="color:red">Text color</p>
<p style="background-color:yellow">Background color</p>
<p style="border:2px solid blue">Border color</p>Text color ← लाल अक्षर
Background color ← text के पीछे पीली पट्टी
Border color ← चारों ओर नीला frame
ईमानदार बात: color CSS का काम है — HTML सिर्फ elements देता है. यहां हम color VALUES सीखने को
style attribute use कर रहे हैं; CSS course में ये proper stylesheets में जाएंगे. पर नीचे के तीन color VALUE formats हमेशा की skill हैं: names, hex, rgb.Color Names — 140 बने-बनाए शब्द
red blue green orange purple pink gray black white
tomato gold skyblue coral crimson teal indigo salmonBrowsers ~140 नाम जानते हैं. Quick tests और सीखने के लिए बढ़िया; असली projects hex codes use करते हैं क्योंकि "blue" एक fixed shade है जबकि brand को उसका EXACT blue चाहिए. जो नाम सच में हमेशा use होंगे: white, black, transparent.
Hex Codes — अंक-दर-अंक decode
#FF5733
│└┬┘└┬┘└┬┘
│ FF 57 33
│ Red Green Blue har jodi: 00 (kuch nahi) → FF (poora)
#FF0000 = poora red, green-blue nahi = RED
#000000 = kisi ka kuch nahi = BLACK
#FFFFFF = sabka poora = WHITE
#FFFF00 = red + green = YELLOW (roshni ka mixing!)Hex code एक recipe है: कितनी Red, Green, Blue ROSHNI मिलानी है (screens roshni मिलाती हैं, इसलिए red+green = yellow — paint से उल्टा!). 00 से FF यानी 0 से 255, hexadecimal में लिखा. हाथ से कभी नहीं निकालने — pickers दे देते हैं — पर PADHNA एक skill है: #E34C26 देखकर सोचिए "red ज़्यादा, green मध्यम, blue कम → नारंगी-सा" (यही HTML का official logo color है, और इस tutorial की theme!).
Shorthand: #F00 = #FF0000, #333 = #333333 (har ank double ho jata hai)rgb() और rgba() — वही recipe, plus transparency
color: rgb(227, 76, 38); #E34C26 hi hai, decimal me
background: rgba(0, 0, 0, 0.5); 4th number = OPACITY (0 se 1)
0.5 = 50% aar-paar dikhta kalargba(0,0,0,0.5) wahi classic "dark glass" overlay hai jo har
hero image par text ke neeche dikhta hai — aadha-paardarshi kala
photo ko jhalakne deta hai aur text padhne layak rehta hai.
Hex vs rgb: ताकत बराबर, कोई भी चुनिए; rgba की transparency ही rgb-परिवार के ज़िंदा रहने की वजह है (modern hex में भी alpha pair वाला #RRGGBBAA चलता है, जैसे #00000080 = वही 50% काला).
Pro की तरह Colors चुनना
- Google में "color picker" type कीजिए — search में ही पूरा picker खुलता है; slide कीजिए, hex copy.
- Pros से चुराइए: जो sites पसंद हैं — Ctrl+U या DevTools उनके exact hex codes दिखा देता है.
- 60-30-10 rule: 60% एक dominant color, 30% secondary, 10% accent — page तुरंत संतुलित.
- Contrast मायने रखता है: white पर हल्का gray text "modern" दिखता है और पढ़ा नहीं जाता — light background पर dark text (या उल्टा) हमेशा जीतता है. Google accessibility को rank भी करता है.
Exam quickies: #000000 = black, #FFFFFF = white, #FF0000 = red. Hex = hexadecimal RGB recipe. rgba का a = alpha (opacity 0–1). 140 named colors होते हैं.
💻 Live Code Editor
इस पेज का code यहाँ तैयार है — बदलिए और तुरंत नतीजा देखिए. कुछ install किए बिना.
सब कुछ आपके browser में ही चलता है — कोई server, कोई signup नहीं. JavaScript का
console.log देखने के लिए F12 दबाइए.