Colors

Color is one of the first things you will want to control in CSS. And CSS gives you several ways to specify colors.

Named Colors

The simplest way is using color names. CSS supports 140 named colors like red, blue, green, tomato, steelblue, and even papayawhip.

h1 {
  color: tomato;
}

p {
  color: steelblue;
}

Named colors are easy to remember but limited. For more control, you will want hex or rgb.

Hex Colors

Hex colors start with a # followed by six characters (0-9 and A-F). The first two are red, the next two green, the last two blue.

h1 {
  color: #ff5733;
}

div {
  background-color: #2c3e50;
}

#ff0000 is red, #00ff00 is green, #0000ff is blue. Mix them to get any color you want.

RGB and RGBA

RGB works like hex but uses the rgb() function with numbers from 0 to 255.

p {
  color: rgb(255, 87, 51);
}

div {
  background-color: rgb(44, 62, 80);
}

RGBA adds an alpha channel for transparency. The fourth parameter is a decimal from 0 (invisible) to 1 (fully opaque).

div {
  background-color: rgba(44, 62, 80, 0.5);
}

HSL

HSL stands for Hue, Saturation, Lightness. It is more intuitive once you get used to it.

h1 {
  color: hsl(9, 100%, 60%);
}

• Hue: 0-360 on the color wheel (0 is red, 120 is green, 240 is blue)
• Saturation: 0% (gray) to 100% (full color)
• Lightness: 0% (black) to 100% (white)

HSLA adds an alpha parameter just like RGBA.

Which One Should You Use?

It is mostly personal preference. Hex is the most common in real-world codebases. RGBA is great when you need transparency. Named colors are fine for quick prototypes. HSL is popular with designers who think in terms of color theory.