Text Color

In HTML, you can change the text color using Cascading Style Sheets (CSS). You can change the text color using inline style sheets, embedded style sheets, or external style sheets.

For the purposes of these examples, we'll use inline style sheets, however, I encourage you to use external style sheets whereever possible.

In HTML, you can specify color using the color name, hexadecimal value (also known as the "hex value" or "hex color codes"), or the RGB value.

Color Name

You can use the color name to change the text color:

Hexadecimal Value

You can specify text color by using the hexadecimal value.

Full Hexadecimal Notation

You can use the full hexadecimal value to change the text color:

Hexadecimal Shorthand

Depending on the full hexadecimal value, you can shorten it from six digits to three digits. You can only do this if the six digit value is made up of three doubles (each double representing red, green, or blue). For example 990000 can be shortened to 900. You can do this because in the shorthand version, each digit represents two digits.

You couldn't shorten for example, fe0f00 because the red and green values are made up of different numbers (fe and 0f respectively).

Here's an example of changing the text color using hexadecimal shorthand:

RGB Value

You can also specify text color using the RGB value. You can specify either integer values or percentage values. For example, you could express the color red as rgb(255,0,0) or rgb(100%,0%,0%).

RGB Integer Range

RGB Percentage Range

RGBA Value

Using CSS3, you can specify text color using an RGBA value. In this context, the "A" refers to "Alpha Transparency" or opacity.

Note that at the time of writing, CSS3 is still in draft status and browser support for the RGBA method of specifying color is limited. Therfore, if your browser isn't displaying this example properly, it's probably because it doesn't support the RGBA method.

HSL Value

CSS3 also allows you to set text color using the HSL color value. HSL stands for hue-saturation-lightness, and is a more intuitive way to create colors.

Note that at the time of writing, browser support for this method was limited. Therefore, if this example doesn't display properly for you, it's probably because your browser doesn't support the HSL method for specifying colors.

HSLA Value

Similar to the RGBA model, the HSLA model allows you to specify alpha transparency.

HTML Text Color Generator

You can also use the text generator to quickly generate color codes for your HTML.