CSS Color

CSS provides several ways to specify colors for text, backgrounds, borders, and many other visual parts of a webpage.

Colors can be written using color names or numerical color values such as HEX, RGB, HSL, and HWB. Some color formats can also include an alpha value that controls transparency.

Using Color in CSS

A color value is assigned to a CSS property that accepts colors. The color property, for example, controls the foreground color of an element and is commonly used to set text color.

p {
  color: blue;
}

Many other CSS properties also accept color values, including background-color, border-color, outline-color, text-decoration-color, and box-shadow.

CSS Color Values

CSS supports several ways to represent a color. Different formats can describe the same visible color using different values.

color: red;
color: #ff0000;
color: rgb(255 0 0);
color: hsl(0 100% 50%);
color: hwb(0 0% 0%);

Each declaration above represents red. The best format depends on how the color is being selected, adjusted, or used in the stylesheet.

The following tutorials examine these color formats individually and explain how their values are calculated and written.

Text Color

The color property sets an element's foreground color. For most elements, this determines the color used to display text.

h1 {
  color: #0088cc;
}

The color property is inherited, so descendant elements can use the same color unless another declaration gives them a different value.

Background Color

The background-color property sets the background color of an element.

.notice {
  background-color: #ffffcc;
}

Background colors can be applied to individual elements or larger areas such as sections, containers, and the page body.

Border Color

The border-color property sets the color of an element's border. A visible border also requires a border style.

.box {
  border: 2px solid #0088cc;
}

The shorthand border property in this example sets the border width, style, and color together.

CSS Color Example

Use the sliders to change the red, green, and blue values. The preview and RGB color value update as the sliders move.

<style>
.color-example {
  color: rgb(0 136 204);
  border: 2px solid rgb(0 136 204);
}
</style>

<p class="color-example">CSS can use color for text and borders.</p>

Play in Editor

This introductory example uses RGB values because the individual red, green, and blue components are easy to demonstrate with sliders. RGB and the other CSS color formats are covered in greater detail later in this section.