HTML color Attribute

Introduction

The color attribute in HTML is used to specify the text color inside various legacy HTML elements. By setting the color attribute, developers can customize the appearance of text to enhance the visual design of a web page.

What You’ll Learn

Purpose of color

The primary purpose of the color attribute is to define the color of text content within an HTML element. This allows for a more personalized and aesthetically pleasing presentation of textual information on a webpage.

📝 Syntax

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

<font color="red">Red text</font>
<font color="#0000FF">Blue text</font>

Syntax Rules

• Value is a color name (e.g. red) or hex code (e.g. #FF0000).
• Valid on legacy elements such as <font> and <basefont>.
• Not valid on generic elements like <p> or <div>.
• For rgb() and hsl() colors, use CSS color instead.

💎 Values

The color attribute accepts values that represent different colors. These values can be specified using various methods, including:

• Color Names — Common color names like red, green, or blue can be used.
• Hexadecimal Notation — Hex codes such as #RRGGBB provide a wide range of color options.
• RGB Values — Using the RGB format with syntax rgb(red, green, blue) is best applied with CSS color, not the legacy HTML attribute.
• HSL Values — The HSL format hsl(hue, saturation, lightness) allows specifying colors based on hue, saturation, and lightness via CSS.

<font color="red">Named color</font>
<font color="#00FF00">Hex color</font>
<p style="color: rgb(0, 0, 255);">RGB via CSS</p>
<p style="color: hsl(120, 100%, 50%);">HSL via CSS</p>

Applicable Elements

Examples Gallery

Color names, hex codes, RGB and HSL via CSS, a basic example, and dynamic JavaScript color changes.

<font color="red">This text is in red color.</font>

<font color="#00ff00">This text is in green color.</font>

<p style="color: rgb(0, 0, 255);">This text is in blue color.</p>

<p style="color: hsl(120, 100%, 50%);">This text is in green color using HSL.</p>

<font color="blue">This text is in blue color.</font>

<font id="dynamicText">This text will turn red using JavaScript.</font>

<script>
  // Dynamically set color for an element
  document.getElementById("dynamicText").setAttribute("color", "#ff0000");
  // Modern alternative:
  // document.getElementById("dynamicText").style.color = "#ff0000";
</script>

♿ Accessibility

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

💡 Best Practices

• Experiment with different color combinations to find the most visually appealing and readable text.
• Ensure there is enough contrast between text color and background color for readability and accessibility.
• Consider using CSS stylesheets for a more organized and maintainable approach to styling.