rgb() Color: Red, Green, Blue Channels Explained

## Why it matters

RGB is how screens actually make colour. Every pixel on a monitor is a mix of red, green and blue light at different intensities, so rgb() is the format you reach for when a colour value comes from code, a canvas pixel, or an eyedropper. It is the native language of the screen.

The catch is that per-channel edits feel unpredictable. Change one RGB value and the perceived hue, saturation and lightness all shift at once. That is why designers reach for hsl() or oklch() to make deliberate colour adjustments. RGB is great for getting a colour into CSS; it is frustrating for tweaking it by hand.

## How it works

Each channel (red, green, blue) is specified as a number from 0 to 255, or as a percentage from 0% to 100%. Modern CSS writes them space-separated: rgb(56 189 248). The legacy comma form rgb(56, 189, 248) still works, but space separation is preferred and required for the alpha syntax.

Alpha (opacity) is optional and ranges from 0 (fully transparent) to 1 (fully opaque). It is written with a slash: rgb(56 189 248 / 0.5) is the same colour at 50% opacity. You can use percentages for alpha too: rgb(56 189 248 / 50%).

The keyword rgba() is now just an alias for rgb() with an alpha channel. Browsers treat rgb() and rgba() identically.

## What does not matter

RGB precision is not "better" than hex. #38bdf8 and rgb(56 189 248) are identical 24-bit colours. The only difference is ergonomics: hex is more compact for copying, rgb is slightly more readable if you have the actual numbers. Neither is more accurate.

Also, percentage and numeric channels can be mixed in the same function: rgb(56 100% 248 / 50%) is valid. This flexibility is occasionally useful but can make code harder to scan, so most teams pick one form and stick with it.

## Code example

Hex #38bdf8 (a light cyan) in modern rgb syntax:

/* Modern: space-separated, slash alpha */
.background {
  background-color: rgb(56 189 248 / 0.8);
}

/* Legacy: comma-separated (still valid) */
.background-old {
  background-color: rgba(56, 189, 248, 0.8);
}

/* Percentage channels (valid but less common) */
.background-percent {
  background-color: rgb(22% 74% 97%);
}
Copy

When an eyedropper or a pixel-sampling function returns a colour, it returns it as rgb(). Your page or design tool then converts to hex or another format for storage.

## How Scalpel Color shows it

The Picker displays the current colour in rgb form on its own row. Every colour swatch in the extension has a "Copy as" menu that includes rgb; selecting it copies the space-separated modern form to your clipboard.

---

## Related glossary

See hex-color-code for the compact hex equivalent, hsl-color for a more intuitive format for hand-adjustments, css-color-formats for a comparison of all five CSS colour notations, and eyedropper-tool for how screen pixels become rgb values.