How to Change Text Color in CSS

The three ways to set text color in CSS

You change text color in CSS using the color property. The property accepts color values in three formats: named colors (like red or blue), hexadecimal codes (like #FF5733), or RGB values (like rgb(255, 87, 51)). You write it in your stylesheet or in a style attribute on an HTML element.

The simplest approach is to use a named color. If you want all paragraph text to appear blue, you write p { color: blue; } in your CSS file. For more precise colors, hexadecimal codes give you millions of options — color: #1E90FF; produces a specific shade of blue that named colors cannot match. RGB values work the same way: color: rgb(30, 144, 255); produces the identical blue.

Where you place this rule matters. A rule in your stylesheet applies to every matching element on every page. A rule in a style attribute on a single tag applies only to that tag. A rule in a style block at the top of your HTML file applies to that page only.

Key Takeaways

The color property changes text color; use it in a CSS rule, a style block, or a style attribute on an HTML tag.
Named colors like blue and red work for common colors, but hexadecimal codes like #FF5733 let you pick from millions of shades.
A rule in your stylesheet applies to all matching elements across all pages; a rule in a style attribute applies only to that one tag.
The color property affects text only — to change the background behind text, use the background-color property instead.

Using named colors for common shades

Named colors are the fastest way to set text color when you need a standard shade. CSS recognizes about 140 named colors, including red, blue, green, orange, purple, gray, and black. You type the color name directly into the color property.

To make all headings red, write this in your stylesheet:

h1 { color: red; }

To make a single paragraph blue, add a style attribute to that tag:

This text is blue.

Named colors work well for prototyping or when your design does not require exact shades. If you need a specific blue that matches your logo or brand, hexadecimal or RGB values are more precise.

Hexadecimal codes for exact colors

Hexadecimal color codes let you specify any of 16 million colors using a six-character code preceded by a hash symbol. Each pair of characters represents the amount of red, green, and blue in the color, from 00 (none) to FF (full). The code #FF0000 is pure red, #00FF00 is pure green, and #0000FF is pure blue.

To use a hex code, write it in the color property:

p { color: #1E90FF; }

This rule makes all paragraph text a medium blue. If you have a color from your design tool or a screenshot, you can use a color picker to find its hex code. Most design software, browser developer tools, and online color pickers show hex codes when you select a color.

Hex codes are the standard in web design because they are compact, widely supported, and easy to share with other developers or designers.

RGB and RGBA values for transparency

RGB values work like hex codes but use decimal numbers instead. You write three numbers from 0 to 255 separated by commas, representing red, green, and blue. The code rgb(255, 0, 0) is pure red, identical to #FF0000.

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

p { color: rgba(30, 144, 255, 0.8); }

This rule makes paragraph text a medium blue at 80% opacity. Transparency is useful when you want text to blend slightly with the background or create a layered visual effect. Named colors and hex codes do not support transparency — you must use RGB or RGBA for that.

Applying color to specific elements and classes

You can target text color to specific HTML elements, classes, or IDs. To change the color of all links, write a { color: #0066CC; }. To change only links inside a navigation menu, use a more specific selector like nav a { color: white; }.

Classes let you reuse a color rule across different elements. Create a class in your stylesheet:

.highlight { color: #FF6B35; }

Then add that class to any tag:

This text is orange.So is this.

IDs work the same way but apply to only one element. Use a class when the same color applies to multiple elements, and an ID when it applies to one unique element.

Changing text color on hover and interaction

You can change text color when a user hovers over an element or interacts with it using CSS pseudo-classes. The :hover pseudo-class applies a rule only when the mouse is over the element.

a:hover { color: #FF6B35; }

This rule makes links turn orange when you hover over them. The :active pseudo-class applies while the element is being clicked, and :focus applies when an element has keyboard focus.

button:active { color: white; }input:focus { color: #333; }

These interactive color changes give users feedback that an element is clickable or selected. They are especially important for accessibility — users with keyboards need to see which element has focus.

Frequently Asked Questions

What is the difference between color and background-color?

The color property changes the text itself. The background-color property changes the color behind the text. To make text red on a yellow background, use color: red; and background-color: yellow; on the same element.

Can I use color names like "lightblue" or "darkgreen"?

Yes. CSS recognizes extended color names like lightblue, darkgreen, lightcoral, and darkslategray. A full list is available on the MDN Web Docs website. Named colors are convenient but less precise than hex or RGB values.

Why does my text color not show up?

The most common reason is that another CSS rule is overriding it. Check your stylesheet for conflicting rules, or use browser developer tools to inspect the element and see which rule is actually applied. Also verify that the color you chose has enough contrast with the background — very light text on a light background is hard to read.

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

The color property does not support gradients. You need to use background: linear-gradient(...) combined with -webkit-background-clip: text and -webkit-text-fill-color: transparent. This is more complex and has limited browser support compared to solid colors.

Does the order of hex code characters matter?

Yes. The first two characters control red, the next two control green, and the last two control blue. Changing the order changes the color completely. #FF0000 is red, but #00FF00 is green.

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.