Internet, Networking, & Security Web Development How to Change Website Font Colors With CSS Make your website fonts any color you want by Jennifer Kyrnin Freelance Contributor Jennifer Kyrnin is a professional web developer who assists others in learning web design, HTML, CSS, and XML. our editorial process LinkedIn Jennifer Kyrnin Updated on December 11, 2020 reviewed by Lisa Mildon Lifewire Tech Review Board Member & Writer Lisa Mildon is a Lifewire writer and an IT professional with 30 years of experience. Her writing has appeared in Geekisphere and other publications. our review board Facebook Twitter LinkedIn Article reviewed on Apr 29, 2020 Lisa Mildon Tweet Share Email Web Development CSS & HTML Web Design SQL What to Know Color keyword: In an HTML file, enter p { color: black;} to change the color for every paragraph, where black refers to your chosen color.Hexadecimal: In an HTML file, enter p { color: #000000;} to change the color, where 000000 refers to your chosen hex value.RGBA: In an HTML file, enter p { color: rgba(47,86,135,1);} to change the color, where 47,86,135,1 refers to your chosen RGBA value. 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;} Ashley Nicole DeLeon / Lifewire 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. Was this page helpful? Thanks for letting us know! Get the Latest Tech News Delivered Every Day Email Address Sign up There was an error. Please try again. You're in! Thanks for signing up. There was an error. Please try again. Thank you for signing up. Tell us why! Other Not enough details Hard to understand Submit