HTML Color

In HTML, color is defined using CSS properties. The property you use for a particular situation will depend on what it is you're applying color to. For example, two popular CSS properties for defining color are the color property (for applying foreground color to the text) and background-color property (for applying color to an element's background).

When it comes to specifying an actual color, that's where things get a little interesting. There are many ways of specifying color in HTML. Most web developers choose their preferred method and stick with that. Having said that, you should be aware of the various methods for specifying a color value, because, you may find that you prefer to use a combination of methods.

But let's not get ahead of ourselves. Let's look at a couple of simple examples first.

HTML Color Examples

Here are some examples of applying color to HTML elements.

Text Color

To specify text color, you need to use color:{color code}, where {color code} is a color name, hex code, or decimal RGB value.

Source Code	Result
<p style="color:#000099;">HTML color example</p>	HTML color example

Text Background Color

To specify background color, use the background-color property:

Source Code	Result
<p style="background-color:#000099;">HTML color example</p>	HTML color example

Text Border Color

To specify border color, use the border property, along with the border width and style:

Source Code	Result
<p style="border:2px dashed #000099;">HTML color example</p>	HTML color example

Div Color

You can apply color to any element and it will cascade down to all elements within that element. For example, here we apply colors to the <div> element. The text within the <div> element automatically inherits the colors that we specify at the <div> level.

Source Code	Result
<div style="width:300px;background-color:yellow;color:blue;border:1px solid black;"> The surrounding 'div' element has got the following properties applied against it: background-color:yellow; color:blue; border:1px solid black; </div>	The surrounding 'div' element has got the following properties applied against it: background-color:yellow; color:blue; border:1px solid black;

Div and Text

Here's another example. This time, I've added some more text, with specific styles that over-ride those defined at the <div> level.

Source Code	Result
<div style="width:300px;background-color:yellow;color:blue;border:1px solid black;"> <p>The surrounding 'div' element has got the following properties applied against it: background-color:yellow; color:blue; border:1px solid black;</p> <p style="color:white;background-color:orange;">This text has got different styles applied. But you can also over-ride these styles by using a 'span' element, like <span style="color:black;">this</span> and <span style="background-color:red;color:lime;font-weight:bold;">this</span>.</p> </div>	The surrounding 'div' element has got the following properties applied against it: background-color:yellow; color:blue; border:1px solid black; This text has got different styles applied. But you can also over-ride these styles by using a 'span' element, like this and this.

Source Code

Result

<div style="width:300px;background-color:yellow;color:blue;border:1px solid black;">
<p>The surrounding 'div' element has got the following properties applied against it: background-color:yellow; color:blue; border:1px solid black;</p>
<p style="color:white;background-color:orange;">This text has got different styles applied. But you can also over-ride these styles by using a 'span' element, like <span style="color:black;">this</span> and <span style="background-color:red;color:lime;font-weight:bold;">this</span>.</p>
</div>

The surrounding 'div' element has got the following properties applied against it: background-color:yellow; color:blue; border:1px solid black;

This text has got different styles applied. But you can also over-ride these styles by using a 'span' element, like this and this.

Specifying a Color Value

As you can see by the above HTML & CSS code, you specify a color by using the relevant CSS color property (eg, background-color), followed by a colon (:), followed by the color value (eg, green). For example, to make something yellow, you type background-color:green;. Color values can be one of the following:

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

It might be tempting to just stick to color names when specifying your HTML colors. After all, color names are easy to remember. However, I recommend getting familiar with hexadecimal and RGB color values. This is because, hexadecimal and RGB colors provide you with a far greater range of colors than color names. If you get stuck while trying to come up with a color scheme for your website, color names can be quite limiting. Hexadecimal and RGB will open your options right up. Especially if you use a color picker like the one below.

About Hexadecimal & RGB Colors

Click anywhere in the color picker to the right. This will select a color. After you select a color, you'll notice the RGB, HSL, and hexadecimal values are shown for your selected color.

Here's an explanation of hexadecimal and RGB.

RGB stands for Red Green Blue. Therefore, when using 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.

It's the same with hexadecimal notation, except, the notation uses base 16 to specify the red, green, and blue values.

For example, if you use RGB notation, rgb(255,0,0) specifies "all red and none of the other colors". This is because 255 is as high as you can go in RGB notation.

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).