What is the bgcolor Attribute?
The bgcolor attribute in HTML was historically used to set the background color of various HTML elements. While still recognized by browsers for backward compatibility, this attribute is deprecated in HTML5 and should no longer be used in modern web development.
The bgcolor attribute allowed developers to specify a background color directly within HTML markup, commonly used on elements like <body>, <table>, <tr>, <th>, and <td> to create visually distinctive layouts without requiring external stylesheets. During the era of table-based layouts, developers frequently used bgcolor to distinguish table headers, alternate table rows, and section backgrounds.
As web development matured and the importance of separating structure from presentation became clear, the W3C deprecated bgcolor along with many other presentational attributes in favor of CSS-based solutions. Today, over 95% of websites rely on CSS for styling purposes, including background colors, due to its superior flexibility and maintainability.
Understanding the bgcolor attribute remains important for maintaining legacy codebases and migrating older websites to modern standards. Our web development services can help you modernize legacy applications and build future-proof websites using current best practices.
Syntax and Usage
The bgcolor attribute was applied directly to HTML elements using the following syntax:
<element bgcolor="color_value">
The color_value could be specified using any of three accepted formats: named colors, hexadecimal codes, or RGB values.
Named Colors
HTML supported a set of predefined color names that could be used directly without any special formatting. These named colors included common choices like "red," "blue," "green," "yellow," "black," "white," "aqua," "fuchsia," "gray," "lime," "maroon," "navy," "olive," "purple," "silver," "teal," and many others. Using named colors provided immediate readability but limited the palette to approximately 140 predefined options.
<body bgcolor="lightblue">
<table bgcolor="lightgreen">
<tr bgcolor="darkgreen">
Hexadecimal Color Codes
Hexadecimal color codes offered a much broader color spectrum by specifying red, green, and blue components using base-16 notation. A hex code consisted of a hash symbol followed by six characters, such as "#FF0000" for pure red or "#00FF00" for pure green. Shorthand three-digit hex codes (such as "#F00" for "#FF0000") were also supported for colors where each component had identical digits.
<body bgcolor="#F0F0F0">
<table bgcolor="#E8F4E8">
<tr bgcolor="#2E8B57">
RGB Values
The RGB format explicitly specified color intensity using decimal notation for red, green, and blue components. Each component value ranged from 0 to 255, allowing for over 16 million possible colors. The syntax used the format RGB(red, green, blue), such as RGB(255, 0, 0) for pure red.
<body bgcolor="RGB(240, 240, 240)">
<table bgcolor="RGB(232, 244, 232)">
For more information on modern CSS color application, see our guide to CSS fundamentals and how CSS has become the standard for frontend styling.
| Element | Description |
|---|---|
| <body> | Sets background color for the entire document |
| <table> | Background color for the entire table |
| <tr> | Background color for a table row |
| <th> | Background color for table header cells |
| <td> | Background color for table data cells |
| <thead> | Background color for table header section |
| <tbody> | Background color for table body section |
| <tfoot> | Background color for table footer section |
| <col> | Background color for a column |
| <colgroup> | Background color for column group |
| <marquee> | Background color for scrolling text |
Code Examples
Setting Body Background Color
In this example, the document's background color is set to a light gray using the bgcolor attribute:
<!DOCTYPE html>
<html>
<head>
<title>Body bgcolor Example</title>
</head>
<body bgcolor="#F0F0F0">
<h1>Welcome to My Page</h1>
<p>This page has a light gray background.</p>
</body>
</html>
Coloring Table Elements
Tables frequently used bgcolor for visual organization, distinguishing headers from data rows:
<table bgcolor="#E8F4E8" border="1">
<tr bgcolor="#2E8B57">
<th>Product</th>
<th>Price</th>
</tr>
<tr>
<td>Laptop</td>
<td>Contact for pricing</td>
</tr>
<tr>
<td>Mouse</td>
<td>Contact for pricing</td>
</tr>
</table>
Dynamic Color Changes with JavaScript
While bgcolor is deprecated, the property can still be manipulated through JavaScript for legacy systems:
<body bgcolor="white">
<button onclick="document.body.bgColor='lightblue'">Change to Light Blue</button>
<button onclick="document.body.bgColor='lightgreen'">Change to Light Green</button>
<button onclick="document.body.bgColor='white'">Reset to White</button>
</body>
This demonstrates how JavaScript could dynamically modify the background color, though modern approaches would use the CSS background-color property instead. Our web development team specializes in migrating legacy JavaScript applications to modern frameworks and standards.
Modern Replacement: CSS background-color
Why CSS Is Preferred
The CSS background-color property has largely replaced the bgcolor attribute for several compelling reasons. First, CSS provides separation of concerns by keeping styling separate from HTML structure, making code easier to maintain and update. Second, CSS offers greater flexibility through cascading, inheritance, and the ability to create reusable stylesheets. Third, CSS supports additional background effects such as gradients, images, and transitions that bgcolor never provided.
The evolution from bgcolor to CSS reflects the web development community's growing understanding of the importance of separating content from presentation--a principle that continues to guide modern frontend architecture and best practices.
CSS Syntax
The modern approach uses inline styles, internal stylesheets, or external stylesheets:
/* Inline style */
<body style="background-color: #F0F0F0;">
/* Internal stylesheet */
<style>
body {
background-color: #F0F0F0;
}
table {
background-color: #E8F4E8;
}
.header-row {
background-color: #2E8B57;
color: white;
}
</style>
Migration Strategies
When modernizing legacy code that uses bgcolor, developers should follow a systematic approach:
- Audit existing code - Identify all instances of bgcolor in the codebase and catalog the color values used
- Create CSS rules - Develop corresponding CSS rules using the background-color property, organizing them logically
- Replace inline attributes - Swap inline bgcolor attributes with CSS classes or inline styles
- Test thoroughly - Verify visual consistency across different browsers and devices
Our web development team specializes in migrating legacy websites to modern standards, ensuring your applications remain secure and maintainable. We can help you transition from deprecated HTML attributes to proper CSS solutions that improve performance and accessibility.
Guidelines for modern web development
Accessibility
Ensure sufficient contrast between text and background colors. WCAG recommends 4.5:1 ratio for normal text and 3:1 for large text to maintain readability.
Performance
CSS-based backgrounds offer better caching and loading performance through external stylesheets, reducing page load times.
Maintainability
Centralized CSS enables global updates across websites with minimal effort, reducing maintenance overhead significantly.
Future Compatibility
CSS standards ensure long-term compatibility and browser support, protecting your investment in web development.
Frequently Asked Questions
Sources
- TutorialsPoint - HTML bgcolor Attribute - Comprehensive coverage of bgcolor syntax, supported elements, and examples
- GeeksforGeeks - HTML bgcolor Attribute - Deprecation status, browser support, and modern alternatives
- MDN Web Docs - Applying color to HTML elements using CSS - Modern CSS color application best practices