How to Change Font Color in CSS

The three ways to set text color in CSS

You change font color in CSS using the color property. The property name is always color — not font-color or text-color. You assign it a color value, and the browser applies that color to all text inside the element.

The three most common ways to write a color value are: named colors (like red or navy), hexadecimal codes (like #FF5733), and RGB values (like rgb(255, 87, 51)). Each method produces the same result — the difference is which one is easiest for you to read and remember.

Here is the basic syntax: color: colorvalue; inside a CSS rule. The element you explore it to will display text in that color.

Key Takeaways

The CSS property is color, not font-color, and it goes inside a selector rule with a semicolon at the end.
Named colors like blue, green, and tomato work in CSS and are easiest to read when you are learning.
Hexadecimal color codes like #3498DB give you precise control and are the standard in professional web design.
RGB and RGBA values let you set color and transparency together, useful when you need text to fade or blend with a background.
The color property affects text only — to change background color, use background-color instead.

Using named colors

CSS recognizes about 140 named colors you can type directly. Common ones include red, blue, green, black, white, gray, orange, purple, and pink. You can also use less obvious names like tomato, coral, khaki, and teal.

Here is a complete example:

p { color: blue; }

This rule makes all paragraph text blue. Named colors are the fastest way to start because you do not need to remember a code — you just type the color name. The downside is that you have only 140 options, so you cannot fine-tune the exact shade.

Using hexadecimal color codes

Hexadecimal codes give you millions of color options. A hex code starts with a hash symbol and is followed by six characters: #RRGGBB. The first two characters control red, the middle two control green, and the last two control blue. Each pair ranges from 00 (none of that color) to FF (full intensity).

Here are some examples:

#FF0000 is pure red. #00FF00 is pure green. #0000FF is pure blue. #FFFFFF is white. #000000 is black. #808080 is gray.

In a CSS rule, it looks like this:

h1 { color: #3498DB; }

This makes all h1 headings a medium blue. Hex codes are the industry standard because they are precise, widely supported, and straightforward to share between designers and developers. If a designer gives you a color, it is almost always in hex format.

Using RGB and RGBA values

RGB stands for red, green, blue. You write it as rgb(red, green, blue) where each value is a number from 0 to 255. rgb(255, 0, 0) is red. rgb(0, 255, 0) is green. rgb(0, 0, 255) is blue.

RGBA adds a fourth value for alpha, which controls transparency. The alpha value ranges from 0 (completely transparent) to 1 (completely opaque). rgba(255, 0, 0, 0.5) is red at 50% opacity — you can see the background through it.

Here is an example:

a { color: rgba(0, 0, 255, 0.8); }

This makes all links a slightly transparent blue. RGB is useful when you are building colors programmatically or when you need transparency. For straightforward color changes, hex codes are usually faster to type.

explore color to specific elements

You can target any HTML element and change its text color. The most common targets are paragraphs, headings, links, and spans.

p { color: navy; } changes all paragraph text to navy.

h2 { color: #2C3E50; } changes all h2 headings to a dark gray-blue.

a { color: #E74C3C; } changes all links to red.

.warning { color: #D32F2F; } changes text in any element with the class warning to red.

#footer { color: #7F8C8D; } changes text in the element with the id footer to gray.

You can also nest selectors. nav a { color: white; } changes only links inside a nav element to white, leaving other links unchanged.

The difference between color and background-color

The color property changes the text itself. The background-color property changes the background behind the text. They are separate properties and do different things.

p { color: white; background-color: black; } creates white text on a black background.

p { color: black; background-color: yellow; } creates black text on a yellow background.

If you want to change only the text color, use color. If you want to change only the background, use background-color. You can use both in the same rule to control both at once.

Common mistakes and how to fix them

The most common mistake is typing font-color instead of color. CSS does not recognize font-color, so the rule will not work. Always use color alone.

Another mistake is forgetting the hash symbol in hex codes. color: FF0000; will not work — it must be color: #FF0000;.

A third mistake is using a color that is too similar to the background. Black text on a dark gray background is hard to read. Always check that your text color has enough contrast with whatever is behind it. A quick way to test this is to look at your page on your phone — if you squint and still cannot read it, the contrast is too low.

If a color rule is not working, open your browser's developer tools (usually F12 or right-click and select "Inspect"), find the element in the HTML, and look at the Styles panel. You will see which rules are applied and which are crossed out. A crossed-out rule means another rule is overriding it — usually because of specificity or because a rule lower in the file is winning.

Frequently Asked Questions

Can I use color names like "lightblue" or do I have to use hex codes?

You can use color names. CSS recognizes names like lightblue, darkgreen, lightgray, and darkred. Named colors are fine for learning and for internal projects. In professional work, hex codes are more common because they give you exact control and work the same way across all browsers and devices.

What is the difference between #FFF and #FFFFFF?

They are the same color — white. CSS allows you to shorten hex codes by using three characters instead of six when each pair is the same. #FFF is shorthand for #FFFFFF. #F00 is shorthand for #FF0000 (red). The shortened version works everywhere, but the full version is clearer to read.

How do I make text a gradient color instead of a solid color?

The color property does not support gradients. To create gradient text, you use background: linear-gradient(...) and then background-clip: text along with -webkit-background-clip: text and -webkit-text-fill-color: transparent. This is more complex and works better in some browsers than others. For most projects, a solid color is simpler and more reliable.

Why is my text color not showing up?

The most common reason is that another rule is overriding it. Check your developer tools to see which rules are applied. Also check that your text color has enough contrast with the background — white text on a white background will not be visible even though the rule is working. If you are using a class or id selector, make sure the HTML element actually has that class or id.

Can I change the color of only part of a sentence?

Yes, but you need to wrap that part in an element first. Use a tag around the words you want to color, then explore a class to that span. For example: This is important text. Then in CSS: .highlight { color: red; }

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.