📘 DAY 11: HTML COLORS 

1️⃣ What are HTML Colors?

HTML Colors are used to:

• Set text color

• Set background color

• Style borders and elements

Colors are applied using CSS properties, mostly through the style attribute in HTML.

---

2️⃣ Applying Color in HTML

Colors are usually applied using:

style="color:value;"

Example:

<p style="color:red;">This is red text</p>

---

3️⃣ Types of Color Values in HTML

HTML supports four main types of color values:

1. Color Names

2. HEX Values

3. RGB Values

4. RGBA Values

---

4️⃣ HTML Color Names

HTML supports predefined color names.

Examples:

<p style="color:blue;">Blue Text</p>
<p style="color:green;">Green Text</p>
<p style="color:orange;">Orange Text</p>

👉 Easy to use, but limited choices

---

5️⃣ HEX Color Values

HEX values represent colors using hexadecimal numbers.

Format:

#RRGGBB

Example:

<p style="color:#ff0000;">Red Text</p>
<p style="color:#00ff00;">Green Text</p>
<p style="color:#0000ff;">Blue Text</p>

✔ Most commonly used
✔ More control over colors

---

6️⃣ RGB Color Values

RGB stands for Red, Green, Blue.

Format:

rgb(red, green, blue)

Example:

<p style="color:rgb(255,0,0);">Red</p>
<p style="color:rgb(0,255,0);">Green</p>
<p style="color:rgb(0,0,255);">Blue</p>

👉 Values range from 0 to 255

---

7️⃣ RGBA Color Values

RGBA is RGB with Alpha (opacity).

Format:

rgba(red, green, blue, alpha)

Example:

<p style="color:rgba(255,0,0,0.5);">
  Semi-transparent Red
</p>

✔ Alpha value ranges from 0 to 1

---

8️⃣ Background Colors

Background color is applied using:

background-color

Example:

<p style="background-color:yellow;">
  Yellow Background
</p>

---

9️⃣ Text and Background Together

<p style="color:white; background-color:black;">
  White text on black background
</p>

---

🔟 Border Colors

<p style="border:2px solid red;">
  Red Border
</p>

---

1️⃣1️⃣ Common Color Codes (Useful)

Color	HEX
Black	#000000
White	#ffffff
Red	#ff0000
Green	#00ff00
Blue	#0000ff
Gray	#808080

---

1️⃣2️⃣ Color Accessibility (Important)

✔ Use high contrast colors
✔ Avoid light text on light background
✔ Improves readability and accessibility

---

1️⃣3️⃣ Common Beginner Mistakes

❌ Forgetting # in HEX
❌ Using invalid color names
❌ Poor contrast combinations
❌ Overusing colors

---

1️⃣4️⃣ Practice Examples

Example 1:

<h1 style="color:#4CAF50;">HTML Colors</h1>

Example 2:

<p style="background-color:rgb(230,230,230);">
  Light gray background
</p>

---

1️⃣5️⃣ Interview / Viva Questions

1. What are HTML colors?

2. Types of color values in HTML?

3. Difference between RGB and RGBA?

4. What is HEX color code?

5. What is alpha value?

---

1️⃣6️⃣ Summary

• Colors style HTML elements

• Use color and background-color

• HEX and RGB are most common

• RGBA supports transparency

• Use colors carefully for readability