RGB
Tags: css, html
Published: 2020-03-18 16:34:12

---
title: RGB
published: true
description: There is much more to CSS colors than RGB, HEX, and HSL... let's see the status of CSS colors in 2020. Step 1: RGB
tags: CSS, HTML
cover_image: https://dev-to-uploads.s3.amazonaws.com/i/f5vqq3uckm57x5t9pov8.png
series: Ultimate Guide to CSS Colors (2020 Edition)
---

**RGB stands for Red-Green-Blue**. It is a format in which the developer provides values for red, green, and blue separately, and that can have an optional alpha argument to indicate alpha/opacity (thus RGBA).

Traditionally, the `rgb` and `rgba` color functions had all the arguments separated by commas (e.g. `rgb(255, 0, 0)`); but that notation is now considered legacy, and moving forwards all **the color functions will have arguments separated by spaces and the alpha by a forward slash (`/`)**:

![RGB syntax: red as a number 0-255 or percentage, space, green as a number 0-255 or percentage, space, blue as a number 0-255 or percentage, and optionally, forward slash alpha as a number 0-1 or percentage](https://dev-to-uploads.s3.amazonaws.com/i/1vd5752xjf3e8cb06t6g.png)

```scss
/* old notation */
color: rgb(255, 255, 255);
color: rgba(255, 255, 255, 1);

/* new notation */
color: rgb(255 255 255);
color: rgb(255 255 255 / 1);
```

Another change is the consolidation of `rgb` and `rgba` into a single function (`rgb`) that will take the four arguments: the three colors and an optional alpha. The function **`rgba` will remain but as legacy**.

The color values can be a number from 0 to 255, or a percentage from 0% and 100% (both included). While the alpha value can be represented as a float number from 0.0 to 1.0, or as a percentage from 0% to 100%.

> One important thing to take into account: you can use numbers or percentages but not combine them in the same `rgb`/`rgba` function. 
This may seem obvious, but there is an edge case that may not be so obvious: the zero. The unit can be omitted in other properties if the value is 0, but that's not the case for the color functions: `rgb(0%, 100%, 100%)` is a valid color, while `rgb(0, 100%, 100%)` will fail.


Taking into consideration the old and new notations, `rgb` now supporting alpha, `rgba` kept as legacy, and the different number/percentage formats that can be used, there are 24 different ways of representing the same color in RGB:

```scss
/* cyan/aqua color */
color: rgb(0, 255, 255);
color: rgb(0, 255, 255, 1);
color: rgb(0, 255, 255, 100%);
color: rgb(0%, 100%, 100%);
color: rgb(0%, 100%, 100%, 1);
color: rgb(0%, 100%, 100%, 100%);
color: rgb(0 255 255);
color: rgb(0 255 255 / 1);
color: rgb(0 255 255 / 100%);
color: rgb(0% 100% 100%);
color: rgb(0% 100% 100% / 1);
color: rgb(0% 100% 100% / 100%);
color: rgba(0, 255, 255);
color: rgba(0%, 100%, 100%);
color: rgba(0%, 100%, 100%, 1);
color: rgba(0%, 100%, 100%, 100%);
color: rgba(0, 255, 255, 1);
color: rgba(0, 255, 255, 100%);
color: rgba(0 255 255);
color: rgba(0 255 255 / 1);
color: rgba(0 255 255 / 100%);
color: rgba(0% 100% 100%);
color: rgba(0% 100% 100% / 1);
color: rgba(0% 100% 100% / 100%);
```

All the browsers that were tested for this article supported all the notations of RGB and RGBA listed above... Except for Edge on Windows that only supported the comma-separated notation, `rgb` with 3 arguments and `rgba` with 4 arguments (the "classic" notation).