Nearby lessons
7 of 24🎨 HTML Colors
📌 What are HTML Colors?
HTML colors let you style your text, backgrounds, and borders. You can use color names (red), HEX codes (#ff0000), RGB (rgb(255, 0, 0)), and more!
🖍️ Text Colors
To change text color, use the color property in inline styles or CSS.
Code Example
PREVIEW READY
🌈 Background Colors
Use the background-color property to color page backgrounds or sections. You can use HEX, RGB, RGBA, or HSL values.
Code Example
PREVIEW READY
🖌️ Border Colors
Set border color using the border or border-color property.
Code Example
PREVIEW READY
✅ Best Practices for Using Colors
- 🎯 Make sure there's enough contrast for readability (WCAG 2.1 AA)
- 🔖 Use CSS variables like
--primary-colorfor consistency - 🚫 Don’t use color alone to show meaning — combine with text or icons
- 🎭 Use RGBA/HSLA for transparency effects
- 🌗 Test your design in both light and dark modes if applicable
📘 Common Color Names Table
| Attribute | Description |
|---|---|
🔴 Red | HEX: #FF0000, RGB: rgb(255, 0, 0) |
🟢 Green | HEX: #008000, RGB: rgb(0, 128, 0) |
🔵 Blue | HEX: #0000FF, RGB: rgb(0, 0, 255) |
🟡 Yellow | HEX: #FFFF00, RGB: rgb(255, 255, 0) |
⚫ Black | HEX: #000000, RGB: rgb(0, 0, 0) |
⚪ White | HEX: #FFFFFF, RGB: rgb(255, 255, 255) |
🧠 Test Your Knowledge
4 QuestionsProgress: 0 / 4
Keep Going!HTML Div