Introduction to HTML Colors

HTML colors are specified using predefined color names, or RGB, HEX, HSL, RGBA, HSLA values. Colors can be applied to text, backgrounds, borders, and other elements.

Color Systems in HTML

1. Named Colors

HTML supports 140+ predefined color names.

2. HEX Colors

Hexadecimal colors with format #RRGGBB where RR, GG, BB are hexadecimal values (00-FF).

3. RGB Colors

RGB colors with format rgb(red, green, blue) where values range from 0-255.

4. RGBA Colors

RGB with alpha channel for transparency (0.0 - 1.0).

5. HSL Colors

HSL: Hue (0-360), Saturation (0%-100%), Lightness (0%-100%).

6. HSLA Colors

HSL with alpha channel for transparency.

Implementation Examples

Text Colors

<p style="color: red;">This is red text</p>
<p style="color: #ff0000;">This is HEX red text</p>
<p style="color: rgb(255, 0, 0);">This is RGB red text</p>
<p style="color: rgba(255, 0, 0, 0.7);">This is transparent red text</p>

Background Colors

<div style="background-color: lightblue; padding: 10px;">
  Light blue background
</div>

<span style="background-color: yellow; padding: 5px;">
  Yellow highlighted text
</span>

Border Colors

<div style="border: 2px solid #3498db; padding: 10px;">
  Blue bordered element
</div>

<button style="border: 1px solid green; background: lightgreen;">
  Green button
</button>

Best Practices

• Use consistent color schemes throughout your website
• Choose colors with sufficient contrast for accessibility
• Consider color blindness when selecting color combinations
• Use CSS variables for maintainable color schemes
• Test colors on different devices and screens
• Use RGBA/HSLA for smooth transparency effects
• Consider using CSS preprocessors for complex color manipulation