How to Change Website Font Colors With CSS

CSS gives you control over the appearance of text on the web pages you build and manage. In this guide, we show you how to change font colors in CSS using color keywords, hexadecimal color codes, or RGB color numbers.

How to Use CSS Styles to Change Font Color

Color values can be expressed as color keywords, hexadecimal color numbers, or RGB color numbers. For this lesson, you will need to have an HTML document to see the CSS changes and a separate CSS file that's attached to that document. We're going to look at the paragraph element, specifically.

Use Color Keywords to Change Font Colors

To change the text color for every paragraph in your HTML file, go to the external style sheet and type p { }. Place the color property in the style followed by a colon, like p { color: }. Then, add your color value after the property, ending it with a semicolon. In this example, the paragraph text is changed to the color black:

p {
color: black;
}

Use Hexadecimal Values to Change Font Colors

Using color keywords to change the text to red, green, blue, or some other basic color will not give you the precision you may be looking when creating different shades of those colors. That's what hexadecimal values are for.

This CSS style can be used to color your paragraphs black because the hex code #000000 translates to black. You could even use shorthand with that hex value and write it as #000 with the same results.

p { 
  color: #000000; 
}  

Hex values work well when you need a color that isn't simply black or white. For example, this hex code gives you the ability to set a very specific shade of blue—a mid-range, slate-like blue:

p { 
  color: #2f5687;
}

Hex works by setting the RGB (red, green, blue) values of a color separately with base-sixteen values. That's why they contain the letters A through F in addition to the digits 0 through 9.

Each color, red, green, and blue, receives its own two-digit value. 00 is the lowest value possible, while FF is the highest. The colors are listed in RGB order in a hex, so the first two digits represent the red value and so on.

Use RGBA Color Values to Change Font Colors

Finally, you can use RGBA color values to edit font colors. RGCA is supported in all modern browsers, so you can use these values with confidence that it will work for most viewers, but you can also set an easy fallback.

This RGBA value is the same as the slate blue color specified above:

p { 
  color: rgba(47,86,135,1);
}

The first three values set the Red, Green, and Blue values and the final number is the alpha setting for transparency. The alpha setting is set to 1 to mean 100 percent, so this color has no transparency. If you set that value to a decimal number, like .85, it translates to 85 percent opacity and the color would be slightly transparent.

If you want to bulletproof your color values, copy this CSS code:

p {
  color: #2f5687;
  color: rgba(47,86,135,1);
}  

This syntax sets the hex code first and then overwrites that value with the RGBA number. This means that any older browser that does not support RGBA will get the first value and ignore the second.

It's important to keep in mind that the color property works on any HTML text element in CSS. You can, for example, change all your link colors. This example will make your links bright green:

a {
color: #16c616;
}

This works with multiple elements at once too. You can set every title level simultaneously. For example, this will set all of your title elements to a midnight blue color:

h1, h2, h3, h4, h5, h6 {
color: #020833;
}

Coming up with the hex or RGBA values for your colors isn't always easy. Most web designers will use an image editing program, like Photoshop or GIMP, to generate the exact codes. You can also find convenient color picker tools online, like this one from w3schools.

Other Ways to Style an HTML Page

Font colors can be changed with an external style sheet, an internal style sheet, or inline styling within the HTML document. However, best practices dictate that you should use an external style sheet for your CSS styles.

An internal style sheet, which are styles written directly in the "head" of your document, are generally only used for small, one-page websites. Inline styles should be avoided since they are akin to the old "font" tags that we dealt with many years ago. Those inline styles make it very hard to manage font style since you have to change them at every instance of the inline style.