MSK Institute • Shikohabad
Loading Page Content...
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Connecting serverPlease wait...
💻 Practical Labs🚀 Free Demo📜 Verified Certificates
Preparing courses, live labs, and learning resources.सामग्री लोड हो रही है, कृपया प्रतीक्षा करें...
Welcome to Chapter 5: Colors in HTML!
Imagine you are making a project poster for your school's Annual Science Exhibition. If you only write on a plain white chart paper using a black ballpoint pen, it looks boring and dull.
Now imagine picking up your watercolor box, sketch pens, and bright highlighters:
Instantly, everyone stopping by your stall wants to read your poster! On websites, colors perform the exact same magic. They give your website life, emotion, and personality.
In this lesson, you will learn the first two exciting ways to paint your webpages:
Tomato and DodgerBlue).In HTML, we usually add colors to elements using the style attribute (which uses simple CSS styling rules).
Here are the three most common ways you will use colors:
Now let's dive into how you tell the browser which color you want!
Web browsers are super smart. They understand 140 official standard color names in plain English!
You do not need to memorize any numbers. Just write the name of the color inside your style tag, and the browser displays it immediately!
| Color Name | What It Looks Like | Where to Use It |
|---|---|---|
Tomato | Vibrant reddish-orange | Urgent alerts, important warnings |
DodgerBlue | Crisp, friendly sky blue | Links, buttons, school headers |
MediumSeaGreen | Fresh, clean leafy green | Success messages, passed test scores |
Orange | Warm, energetic citrus | Badges, call-out highlights |
Gold | Rich sunshine yellow | Trophy awards, star ratings |
Crimson | Deep, royal dark red | Major announcements, badges |
DarkSlateGray | Soft dark charcoal | Easy-to-read paragraph text |
Snow / White | Clean pure white | Backgrounds and card surfaces |
Color names are super easy and fast. But you only have 140 names! What if your school logo has a very specific shade of peacock blue, or you want a soft pastel mango color that does not have an official name?
For that precision, we use RGB!
When you paint on paper, you mix liquid paints like red, yellow, and blue.
But your computer monitor, tablet, and mobile phone screen are made of millions of tiny microscopic light bulbs called pixels. Each pixel contains three tiny colored lights:
In HTML and CSS, we write RGB colors like a small formula:
$$\text{rgb(red, green, blue)}$$
For each color light, you pick a number from 0 to 255:
0 means the light bulb is turned completely OFF (0% brightness).255 means the light bulb is shining at MAXIMUM brightness (100% full power).Because each of the 3 lights can have 256 different values ($0$ to $255$), you can create: $$256 \times 256 \times 256 = 16,777,216\text{ different color shades!}$$
That is over 16.7 million colors!
Let's see what happens when we adjust the light switches:
| Color | RGB Formula | How It Works (The Light Bulb Analogy) |
|---|---|---|
| Pure Red | rgb(255, 0, 0) | Red light full power (255), Green & Blue are completely OFF (0). |
| Pure Green | rgb(0, 255, 0) | Green light full power (255), Red & Blue are OFF (0). |
| Pure Blue | rgb(0, 0, 255) | Blue light full power (255), Red & Green are OFF (0). |
| Pitch Black | rgb(0, 0, 0) | All three lights are OFF! Like standing in a dark room with no torch. |
| Bright White | rgb(255, 255, 255) | All three lights are shining at maximum power together! |
| Yellow | rgb(255, 255, 0) | Red + Green mixed together at full power make bright yellow! |
| Cyan (Aqua) | rgb(0, 255, 255) | Green + Blue lights mixed together make electric cyan. |
| Magenta (Pink/Purple) | rgb(255, 0, 255) | Red + Blue lights mixed together make vibrant magenta. |
| MSK Orange | rgb(255, 107, 0) | Red full (255), Green medium (107), Blue OFF (0). |
| Medium Gray | rgb(128, 128, 128) | All three lights set equally to half power create smooth gray. |
Have you ever looked through a pair of tinted sunglasses, a frosted bathroom glass, or butter tracing paper in your art class?
When you look through tinted sunglasses:
That "see-through" property is called transparency (or opacity).
In web design, whenever you want a color to be semi-transparent, you add a fourth letter: A for Alpha!
$$\text{rgba(red, green, blue, alpha)}$$
The Alpha value is a decimal number between 0.0 and 1.0:
| Alpha Value | Transparency Level | Real-World Analogy |
|---|---|---|
0.0 | 0% Solid (100% Invisible) | Completely clear air. You cannot see the color at all! |
0.2 | 20% Solid (80% See-Through) | Extremely light tint, like clean window glass with water droplets. |
0.5 | 50% Solid (Half See-Through) | Tracing paper or tinted sunglasses. Half color, half background shows through! |
0.8 | 80% Solid (20% See-Through) | Dark sunshade in a car. Mostly solid with a hint of background. |
1.0 | 100% Solid (Fully Opaque) | A solid brick wall! Zero background shows through (acts just like normal RGB). |
Notice how modern websites have floating glass cards or darkened overlay menus. RGBA makes that super easy:
| Feature | Built-in Color Names | RGB | RGBA |
|---|---|---|---|
| Syntax | color: Tomato; | color: rgb(255, 99, 71); | color: rgba(255, 99, 71, 0.5); |
| Number of Choices | 140 pre-set names | 16.7+ Million shades | 16.7+ Million shades |
| Transparency Support | ❌ No | ❌ No (always solid) | ✅ Yes (0.0 to 1.0) |
| Ease of Use | Very easy to remember | Easy once you know Red, Green, Blue | Great for overlays & glass effects |
| Best For | Quick tests & simple school pages | Exact custom brand colors | Modern UI cards, modals & popups |
In India and the Commonwealth, we spell it as colour in our English notebooks. But web programming standards were written in American English!
The maximum limit for Red, Green, and Blue is 255.
The fourth parameter in rgba() must be a decimal between 0.0 and 1.0.
Always separate the numbers in RGB with a comma.
style attribute (color for text, background-color for backgrounds, border for outlines).Tomato, DodgerBlue, Gold, and MediumSeaGreen).rgb(r, g, b), each channel ranges from 0 (light completely OFF) to 255 (light shining at 100% full power).rgb(0, 0, 0) is Black (all lights off); rgb(255, 255, 255) is White (all lights shining full power).0.0 (completely see-through) to 1.0 (completely solid).color in your HTML and CSS code!Test your understanding with these multiple-choice questions:
rgb(0, 0, 0)?rgb(r, g, b)?Open your favorite text editor (like VS Code) and create a file named tricolor-card.html.
Create a special greeting card celebrating India's National Flag (Tiranga) using what you learned today:
rgb(255, 153, 51).rgb(255, 255, 255) with text in Navy Blue (rgb(0, 0, 128)).rgb(19, 136, 8).rgba(0, 0, 0, 0.05).Next Up: In Topic 5.2, we will explore HEX Codes and HSL—the industry-standard color secrets used by professional UI/UX designers and web developers worldwide!
In the next lesson, we will continue your web development journey with HEX & HSL Color Codes (Colors).
Continue learning with hands-on practice, examples, and exercises in the upcoming topic.
| Previous Lesson | Next Lesson |
|---|---|
| HTML Comments | HEX & HSL Color Codes |
Test your understanding of this lesson with 5 questions. Each question has one correct answer.