HTML bgcolor Attribute

Introduction

The bgcolor attribute in HTML is used to define the background color of an element. It allows developers to set a specific color for an element’s background, adding visual appeal and enhancing the overall design of a web page.

What You’ll Learn

Purpose of bgcolor

The primary purpose of the bgcolor attribute is to customize the background color of various HTML elements, such as tables, table cells, and table headers. By using this attribute, you can tailor the appearance of your web page to match your design preferences.

📝 Syntax

Add bgcolor to a supported element with a color name or hex code:

<td bgcolor="lightblue">Cell content</td>
<table bgcolor="#EFEFEF">...</table>

Syntax Rules

• Value is a color name (e.g. red) or hex code (e.g. #FF0000).
• Valid on table, tr, td, th, and body.
• Not valid on generic elements like <div>.
• For rgb() colors, use CSS background-color instead.

💎 Values

The bgcolor attribute accepts values that represent different colors. These values can be specified using color names, hexadecimal codes, or RGB values. Here’s a quick overview:

• Color Names — You can use predefined color names such as red, blue, or green to set the background color.
• Hexadecimal Codes — Specify colors using hexadecimal codes like #FF0000 for red or #00FF00 for green.
• RGB Values — Values like rgb(255, 0, 0) are best applied with CSS background-color, not the legacy bgcolor attribute.

<td bgcolor="red">Named color</td>
<td bgcolor="#00FF00">Hex color</td>
<td style="background-color: rgb(255, 0, 0);">RGB via CSS</td>

Applicable Elements

Examples Gallery

Color names, hex codes, RGB via CSS, table styling, and dynamic JavaScript bgcolor.

<td bgcolor="red">This cell has a red background.</td>

<td bgcolor="#00FF00">This cell has a green background.</td>

<td style="background-color: rgb(255, 0, 0);">This cell has a red background using RGB values.</td>

<table bgcolor="#EFEFEF">
  <tr>
    <td bgcolor="lightblue">Row 1, Cell 1</td>
    <td bgcolor="lightgreen">Row 1, Cell 2</td>
  </tr>
  <tr>
    <td bgcolor="lightcoral">Row 2, Cell 1</td>
    <td bgcolor="lightyellow">Row 2, Cell 2</td>
  </tr>
</table>

<table id="dynamicElement">...</table>

<script>
  // Dynamically set bgcolor for an element
  document.getElementById("dynamicElement").setAttribute("bgcolor", "#FFD700");
  // Modern alternative:
  // document.getElementById("dynamicElement").style.backgroundColor = "#FFD700";
</script>

♿ Accessibility

• Contrast matters — Ensure sufficient contrast between background color and text color for readability.
• Do not rely on color alone — Pair color cues with text labels or icons for color-blind users.
• Avoid low-contrast pastels — Light yellow backgrounds with white text fail WCAG contrast guidelines.
• Use CSS for theming — CSS classes make it easier to support high-contrast and dark modes.
• Test with screen readers — Background color alone does not convey meaning to assistive tech.

💡 Best Practices

• Use the bgcolor attribute selectively to enhance the visual appeal of your web page when maintaining legacy HTML.
• Ensure sufficient contrast between the background color and the text color for better readability.
• Experiment with different color values to find the combination that aligns with your design preferences.