CSS offers multiple ways to define colors for text, backgrounds, borders, and more.

Color Properties

The main properties that accept color values:

• color - text color
• background-color - background
• border-color - borders

Named Colors

CSS provides 140+ named colors:

p {
  color: red;
  background-color: lightblue;
}

Common names: black, white, red, blue, green, yellow, orange, purple, gray, pink, coral, navy, teal

Special values:

• transparent - fully transparent
• currentColor - inherits from color property

Hexadecimal

The most common format, using 6 hex digits:

p {
  color: #333333;
  background-color: #ff6600;
}

Shorthand (when pairs are identical):

p {
  color: #333;  /* Same as #333333 */
  background-color: #f60;  /* Same as #ff6600 */
}

With alpha (transparency):

p {
  color: #33333380;  /* 50% transparent */
}

RGB and RGBA

Specify red, green, blue values (0-255):

p {
  color: rgb(255, 255, 255);  /* white */
  background-color: rgb(0, 0, 0);  /* black */
}

With alpha channel (0-1):

p {
  background-color: rgba(0, 0, 0, 0.5);  /* 50% transparent black */
}

HSL and HSLA

Hue, Saturation, Lightness format:

p {
  color: hsl(0, 100%, 50%);  /* red */
  background-color: hsl(240, 100%, 50%);  /* blue */
}

• Hue: 0-360 (color wheel degrees)
• Saturation: 0%-100% (gray to vivid)
• Lightness: 0%-100% (black to white)

With alpha:

p {
  background-color: hsla(120, 100%, 50%, 0.3);
}

Which Format to Use?

Format	Best For
Named	Quick prototyping, common colors
Hex	Most common, compact
RGB	When thinking in red/green/blue
HSL	Easier to adjust lightness/saturation

Modern Syntax

Modern CSS allows commas to be optional and supports the / separator for alpha:

p {
  color: rgb(255 255 255);
  background-color: rgb(0 0 0 / 0.5);
  border-color: hsl(120 100% 50% / 50%);
}

Lessons in this unit:

0:	Introduction
1:	How to Work with CSS Fonts
2:	How to Style Text with CSS Typography
3:	▶︎ How to Use CSS Colors
4:	How to Use CSS Backgrounds
5:	How to Use CSS Filters
6:	How to Use CSS Units
7:	How to Use the CSS calc() Function
8:	How to use Google Fonts
9:	RGB color codes