CSS Text Color Tutorial | Change Text Color with CSS

CSS Text Color

CSS allows you to change the color of text using the color property. Text colors can be specified using named colors, HEX, RGB, HSL, HWB, and other supported CSS color formats.

The CSS color Property

The CSS color property sets the foreground color of an element. For text elements, this determines the color used to display the text.

The basic syntax is:

selector {
  color: value;
}

For example:

p {
  color: blue;
}

The browser displays:

This paragraph is blue.

Text Color Using Named Colors

CSS provides predefined color names that can be used directly as the value of the color property.

p {
  color: blue;
}

Other examples include:

h2 {
  color: darkgreen;
}
.warning {
  color: crimson;
}
.note {
  color: navy;
}

Named colors are convenient when an exact custom color is not required. View All CSS Named Colors

Text Color Using HEX

HEX colors use hexadecimal values to represent the red, green, and blue components of a color. A standard HEX color begins with a number sign (#) followed by six hexadecimal characters.

p {
  color: #336699;
}

The browser displays:

This text uses the HEX color #336699.

The basic six-digit format is:

#rrggbb

Each pair represents red, green, and blue.

Text Color Using RGB

RGB colors define a color by specifying the amount of red, green, and blue. Each RGB component can have a value from 0 through 255.

p {
  color: rgb(51 102 153);
}

This text uses RGB values.

In this example:

Red is 51
Green is 102
Blue is 153

Text Color Using HSL

HSL represents a color using hue, saturation, and lightness. This format can make it easier to adjust how colorful, light, or dark a color appears.

p {
  color: hsl(210 50% 40%);
}

This text uses an HSL color.

Hue identifies the color on the color wheel.
Saturation controls the intensity of the color.
Lightness controls how light or dark the color appears.

Text Color Using HWB

HWB represents colors using hue, whiteness, and blackness. The hue selects the base color while whiteness and blackness adjust its appearance.

p {
  color: hwb(210 20% 40%);
}

This text uses an HWB color.

Hue identifies the base color.
Whiteness adds white to the color.
Blackness adds black to the color.

Comparing Text Color Formats

The same or similar colors can be represented using different CSS color formats.

Play in Editor

The color format you choose does not change how the color property works. It only changes the method used to describe the color.

Learn More About CSS Color Formats

Text Color with Inline CSS

The style attribute can apply a text color directly to an HTML element.

<p style="color: blue;">This text is blue.</p>

This text is blue.

Inline CSS can be useful for demonstrations and individual cases, but styles used throughout a website are generally easier to maintain in a stylesheet.

Text Color with Internal CSS

Internal CSS is placed inside a <style> element, normally within the document's <head>.

<style>
  p {
    color: #336699;
  }
</style>

Every paragraph matched by this selector will use the specified color unless another CSS rule overrides it.

Text Color with External CSS

An external stylesheet keeps CSS separate from the HTML document and allows the same styles to be used on multiple pages.

The HTML document links to the stylesheet:

<link rel="stylesheet" href="/css/style.css">

The stylesheet can then contain:

p {
  color: #336699;
}

Changing Text Color with CSS Classes

CSS classes make it easy to apply different text colors to selected elements. In the HTML Editor example below, you can see how color classes are created with CSS and applied to elements in HTML.

Play in Editor

Text Color and Inheritance

The color property is inherited, which means child elements normally use the text color of their parent unless another color is specified. In the HTML Editor example below, both the heading and paragraph inherit the #333333 text color from their parent <div>.

Play in Editor

Using currentColor

The currentColor keyword represents the current value of an element's color property. It can be used by other CSS properties to reuse the same color.

In the HTML Editor example below, the text and border use the same color. Changing the color value also changes the border color.

Play in Editor

Changing Link Colors

The color property can be used with CSS pseudo-classes to style the different states of a link. In the HTML Editor example below, you can see how each link state is given its own color while keeping links visually distinct and easy to recognize as interactive. It is important to place the link-state rules in the correct order so the styles are applied as expected.

Play in Editor

Text Color with Transparency

Some CSS color formats support an alpha value that controls the transparency of the color.

p {
  color: rgb(51 102 153 / 60%);
}

An alpha value of 100% is fully opaque, while 0% is fully transparent.

When transparency is applied directly to the color, only the color itself becomes transparent.

Learn More About CSS Color Transparency

Text Color Alpha vs. Opacity

Using an alpha value with color is different from applying the CSS opacity property to an element.

.alpha-text {
  color: rgb(0 102 204 / 50%);
}

This changes the transparency of the text color.

.transparent-element {
  opacity: 0.5;
}

The opacity property affects the entire element, including its text, background, borders, and child content.

Text Color and Accessibility

Text should have enough contrast against its background to remain easy to read. Colors that are too similar can make content difficult to read, especially for visitors with low vision or color-vision differences.

Avoid relying on color alone to communicate important information.

For example, instead of identifying an error only with red text, include a clear message:

<p class="error">Error: Please enter a valid email address.</p>

This allows the meaning to remain understandable even when the color is not perceived as intended.

Text Color Best Practices

Use the CSS color property to control text color.
Keep text and background colors sufficiently different for good readability.
Use CSS classes for colors that are reused throughout a website.
Keep commonly used colors in an external stylesheet for easier maintenance.
Avoid using color as the only way to communicate meaning.
Use a consistent color palette throughout your website.

Common Text Color Mistakes

Using the Old font Element

Older HTML documents sometimes used the <font> element to change text colors.

<font color="red">Red text</font>

The <font> element is obsolete and should not be used. Use CSS instead.

<span class="red-text">Red text</span>

.red-text {
  color: red;
}

Using Poor Color Contrast

Very light text on a white background or very dark text on a dark background can be difficult to read. Always consider the background when choosing a text color.

Using Color Alone for Meaning

Do not assume every visitor will perceive colors in the same way. Combine color with text, icons, labels, or other visual indicators when the information is important.

Complete Text Color Example

The following example demonstrates several ways to apply text colors to an HTML document.

Play in Editor

Summary

The CSS color property controls the foreground color of an element and is commonly used to change the color of text. Colors can be defined with named colors, HEX, RGB, HSL, HWB, and other supported CSS color formats.

Text color can be applied with inline, internal, or external CSS and can also be inherited from parent elements. When choosing text colors, always consider readability, contrast, consistency, and accessibility.