HTML Colors

🌈 Introduction to HTML Colors

Colors in HTML help bring your website to life by changing the appearance of text, backgrounds, borders, and more. You can specify colors using names, HEX codes, RGB values, HSL, and even transparency.

>>“Color does not add a pleasant quality to design — it reinforces it.” — Pierre Bonnard

🎯 Ways to Define Colors in HTML

  • 🎨 Color Names (e.g., red, blue)
  • 📐 HEX Codes (e.g., #ff0000)
  • 🔢 RGB Values (e.g., rgb(255, 0, 0))
  • 🌀 HSL Values (e.g., hsl(0, 100%, 50%))
  • 🔍 RGBA and HSLA for transparency

💡 Color Name Example

Using Named Colors

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

🧮 HEX Code Example

Using HEX Colors

<p style="color: #00ff00;">This text is green.</p>

🔢 RGB and RGBA

RGB stands for Red, Green, Blue. You define intensity for each color (0–255). RGBA adds an alpha value for transparency (0.0–1.0).

RGB and RGBA Example

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

🌀 HSL and HSLA

HSL stands for Hue, Saturation, Lightness. Just like RGBA, HSLA includes an alpha channel for transparency.

HSL and HSLA Example

<p style="color: hsl(120, 100%, 50%);">Bright green</p>
<p style="color: hsla(120, 100%, 50%, 0.3);">Faded green</p>

🌟 Best Practices

  • Use HEX or HSL for consistent design systems 🎯
  • For accessibility, ensure sufficient color contrast ⚠️
  • Use CSS variables for scalable color schemes
  • Prefer rgba() or hsla() when you need opacity

🎨 Example Palette

Color NameHEXPreview
Red#ff0000
Green#00ff00
Blue#0000ff

📚 Resources to Explore

Note

🧠 Tip: Test your color combinations using contrast checkers like WebAIM Contrast Checker for better accessibility!
>>“Color is a power which directly influences the soul.” — Wassily Kandinsky 🌈