CSS Color Names

CSS Color Names

CSS provides predefined color names that can be used as readable color values without entering numerical color components.

Named colors include familiar keywords such as red, blue, green, orange, and purple, along with many additional colors such as cornflowerblue, tomato, seagreen, and goldenrod.

Using Color Names

A CSS color name can be used anywhere a property accepts that color value.

p {
  color: blue;
}

Named colors can also be used for backgrounds, borders, outlines, shadows, and many other CSS properties.

.notice {
  color: white;
  background-color: steelblue;
  border: 2px solid navy;
}

Because the color is identified by a word rather than numerical components, named colors can make simple CSS declarations easy to read.

Named Color Examples

CSS includes basic color names as well as many additional descriptive names. The following examples show several named colors and their equivalent HEX values.

Each named color represents a specific color value defined by CSS. Using a color name or its equivalent numerical value produces the same color.

Color Names Are Case-insensitive

CSS color names are ASCII case-insensitive, so uppercase and lowercase letters do not change the resulting color.

color: blue;
color: Blue;
color: BLUE;

All three declarations represent the same color. Lowercase color names are commonly used because they keep CSS formatting consistent.

The transparent Keyword

CSS also provides the transparent keyword for a fully transparent color.

.box {
  background-color: transparent;
}

A transparent color allows content or colors behind the element to show through. In modern CSS color processing, transparent represents a fully transparent black color.

When to Use Color Names

Named colors are convenient when a predefined color matches the color you need. They are also useful in examples because names such as red and blue make the intended color immediately recognizable.

For designs that require exact brand colors, coordinated palettes, transparency, or precise adjustments, numerical formats such as HEX, RGB, HSL, or HWB usually provide more control.

CSS Color Names Example

The following example uses named colors for text, background, and border colors. Change the color names in the editor to experiment with other CSS named colors.

<style>
.color-example {
  color: white;
  background-color: steelblue;
  border: 3px solid navy;
  padding: 15px;
}
</style>

<div class="color-example">CSS Named Colors</div>

The example uses three different named colors. Try replacing white, steelblue, or navy with other CSS color names to see the result.