How to Change Font Color in CSS

The Basic Way to Change Text Color

To change the color of text in CSS, use the color property and set it to a color value. This is the single most direct way to control how text appears on a webpage.

Here is the simplest example. If you have HTML that looks like this:

This is my paragraph.

You can make the text blue by writing this CSS:

p { color: blue; }

The word blue is a named color that browsers understand. When you save and reload the page, all paragraph text will turn blue. That is all there is to the basic version.

Key Takeaways

The color property controls text color, and you can set it using color names, hex codes, RGB values, or HSL values.
Named colors like blue, red, and green work in CSS but only cover about 140 colors that browsers recognize.
Hex codes like #FF5733 and RGB values like rgb(255, 87, 51) let you pick from millions of colors.
The color property only affects text — to change the background behind text, use the background-color property instead.
You can target specific elements by using class names, IDs, or element selectors to apply different colors to different parts of your page.

Using Named Colors

CSS includes about 140 color names that all modern browsers recognize. These include obvious ones like red, green, blue, yellow, black, and white. They also include less common names like tomato, coral, teal, indigo, and khaki.

Named colors are the easiest to read and remember, but they are limited. If you need a specific shade — like a particular shade of gray or a custom brand color — you cannot get it with a name. For anything beyond the basic 140 colors, you need hex codes or RGB values.

Here is an example using a named color:

h1 { color: darkslategray; }

This makes all <h1> headings dark slate gray. The browser knows what that color is and applies it.

Using Hex Codes for Precise Colors

Hex codes are six-character codes that start with a hash symbol and use numbers and letters to describe a color. They let you pick from 16 million possible colors, so you can match any exact shade you need.

A hex code looks like this: #FF5733. The first two characters describe how much red is in the color, the next two describe green, and the last two describe blue. Each pair ranges from 00 (none of that color) to FF (maximum of that color).

Here is how to use a hex code in CSS:

a { color: #0066CC; }

This makes all links blue. If you have a brand color that your designer gave you as a hex code, this is the way to use it. You can find hex codes for colors you like by using an online color picker, or your designer can give them to you directly.

Using RGB and HSL Values

RGB stands for red, green, blue. Instead of using a hex code, you describe a color by saying how much red, green, and blue to mix together. Each value ranges from 0 to 255.

Here is an RGB example:

p { color: rgb(255, 87, 51); }

This creates an orange-red color. The first number (255) is maximum red, the second (87) is a medium amount of green, and the third (51) is a small amount of blue.

HSL stands for hue, saturation, lightness. It describes color differently — by picking a hue (the color itself, from 0 to 360 degrees on a color wheel), then saying how saturated it is (how vivid, from 0 to 100 percent) and how light it is (from 0 to 100 percent).

Here is an HSL example:

h2 { color: hsl(200, 100%, 50%); }

This creates a bright, vivid blue. HSL is useful when you want to create variations of the same color — you can keep the hue the same and just change the lightness to make it darker or lighter.

Targeting Specific Elements with Classes and IDs

If you want different parts of your page to have different text colors, you need to target them separately. The most common way is to use a class or an ID.

A class is a label you add to HTML elements. You can use the same class on multiple elements. Here is an example:

This is a warning. This is another warning. This is normal text.

Then in your CSS, you target the class with a dot:

.warning { color: red; }

Now only the paragraphs with the warning class turn red. The third paragraph stays the default color.

An ID is similar, but you use it only once per page. You target an ID with a hash symbol:

#header { color: navy; }

This targets the element with id="header" and makes its text navy blue. Use classes when you want to style multiple elements the same way, and use IDs when you want to style one specific element.

The Difference Between Color and Background-Color

The color property changes the text itself. The background-color property changes the color behind the text. Many people confuse these two.

Here is an example of each:

p { color: white; } — This makes the text white. p { background-color: black; } — This makes the background behind the text black.

If you use both together, you get white text on a black background:

p { color: white; background-color: black; }

When you are trying to change how text looks and it is not working, check whether you are using the right property. If the text color is not changing, you probably need color. If the background is not changing, you need background-color.

Common Mistakes and How to Fix Them

The most common mistake is misspelling the property name. In American English, it is color, not colour. If you write colour: red;, the browser will ignore it because it does not recognize that spelling.

Another common mistake is forgetting the hash symbol in a hex code. If you write color: FF5733; instead of color: #FF5733;, the browser will not understand it. Always include the hash.

A third mistake is using a color name that does not exist. Browsers only recognize the 140 official CSS color names. If you make up a name like color: brightblue;, it will not work. Use brightblue is not a real color name — use a hex code or RGB value instead, or pick from the real named colors like dodgerblue or deepskyblue.

Finally, check that your CSS file is actually linked to your HTML file. If you write perfect CSS but forget to link the stylesheet in your HTML <head>, nothing will happen. Make sure you have a line like <link rel="stylesheet" href="styles.css"> in your HTML.

Frequently Asked Questions

Can I use color names and hex codes in the same stylesheet?

Yes. You can mix named colors, hex codes, RGB, and HSL all in the same CSS file. There is no rule against it. Use whatever format makes sense for each color — named colors for simple cases, hex codes when you need a specific brand color, and RGB or HSL when you want to create color variations.

What if my text color is hard to read against the background?

Change either the text color or the background color so they contrast more. If you have dark text on a dark background, make the text lighter or the background lighter. If you have light text on a light background, make the text darker or the background darker. A good rule is to use dark text on light backgrounds or light text on dark backgrounds.

How do I make text a different color when someone hovers over it?

Use the :hover pseudo-class. For example, a:hover { color: red; } makes links turn red when the mouse moves over them. This works on any element, not just links — p:hover { color: blue; } makes paragraphs turn blue on hover.

Can I use color names I make up myself?

No, not in standard CSS. Browsers only recognize the 140 official color names. If you need a custom color, use a hex code, RGB value, or HSL value instead. If you are using a CSS preprocessor like Sass, you can define your own color variables, but that is beyond basic CSS.

Does the color property work on all HTML elements?

Yes, the color property works on any element that contains text. This includes paragraphs, headings, links, buttons, list items, and more. It does not work on elements that do not display text, like <img> or <video>.

This guide is for general information only and is not medical, financial, legal, or other professional advice. For decisions specific to your situation, consult a qualified professional. See our Editorial Policy.