HTML color Attribute

HTML color Attribute

The obsolete HTML color attribute was historically used with certain elements to specify the color of text or other visual content directly in the HTML markup.

Historical Syntax

One of the most common historical uses of the color attribute was with the obsolete <font> element:

<font color="blue">Blue text</font>

Authors could use named colors or other color values supported by the browsers of the time:

<font color="#0088cc">Colored text</font>

The attribute was also historically used with elements such as <hr> to control their displayed color.

Historical Elements

The color attribute was historically associated with presentational elements and browser-specific extensions.

Historical Use

Before CSS became the standard way to control webpage presentation, authors commonly placed visual formatting directly in HTML. The color attribute allowed text and certain other page features to be assigned colors directly in the markup.

For example, a page could contain many <font color="..."> elements, each specifying the appearance of a particular piece of text. Although this provided visual control, it mixed presentation with the document's content and structure.

Changing a site's color scheme could therefore require editing the same presentational HTML throughout many pages.

Why It Became Obsolete

The HTML color attribute became obsolete as CSS became the standard method for controlling presentation. CSS allows colors to be defined separately from the HTML structure and reused throughout a webpage or an entire website.

This separation makes pages easier to maintain and provides much greater control over text, borders, backgrounds, interactive states, and other visual properties.

Modern Alternative

Use CSS properties to control color. For text, use the CSS color property:

<p class="blue-text">This text is blue.</p>

<style>
.blue-text {
  color: #0088cc;
}
</style>

Other visual features use the CSS property appropriate for the part of the element being colored. For example, backgrounds use background-color and borders can use border-color.

<div class="color-example">
  Modern CSS controls these colors.
</div>

<style>
.color-example {
  color: #ffffff;
  background-color: #0088cc;
  border: 3px solid #005580;
  padding: 20px;
}
</style>

Learn More About CSS Colors

The CSS tutorials explain how to apply colors to text, backgrounds, borders, and other parts of a webpage:

• CSS Text Color - Learn how the CSS color property controls text color.
• CSS Color Values - Learn about the different ways colors can be written in CSS.
• CSS Background Color - Learn how to set an element's background color.
• CSS Borders - Learn how CSS controls the width, style, and color of element borders.

Legacy Browser Support

The color attribute was widely recognized when used with the obsolete <font> element. Other historical uses, such as applying color to <hr>, were less consistently standardized across browsers.

Modern browsers may continue to display some old presentational markup for compatibility with legacy webpages, but the color attribute should not be used when creating or updating modern HTML.

For additional information about historical browser compatibility, visit Can I Use? . Search for the HTML element or attribute you want to check. Search results can include related HTML features, element attributes, APIs, and other technologies, so select the result that most closely matches the legacy feature you are researching.

Related Attributes

Other obsolete HTML attributes historically used to control webpage colors and presentation include:

• bgcolor - Historically used to set background colors.
• bordercolor - Historically used by some browsers to set border colors.
• text - Historically used to set the default text color of a document.
• link - Historically used to set the color of unvisited links.
• alink - Historically used to set the color of active links.
• vlink - Historically used to set the color of visited links.

Specifications

Presentational uses of the HTML color attribute are obsolete and should be replaced with CSS. See the WHATWG HTML Living Standard for information about obsolete and non-conforming features.