HTML Colors

HTML Colors

Color is essential in web design for creating visual hierarchy, enhancing readability, and guiding user attention. HTML supports multiple color formats using CSS: named colors, HEX, RGB, and HSL.

🎨 1. Using Named Colors

HTML supports over 140 predefined color names.

Popular color names include:

• red
• blue
• green
• black
• white
• gray
• tomato
• gold

📌 Named colors are quick and easy to use but lack the precision of other formats.

🌈 2. RGB (Red, Green, Blue)

What is RGB?

• RGB stands for Red, Green, Blue.
• Each color component ranges from 0 to 255.

Syntax:

Example:

Explanation:

• rgb(255, 0, 0) → Full red
• rgb(0, 255, 0) → Full green
• rgb(0, 0, 255) → Full blue

✅ RGB offers fine control over color intensity.

🔢 3. HEX (Hexadecimal Codes)

What is HEX?

• HEX uses base-16 notation to define colors.
• Format: #RRGGBB, where RR, GG, and BB range from 00 to FF.

Example:

Shorthand HEX:

• #FFF → white (#FFFFFF)
• #000 → black (#000000)

✅ HEX codes are compact and widely used in design tools and CSS.

🌐 4. HSL (Hue, Saturation, Lightness)

What is HSL?

• Hue: 0–360° on the color wheel (0 = red, 120 = green, 240 = blue)
• Saturation: 0% (gray) to 100% (full color)
• Lightness: 0% (black) to 100% (white)

Syntax:

Example:

✅ HSL is intuitive for generating color themes and adjusting brightness.

🎨 5. Applying Colors in HTML Elements

You can apply colors directly using the style attribute:

✅ Summary of Color Formats

🔑 Key Takeaway

Understanding and choosing the right color format in HTML enables you to design visually appealing and accessible websites. Use named colors for simplicity, RGB or HEX for precision, and HSL when flexibility and visual control are needed.