Color

CSS Color Summary

CSS color values control the color of text, backgrounds, borders, and other visual parts of a page.

p {
	color: #333333;
}

.card {
	background-color: white;
}

The color property controls text color. Other properties, such as background-color and border-color, use color values too.

Named Colors

CSS includes named colors such as red, blue, white, and black. They are easy to read, but limited.

.warning {
	color: red;
}

Hex Colors

Hex colors use a # followed by letters and numbers. They are common in design tools and production CSS.

.button {
	background-color: #2563eb;
	color: #ffffff;
}

RGB Colors

RGB colors set red, green, and blue amounts. Each number usually ranges from 0 to 255.

.label {
	color: rgb(40, 40, 40);
}

Contrast Matters

Text needs enough contrast with its background to remain readable. Light gray text on a white background may look subtle, but it can be hard for many people to read.