How to Use CSS Color Names: Simple Guide with Examples

You can use CSS color names by setting color properties like color or background-color to predefined color names such as red, blue, or green. Just write the color name as the value in your CSS rule, for example, color: blue;.

Syntax

Use CSS color names by assigning them to color-related properties like color or background-color. The syntax is simple:

• property: color-name; where property is a CSS property that accepts colors.
• color-name is one of the standard CSS color names like red, yellow, or navy.

css

selector {
  property: color-name;
}

Example

This example shows how to use CSS color names to change text color and background color of a paragraph.

css

html {
  font-family: Arial, sans-serif;
}

p {
  color: darkgreen;
  background-color: lightyellow;
  padding: 1rem;
  border-radius: 0.5rem;
  max-width: 300px;
  margin: 1rem auto;
}

Output

A paragraph with dark green text on a light yellow background, padded and centered on the page.

Common Pitfalls

Common mistakes when using CSS color names include:

• Misspelling color names (e.g., bleu instead of blue), which will cause the color to not apply.
• Using color names that are not standard CSS colors.
• Forgetting the semicolon ; after the color value.

Always check spelling and use standard color names.

css

/* Wrong way: misspelled color name */
p {
  color: bleu;
}

/* Right way: correct color name */
p {
  color: blue;
}

Quick Reference

Color Name	Description
red	Bright red color
blue	Standard blue color
green	Standard green color
black	Pure black
white	Pure white
yellow	Bright yellow
orange	Bright orange
purple	Standard purple
pink	Light pink
gray	Medium gray
navy	Dark blue
lime	Bright green

Key Takeaways

Use standard CSS color names as values for color properties like color and background-color.

Write color names in lowercase and spell them correctly to avoid errors.

CSS color names are easy to use and supported by all browsers without extra setup.

Common color names include red, blue, green, black, white, and yellow.

Check your CSS syntax carefully, especially semicolons and spelling.