RGB
rgb() defines colors through red, green, and blue channels, with optional alpha transparency. It is widely used and easy to integrate with browser tools and generated values.
Overview
rgb() defines colors through red, green, and blue channels, with optional alpha transparency. It is widely used and easy to integrate with browser tools and generated values.
Browser support
| Feature | Desktop | Mobile | ||||
|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Chrome Android | Safari iOS | |
| 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 |
| 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 |
Syntax
.element {
color: rgb(255 99 71);
background: rgba(0, 0, 0, 0.5);
border-color: #3498db;
}Live demo
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
Powered by web-features