CSS: RGB color function

By Xah Lee. Date: . Last updated: .

RGB function using integers, with opacity

RGB color by integer, 0 to 255

Syntax, with space separator

/* 3 integers, separated by space */
p {
 background-color: rgb(255 215 0);
}

/* percentage */
p {
 background-color: rgb(100% 84% 0%);
}

Syntax, with comma separator

/* comma as separator */
p {
 background-color: rgb(255, 215, 0);
}

/* percentage */
p {
 background-color: rgb(100%, 84%, 0%);
}
background-color: rgb(255 215 0);
background-color: rgb(100% 84% 0%);
background-color: rgb(255, 215, 0);
background-color: rgb(100%, 84%, 0%);

Opacity (optional)

/* color with opacity */

/* a decimal value between 0 and 1 */
p {
 background-color: rgb(255 215 0 / 0.5);
}

/* can also be a percentage */
p {
 background-color: rgb(255 215 0 / 50%);
}
background-color: rgb(255 215 0 / 50%);
background-color: rgb(255 215 0 / 0.5);

rgba function (legacy)

when is css rgba legacy function.

  • Officially since CSS Color Module Level 4 (the current standard).
  • Browsers started supporting the modern syntax around 2018–2019.
  • By 2022–2023, the spec and the community started clearly calling the old rgba() syntax legacy.

rgba(red, green, blue, opacity)

p.x {
 background-color: rgba(255, 215, 0, 0.5);
}

p.y {
 background-color: rgba(100%, 84%, 0%, 50%);
}
background-color: rgba(255, 215, 0, 0.5);
background-color: rgba(100%, 84%, 0%, 50%);

CSS Color