CSS Colors

Colors make websites attractive, readable, and modern.

Main things you style:

• Text color
• Background color

Colors can be written as:

• Words (red, blue, tomato)
• Numbers (RGB)
• Letters + numbers (HEX)

Text Color — color

Changes the text color:

p {
  color: tomato;
}

Background Color — background-color

Sets the background of an element:

p {
  background-color: tomato;
  color: white;
}

Default background is transparent.

Color Formats

1. RGB
2. HEX
3. RGBA

RGB (Red, Green, Blue)

RGB mixes red, green, and blue light.

rgb(red, green, blue)

Basic colors:

rgb(255, 0, 0)   /* red */
rgb(0, 255, 0)   /* green */
rgb(0, 0, 255)   /* blue */

Mixed colors:

rgb(255, 255, 0)   /* yellow */
rgb(0, 255, 255)   /* cyan */
rgb(255, 0, 255)   /* magenta */

Black, white, gray:

rgb(0, 0, 0)       /* black */
rgb(255, 255, 255) /* white */
rgb(128, 128, 128) /* gray */

HEX (Hexadecimal)

#ff0000 → red
#00ff00 → green
#0000ff → blue

Most common format in real projects.

RGBA (Transparency)

rgba(red, green, blue, alpha)

Alpha values:

• 0 → invisible
• 0.5 → half visible
• 1 → fully visible

Examples:

rgba(255, 0, 0, 1)
rgba(255, 0, 0, 0.5)
rgba(255, 0, 0, 0.1)

RGB vs RGBA

• RGB → no transparency
• RGBA → has transparency

Example

header {
  background-color: #f5f5f5;
}

a {
  color: #212121;
}

nav {
  background-color: rgba(0, 0, 255, 0.3);
}

Summary

• color → text
• background-color → background
• RGB → numbers
• HEX → most used
• RGBA → transparency