Chapter 7CSS Tutorial~1 min read
CSS Colors
HEX, RGB, RGBA, HSL — Colors in CSS
CSS मध्ये color property HTML elements चा text color, border, background set करते. Colors 5 वेगळ्या प्रकारे define करता येतात.
📌
CSS मध्ये "color" लिहितात — "colour" नाही! (British spelling नाही, American spelling वापरतात.)
1. Named Colors — सगळ्यात सोपे
Named Colors
css
p { color: purple; }
h1 { color: orange; }
div { color: tomato; }
/* 140+ named colors CSS मध्ये आहेत */2. Hexadecimal (HEX) — सगळ्यात जास्त वापरला जातो
HEX code म्हणजे # नंतर 6 characters — RRGGBB format. प्रत्येक pair 00 (कमी) ते FF (जास्त) range मध्ये असतो.
HEX Colors
css
h1 { color: #FF0000; } /* Pure Red */
h2 { color: #00FF00; } /* Pure Green */
h3 { color: #0000FF; } /* Pure Blue */
h4 { color: #FB923C; } /* Orange — मराठी Tech accent */
h5 { color: #ffffff; } /* White */
h6 { color: #000000; } /* Black */3. RGB — Red, Green, Blue Values
RGB Colors
css
/* rgb(red, green, blue) — प्रत्येक 0 ते 255 */
h1 { color: rgb(0, 0, 0); } /* Black */
h2 { color: rgb(255, 255, 255); } /* White */
h3 { color: rgb(251, 146, 60); } /* Orange */4. RGBA — RGB + Opacity (Transparency)
RGBA Colors — Alpha channel
css
/* rgba(red, green, blue, alpha) */
/* alpha: 0 = पूर्ण transparent, 1 = पूर्ण opaque */
h1 { color: rgba(0, 0, 0, 0.8); } /* 80% opacity */
h2 { color: rgba(251, 146, 60, 0.5); } /* 50% transparent orange */
div { background: rgba(0, 0, 0, 0.3); } /* Semi-transparent overlay */5. HSL — Hue, Saturation, Lightness
HSL Colors
css
/* hsl(hue, saturation%, lightness%) */
/* Hue: 0-360 (color wheel — 0=red, 120=green, 240=blue) */
/* Saturation: 0%=gray, 100%=vivid color */
/* Lightness: 0%=black, 50%=normal, 100%=white */
h1 { color: hsl(25, 95%, 65%); } /* Orange */
h2 { color: hsl(0, 0%, 0%); } /* Black */
h3 { color: hsl(235, 100%, 50%); } /* Vivid Blue */💡
Color pick करण्यासाठी browser DevTools मध्ये color picker आहे. VS Code मध्ये पण color swatch दिसतो — click केल्यावर picker उघडतो.
✅ Key Points — लक्षात ठेवा
- ▸Named: color: red — simple, 140+ colors
- ▸HEX: #RRGGBB — सगळ्यात popular, #FB923C
- ▸RGB: rgb(255, 150, 60) — 0 to 255 per channel
- ▸RGBA: rgba(255, 150, 60, 0.5) — + transparency
- ▸HSL: hsl(25, 95%, 65%) — intuitive, hue=color, saturation=vivid, lightness
0/16 chapters पूर्ण