How To Change Text Color in CSS With 3 Simple Steps

Your webpage might be saying more than you think—especially when it comes to color. The shade of your text can set the tone for your entire brand, from bold and confident to calm and trustworthy. Whether you’re trying to catch a customer’s eye or build a consistent brand identity, the right text color matters.

That’s where CSS comes in. With just a few lines of code, you can control how every word on your site looks and feels. No design degree or dev team required—just a little knowledge and the right tools.

So let’s walk through exactly how to change text color in CSS, using a variety of ways.

What is CSS?

CSS stands for Cascading Style Sheets. It’s the code controlling how your webpage looks, including the color of your text, the spacing between different elements, and more. When you change CSS code, the way the page looks will be different, but the underlying content will remain the same.

CSS works like a cascading waterfall—style rules flow down and layer over one another. For example, if one rule says “Make all text black” and another says “Make headings blue,” the browser knows that headings, even though they’re text, should follow the more specific rule and appear blue.

If you add a third rule that says “Make the homepage heading red,” the browser will recognize that as the most specific instruction and apply it only to that element. By layering your rules this way—from general to specific—you give the browser a clear roadmap to follow for styling your site.

HTML vs. CSS: What’s the difference?

HTML, or HyperText Markup Language, is what creates the structure of your web pages. It tells the browser which parts are headings, lists, links, or images. By itself, HTML doesn’t have any styling code—things just look basic and plain like a Craigslist ad.

CSS styles the structure, setting colors, fonts, spacing, alignment, and layouts of your HTML document. For example, you could make all your paragraph text blue or center your logo at the top of the page with CSS, but you couldn’t with HTML alone.

The two languages work together. HTML builds the bare bones of your site skeleton, and CSS dresses it up in more interesting, brand-appropriate clothing.

CSS text color options

• HTML color names
• Hexadecimal codes
• RGB values
• HSL colors

There are many ways to define the color of text via CSS, depending on how precise (or readable) you want your color values to be. Let’s explore a few of the different ways to do so:

HTML color names

If you want maximum compatibility, you can define your font color using plain English names that all browsers support, like “red,” “blue,” and “darkgreen,” for example. These predefined colors are great for simple use cases or when you want the code to be really easy to read.

There are more than 140 recognized HTML color names, including goldenrod, crimson, lightgray, and rebeccapurple. Some are clearly one hue, while others look like a mix between two colors or more.

For instance, if you wanted all the paragraph (or <p>) text on your page to be a basic blue, the code for achieving this would be:

Hexadecimal codes

Hexadecimal codes define colors with a #, followed by a six-digit alphanumeric code, which itself represents the levels of red, green, and blue in the color. It’s a more compact, precise way of representing specific shades of color. This method is useful when specific colors (like your brand color palette) are important to maintain. For example, if you want your H1 header to be bright orange, you might code the following:

RGB values

This method uses a numeric value for colors, defining them as a number between 0 and 255 for the amount of red, green, or blue.

For example, if you wanted a warm reddish color for your H2 headings, you could add the following to your CSS:

If you’d like to take it one step further, the RGBA values range includes a fourth element: alpha (transparency). Alpha can range from 0 (completely transparent) to 1 (completely solid). If you wanted that same warm red at 50% transparency, you’d code the following: 

If you’re curious why this approach doesn’t use the three primary colors, it’s because digital screens use additive color mixing, which is based on light. In this system, the primary colors are red, green, and blue (RGB)—not red, yellow, and blue like in paint. Combining these RGB values at different intensities lets screens create millions of colors by controlling how much light of each type is emitted.

HSL colors

HSL stands for hue, saturation, and lightness. Hue is the color (in degrees) on a color wheel, saturation is how intense it is, and lightness is how dark or bright it is. HSL makes it a little easier to tweak colors with lightness or saturation without messing with a brand’s specific hue value. If you wanted a paragraph to come out in a reddish-orange color, fully saturated with a 60% brightness, your code would look like this:

HSLA adds an alpha value for transparency, just like RGBA. This can be helpful when you’re layering colors or creating subtle visual effects. A semi-transparent reddish-orange color in CSS might look like:

How to change text color in CSS

1. Pick an approach to coding
2. Identify the default color
3. Write a CSS rule

It’s fairly simple to change color with custom CSS. It’s only two steps: find out what the default text color is and then write a new rule that overrides it. Here’s how:

1. Pick an approach to coding

You generally write CSS rules in your site’s <style> tag or CSS file, but you can also place them inline on single pages (though it will only apply to that page). The browser will read, or cascade, through all the available styles and will use the one that is most specific to that instance. That means if your rule is more specific or comes later in the file (or on the single page), it’ll win.

2. Identify the default color

Identify the default CSS color, which is usually black. You can find out what the current color is on a live webpage by inspecting the element in your browser, or you can look at your site’s current CSS or theme files to see if there is already a color rule. A default color rule might look like the following:

3. Write a CSS rule

Once you’ve identified the default, you can write a CSS rule changing the color property. You can apply it to any text HTML element like headings, paragraphs, or classes (an HTML label you can give to elements so you can style it with CSS or target with JavaScript).

Here’s an example with a color name:

How to change text background color in CSS

Changing your text’s background color property is also straightforward; you just use a different CSS color property, called background-color. With a color name, your CSS code might look like this:

Or this, with RGB:

Set the color value along with the background-color value to make sure it’s most readable. The following example places white text on a black background color, which offers good contrast for readability.

CSS text color and accessibility

It’s easy to change the text color with CSS, but not all colors are great for web accessibility. People with low vision, color blindness, or even some learning disabilities can have a hard time with certain colors and combinations. Light gray text on a white background can be a challenge for some, for example, while relying on red or green colors to show errors or successes might not work for some colorblind users. Ideally, you want to present your text with good contrast and clarity. 

There are a few useful tools to check accessibility in terms of text color and contrast. With the WebAIM Contrast Checker, you can enter your text and background color to make sure it meets Web Content Accessibility Guidelines (WCAG) standards. Chrome’s built-in DevTools allow you to inspect elements. The ColorZIlla browser extension can analyze colors from your webpage.

The WCAG recommends that you aim for a contrast ratio of at least 4.5:1 for normal text and 3:1 for text larger than 18 pt (or 14 pt bold) and that you use more than just color to convey meaning. It’s also a good idea to test in both light and dark modes, which you can emulate via Chrome DevTools, too. 

For example, avoid light gray text on a white background (a ratio of 1.6:1), and instead make sure your text stands out from the background, like this example of a 15.3:1 ratio: 

Adding more information beyond just color to your code is also important for accessibility. Instead of using a color difference to convey information, you should pair it with icons or labels. Add icons or labels to the code to help people with color blindness: