CSS Function
rgb()
The rgb() function defines colors using Red, Green, and Blue channel values. Modern syntax also accepts an optional alpha parameter.
Syntax
rgb(R G B / alpha)Parameters
| Name | Type | Required | Description |
|---|---|---|---|
| R | number | percentage | Yes | Red channel, 0-255 or 0%-100% |
| G | number | percentage | Yes | Green channel, 0-255 or 0%-100% |
| B | number | percentage | Yes | Blue channel, 0-255 or 0%-100% |
| alpha | number | percentage | No | Opacity, from 0 to 1 or 0% to 100% |
Examples
Tailwind blue-500
Modern space-separated syntax.
css
color: rgb(59 130 246);With alpha transparency
50% transparent blue.
css
background: rgb(59 130 246 / 0.5);Legacy comma syntax
Older comma-separated format, still valid.
css
color: rgb(59, 130, 246);Browser Support
✓
Chrome
v1++
✓
Firefox
v1++
✓
Safari
v1++
✓
Edge
v12++
✓
Opera
v3.5++
Tailwind Equivalent
You can achieve similar results in Tailwind CSS using the following utility classes:
All Tailwind colors map to RGB. Use bg-blue-500 or arbitrary: bg-[rgb(59_130_246)]Frequently Asked Questions
Is rgba() still needed?▼
No. Modern rgb() accepts a fourth alpha parameter with the / separator. rgba() is now an alias for rgb() in the spec.
Should I use commas or spaces?▼
The modern space-separated syntax is recommended. Commas still work but cannot be mixed with the / alpha syntax.
Explore CSS Color Tools
Try our free tools to work with rgb() and other CSS color functions.
Open Tools