Widely available A reliable default when channel-based color values fit the project workflow.

RGB

Note: The rgba() functional notation is an alias for rgb(). They are exactly equivalent. It is recommended to use rgb().

The rgb() functional notation expresses a color in the sRGB color space according to its red, green, and blue components. An optional alpha component represents the color's transparency.

ColorFunctionsStyling

Browser support

Feature Desktop Mobile
Chrome
Edge
Firefox
Safari
Chrome Android
Safari iOS
css.types.color.rgb
1
12
1
1
18
1
CSS type
rgb.alpha parameter

Alpha parameter
65
79
52
12.1
65
12.2
rgb.float values

Float values in parameters
66
79
52
12.1
66
12.2
rgb.mixed type parameters

Mix `<percentage>` and `<number>` in parameters
122
122
113
18
122
18
rgb.space separated parameters

Space-separated rgb() parameters
65
79
52
12.1
65
12.2
rgb hexadecimal notation

The CSS data type is a notation for describing the hexadecimal color syntax of an sRGB color using its primary color components (red, green, blue) written as hexadecimal numbers, as well as its transparency.
1
12
1
1
18
1
rgb hexadecimal notation.alpha hexadecimal notation

RGBA hexadecimal notation (`#RRGGBBAA`, `#RGBA`)
62
79
49
10
62
9.3
1+Supported (version) Not supported ※Has note Sub-feature descriptions sourced from MDN Web Docs (CC BY-SA 2.5)

Syntax

CSS 
.element {
  color: rgb(255 99 71);
  background: rgba(0, 0, 0, 0.5);
  border-color: #3498db;
}

Live demo

Rgb() configtext

CSS Rgb() configtext demo.

PreviewFullscreen

Rgba() opacity

CSS Rgba() opacity demo.

PreviewFullscreen

16numbernotation

CSS 16numbernotation demo.

PreviewFullscreen

Use cases

  • Direct color specification

    Define precise interface colors or generated values from design tooling and code utilities.

  • Transparent overlays

    Use alpha-enabled rgb values for shadows, overlays, and layered interface surfaces.

Cautions

  • Raw channel values can be harder to reason about semantically than named tokens or HSL-like systems.
  • Precision alone does not ensure accessible color pairings.

Accessibility

  • Even when color values come directly from design tools, validate contrast in the actual component context.

Related links