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
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,
- RGB value determined by hexadecimal notation. Example,
color:#ff0000results in a color of red.
- Hexadecimal shorthand. For example,
color:#f00is the same as
- 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
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.
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?
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.