Foreground Color - HTML

The foreground color of an element is the color that actually comprises the visible part of the element—in most cases, it is the color of the font.

You can control the foreground color using the color property. This property has the following format:

color: color—value;

The color—value can be specified in any of the usual means for specifying a color:

  • Color keywords—Black, white, maroon, and so on.
  • Color hexadecimal values—This value is specified in the form:
    #rrggbb, where rrggbb is two digits (in hexadecimal notation) for each of the colors red, green, and blue.
  • Color decimal or percentage values—This value is specified using the rgb( ) property. This property takes three values, one each for red, green, and blue. The value can be an integer between 0 and 255 or a percentage. For example, the following specifies the color purple (all red and all blue, no green) in integer form:
rgb(255, 0, 255)
  • And the following specifies the color purple in percentages:
rgb(100%, 0, 100%)

Tip: Most graphic editing programs supply RGB values in several different forms in their color palette dialog boxes.
For example, to set the font color to red for paragraph elements in the redtext class, you could use this definition:

p.redtext { color: red; }

When specifying foreground colors, keep in mind what background colors will be used in the document. It’s ineffective to use red text on a red background, or white text on a white background, for example. If you have multiple background colors in your document, consider using classes and the CSS cascade to ensure that the right foreground colors are used.

Keep in mind that the user settings can affect the color of text as well—if you don’t explicitly define the foreground color, the user agent will use its default colors.

All rights reserved © 2020 Wisdom IT Services India Pvt. Ltd Protection Status

HTML Topics