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:

Source CodeResult

You can change the text color of a whole sentence or paragraph...

...or you can change the text color of one word or even a single letter.

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:

Source CodeResult

You can change the text color of a whole sentence or paragraph...

...or you can change the text color of one word or even a single letter.

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:

Source CodeResult

You can change the text color of a whole sentence or paragraph...

...or you can change the text color of one word or even a single letter.

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

Source CodeResult

You can change the text color of a whole sentence or paragraph...

...or you can change the text color of one word or even a single letter.

RGB Percentage Range

Source CodeResult

You can change the text color of a whole sentence or paragraph...

...or you can change the text color of one word or even a single letter.

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.

Source CodeResult

YES

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.

Source CodeResult

You can change the text color of a whole sentence or paragraph...

...or you can change the text color of one word or even a single letter.

HSLA Value

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

Source CodeResult

YES

HTML Text Color Generator

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

About HTML.am

HTML.am was created in order to provide HTML tools, codes, tutorials, and other resources to help webmasters create and maintain their HTML documents.

HTML.am aims primarily at beginners, but may also be useful to web professionals.

About the HTML Codes

The HTML codes on this website are provided free of charge, for you to use however you wish. Feel free to modify the code to suit your own needs.

My Related Sites

Here are some of my other sites: