Back to HTML HubPractice HTMLInterview HTML

Nearby lessons

7 of 24
HTML HeadingsHTML CommentsHTML ColorHTML DivHTML Block vs Inline

🎨 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.

Example02
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🌈 Background Colors

Use the background-color property to color page backgrounds or sections. You can use HEX, RGB, RGBA, or HSL values.

Example03
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

🖌️ Border Colors

Set border color using the border or border-color property.

Example04
🌐Code Cell
Loading Editor...
✏️ You can edit this code — click Run to refresh the preview.
Output

✅ Best Practices for Using Colors

  • 🎯 Make sure there's enough contrast for readability (WCAG 2.1 AA)
  • 🔖 Use CSS variables like --primary-color for 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

AttributeDescription
🔴 RedHEX: #FF0000, RGB: rgb(255, 0, 0)
🟢 GreenHEX: #008000, RGB: rgb(0, 128, 0)
🔵 BlueHEX: #0000FF, RGB: rgb(0, 0, 255)
🟡 YellowHEX: #FFFF00, RGB: rgb(255, 255, 0)
⚫ BlackHEX: #000000, RGB: rgb(0, 0, 0)
⚪ WhiteHEX: #FFFFFF, RGB: rgb(255, 255, 255)

🧠 Test Your Knowledge

4 Questions
Progress: 0 / 4