HTML Tutorial: HTML Colors
Learn how to style text and backgrounds with colors using names, hex codes, and RGB
Colors make your webpage visually appealing. You can change text color, background color, and even element colors using style attribute.
1️⃣ Text Color
INPUT:
<p style="color:blue;">
This text is blue.
</p>
OUTPUT:
This text is blue.
✔️ Use color names (red, blue, green, orange) ✔️ Simple and readable
2️⃣ Background Color
INPUT:
<p style="background-color:yellow;">
Yellow background text
</p>
OUTPUT:
Yellow background text
✔️ background-color changes the element background
✔️ Works for paragraphs, divs, headers, etc.
3️⃣ Hex Color Codes
Hex codes start with # and have six digits: #RRGGBB.
INPUT:
<p style="color:#ff6600;">
Orange text using hex code
</p>
OUTPUT:
Orange text using hex code
✔️ Hex codes give precise colors
✔️ Example: #ff0000 = red, #00ff00 = green
4️⃣ RGB Colors
RGB values define colors using red, green, blue: rgb(RED, GREEN, BLUE).
INPUT:
<p style="color:rgb(255,0,0);">
Red text using RGB
</p>
OUTPUT:
Red text using RGB
✔️ RGB gives full control over color mixing ✔️ Values: 0–255 for each red, green, blue
5️⃣ Combined Example
INPUT:
<p
style="color:white; background-color:rgb(0,128,128); font-size:20px;"
>
White text on teal background
</p>
OUTPUT:
White text on teal background
✔️ Combine color, background-color, and font-size for beautiful styling
🎯 Best Practices
- Use named colors for simplicity
- Use hex or RGB for precise styling
- Always test readability on background colors
- Combine colors with fonts for attractive design
🚀 What’s Next?
👉 HTML CSS
Next lesson will cover:
- Styling elements using CSS
- Inline, internal, and external CSS
- Colors, fonts, borders, and more
HTML colors make your website visually appealing and improve user experience.