HTML Colors

HTML colors are used to change the appearance of text, backgrounds, and borders.
Colors in HTML are applied using CSS color values.

Ways to Define Colors in HTML

HTML supports four common color formats:

  1. Color Names
  2. HEX Values
  3. RGB Values
  4. HSL Values

1. Color Names

HTML supports predefined color names.

<p style="color: red; background-color: lightgray;">
  This text uses color names.
</p>

Notes

  • Easy to read
  • Limited color choices

2. HEX Color Values

HEX colors use hexadecimal values.

<p style="color: #ffffff; background-color: #1a73e8;">
  This text uses HEX colors.
</p>

Format

#RRGGBB

3. RGB Color Values

RGB defines colors using red, green, and blue values.

<p style="color: rgb(255, 255, 255); background-color: rgb(26, 115, 232);">
  This text uses RGB colors.
</p>

Format

rgb(red, green, blue)

4. HSL Color Values

HSL stands for Hue, Saturation, and Lightness.

<p style="color: hsl(0, 0%, 100%); background-color: hsl(214, 82%, 51%);">
  This text uses HSL colors.
</p>

Format

hsl(hue, saturation, lightness)

Applying Colors to Borders

<p style="border: 2px solid #333; padding: 10px;">
  This paragraph has a colored border.
</p>

Common Color Properties

  • color → text color
  • background-color → background color
  • border-color → border color

Important Notes

  • Always ensure good color contrast
  • Use HEX or RGB for precise colors
  • Avoid overusing bright colors
  • Colors are handled by CSS