Text Color

CSS provides many different ways to change the style of the text in your HTML documents. For starters, there are the various font codes - CSS properties for defining font-related styles. There are also the text codes which basically provide you with more styling options on your text.

At first glance, you might think that there's a glaring omission.

Where is the text-color property? Or maybe it's called font-color?

Nope. It's none of them. There are no text-color or font-color properties in CSS.

Instead, you simply use the color property to set the color of your text. You can also use the background-color property to set the color behind the text (i.e. the background color of the text).

HTML Text Color Codes

So, the color property allows you to specify your text color. You do this by providing a value. There are several possible value types for the color property.

One way of defining your text color is by using the HTML color name. HTML/CSS provides a number of color names that you can use when defining colors for your text (and other elements). An example of a color name is blue.
Another way is to specify the RGB (Red Green Blue) value using its hexadecimal notation. This is a 6 digit number that defines an exact color.
In some cases you can shorten the hexadecimal value to a 3 digit number. For example, #00f is the same as #0000ff.
Another alternative is to use the RGB functional notation color value. For example, rgb(0,0,255).
Another alternative is to use the RGB color percentage value. For example, rgb(0%,0%,100%).

Here are examples of specifying the same color using the five different value types:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <p style="color:blue;">Text color defined using the color name.</p>
            <p style="color:#0000ff;">Text color defined using its hexadecimal value.</p>
            <p style="color:#00f;">Text color defined using its shorthand hexadecimal value.</p>
            <p style="color:rgb(0,0,255);">Text color defined using the RGB color value.</p>
            <p style="color:rgb(0%,0%,100%);">Text color defined using the RGB color percentage value.</p>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/text-color.cfm">Text color</a></p>

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.

It's your choice which color unit you use however, hexadecimal notation and RGB functional notation provide you with the widest color range. In other words, you have more colors to choose from when using hexadecimal notation or RGB functional notation.

Use the HTML color picker to choose your preferred color.

Text Background Color

As well as specfiying the text color, you can also specify the color of the text background.

Here are examples of specifying the same background color using the five different value types:

Source Code

Result

<!-- Codes by HTMLcodes.me -->
            <p style="background-color:yellow;">Text background color defined using the color name.</p>
            <p style="background-color:#ffff00;">Text background color defined using its hexadecimal value.</p>
            <p style="background-color:#ff0;">Text background color defined using its shorthand hexadecimal value.</p>
            <p style="background-color:rgb(255,255,0);">Text background color defined using the RGB color value.</p>
            <p style="background-color:rgb(100%,100%,0%);">Text background color defined using the RGB color percentage value.</p>
            <p><a  style="font-size:11px;color:#999;" href="http://www.htmlcodes.me/text/text-color.cfm">Text color</a></p>

Text background color defined using the color name.

Text background color defined using its hexadecimal value.

Text background color defined using its shorthand hexadecimal value.

Text background color defined using the RGB color value.

Text background color defined using the RGB color percentage value.

Don't forget to use the HTML color picker to choose your favorite color.