HTML Color

HTML provides you with the ability to change the color of HTML elements. Strictly speaking, it is actually CSS (Cascading Style Sheets) that enables you to specify color in your HTML. Although, HTML used to provide this ability, CSS is now the standard vehicle for specifying HTML color (and other style related properties within your HTML).

The property you use to specify color in HTML depends on the HTML element you are applying color to. For example, to apply color to text, you use the color property. To apply a background color to an HTML element, you use the background-color property.

Color Values

When you define colors in HTML, the color is determined by the value you provide. For example, to make something yellow, you type background-color:yellow;. Color values can be one of the following:

  • Color name. For example, color:red
  • RGB value determined by hexadecimal notation. Example, color:#ff0000 results in a color of red.
  • Hexadecimal shorthand. For example, color:#f00 is the same as color:#ff0000
  • RGB functional notation. For example, color:rgb(255,0,0) results in red.
  • RGB percentage value. For example, color:rgb(100%,0,0) results in red.

HTML Color Example

This example demonstrate how to specify the text color. You do this with the CSS color property.

This example demonstrates that there is more than one way to produce a given color. Here, each line uses a different color value to produce the same color.

Source CodeResult

Text color defined using the color name.

Text color defined using its hexadecimal value.

Text color defined using its shorthand hexadecimal value.

Text color defined using the RGB color value.

Text color defined using the RGB color percentage value.

You can also change the background color and border color of HTML elements. To do this, check out these HTML color codes.

What is RGB and Hexadecimal?

 


R H
G S
B V

#
 

RGB stands for Red Green Blue. When using hexadecimal or RGB notation, you are specifying how much red, how much green, and how much blue should be included in the final color. This is because all colors are a mix of these three colors.

For example, by using 255,0,0, you are saying maximum red and nothing of the other colors. This is because 255 is as high as you can go.

You could of course, use less red and more of the other colors, for example rgb(72,61,139) results in DarkSlateBlue. In hexadecimal, ff is as high as you can go and 00 is as low (i.e. none). Therefore, the color "DarkSlateBlue" would be represented as color:#483D8B. You could have, of course, represented this color by its color name (i.e. color:DarkSlateBlue). One benefit of using hexadecimal or RGB is that you have more color variations to choose from.

Try clicking on the color picker to see how choosing a different color changes the RGB and hexadecimal values. To choose a color, simply click anywhere in the large color square and/or drag the slider down on the hue selector.

To select multiple colors, see the HTML color picker page.

More Color Codes