CSS Font Color

CSS Font Color

The CSS color property sets the foreground color of an element and is most commonly used to control the color of text.

Although text color is often described as font color, CSS does not have a font-color property. Text color is set with the color property using a named color, HEX value, RGB value, HSL value, or another supported CSS color format.

color Syntax

The color property is followed by a CSS color value. The selected color is applied to the element's text and can also provide the current color used by other properties.

p {
  color: steelblue;
}

This rule displays the text inside each matching <p> element using the CSS named color steelblue.

CSS Color Values

The color property accepts the CSS color formats covered in the CSS Colors tutorials. Different formats can represent the same or similar colors depending on the values used.

.named-color {
  color: steelblue;
}
.hex-color {
  color: #4682b4;
}
.rgb-color {
  color: rgb(70 130 180);
}
.hsl-color {
  color: hsl(207 44% 49%);
}

You can choose the color format that is easiest to understand and maintain for a particular design.

Inheriting Text Color

The color property is inherited. When a parent element has a text color, descendant elements normally use that color unless another CSS rule gives them a different color.

body {
  color: #212529;
}

Setting color on the body element is a common way to establish the default text color for a webpage.

Using Different Text Colors

Different selectors can apply different text colors to headings, paragraphs, links, or other elements. This allows color to support the visual hierarchy and design of a webpage.

h1 {
  color: #191970;
}
p {
  color: #212529;
}
a {
  color: #0088cc;
}

Text colors should remain readable against their backgrounds and should be used consistently throughout the design.

Text Color and Contrast

The foreground text color and its background should have enough contrast for the text to remain easy to read. Colors that appear attractive together do not necessarily provide sufficient contrast.

WCAG contrast guidelines provide measurable contrast ratios for evaluating text and background color combinations. The CSS Color Contrast tutorial explains these requirements and provides an interactive tool for testing colors.

Learn more about CSS Color Contrast.

Font Color Example

The following example uses the color property to change the paragraph text to steel blue. Open the example in the editor and change steelblue to another CSS color value. Try a named color, HEX, RGB, HSL, or HWB value, then run the code to see how the text color changes.

color: steelblue;
color: #4682b4;
color: rgb(70 130 180);
color: hsl(207 44% 49%);
color: hwb(207 27% 29%);