HTML - color Attribute

Quiz

HTML color attribute is used to set the text color of the font element either using a name of color or a color specified in hexadecimal RGB format.

This is a legacy attribute, so you can use the CSS 'color' property instead. This attribute only works with <font> and <hr> tags, however, the CSS color property works with every element.

Syntax

<tag color = 'value'></tag>

Where value can be any color name(red, green, etc.), HEX code of any color, or RGB code of any color.

Applies On

Below listed elements allow using of the HTML checked attribute.

Element	Description
<font>	HTML <font> tag is used to specify the font of the text.
<hr>	HTML <hr> tag is used to draw horizontal line in document.

Examples of HTML color Attribute

The following codes demonstrate the usage of color attribute in HTML

Color attribute for font Tag

In the following example, we are using the HTML 'color' attribute within the font element to set the text color of this element.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'color' attribute</title>
</head>

<body>
   <!--HTML 'color' attribute-->
   <p>Example of the HTML 'color' attribute</p>
   <form>
      <input 
         type="text" 
         placeholder="Username" 
         minlength="8">
      <font color='green'>
         Username must have a minimum length of 8
      </font>
      <br>
      <br>
      <input 
         type="password" 
         placeholder="Password">
      <font color='red'>
      Password must contain special characters
      </font>
      <br>
      <br>
      <button>Login</button>
   </form>
</body>

</html>

Color attribute with hr tag

Consider the another scenario, where we are going to use the color attribute with the hr tag. The below code will show colored lines.

<!DOCTYPE html>
<html lang="en">

<head>
   <title>HTML 'color' attribute</title>
</head>

<body>
   <!--HTML 'color' attribute-->
   <p>Example of HTML 'color' attribute</p>
   <p>Blue line</p>
   <hr color='blue'>
   <p>Red line</p>
   <hr color='red'>
   <p>Green line</p>
   <hr color='green'>
</body>

</html>

Supported Browsers

Attribute
color	Yes	Yes	Yes	Yes	Yes

html_attributes_reference.htm

Print Page