RGBA / RGB color syntax in CSS

Question

Today inspecting an element by Google Chrome I noticed that it has a very peculiar syntax for color, note that it is a RGB, but still has a / 20% which seems to me to function as a channel alpha transparency for color. Another detail is that there are no commas , separating the characters.

The "normal" would be

rgba(0, 0, 0, 0.2)

But they use

rgb(0 0 0 / 20%)

What is this pattern of writing color with transparency? Someone has more information, I found nothing about... Or this is a particular thing of the Chrome browser and how would the support of other browsers for this syntax?

div {
  border: 1px solid #000;
  width: 200px;
  height: 70px;
  padding: 5px;
}
.rgba {
  background: rgba(255, 0, 0, 0.5);
}
.rgb {
  background: rgb(255 0 0 / 50%);
}

<div class="rgba">BG: rgba(255, 0, 0, 0.5)</div>
<div class="rgb">BG: rgb(255 0 0 / 50%)</div>

Answer 1

There are several syntaxes for the RGB/RGBA as shown color value documentation:

* Hexadecimal syntax */
#3a30                    /*   0% opaque green */ 
#3A3F                    /* full opaque green */ 
#33aa3300                /*   0% opaque green */ 
#33AA3380                /*  50% opaque green */ 

/* Functional syntax */
rgba(51, 170, 51, .1)    /*  10% opaque green */ 
rgba(51, 170, 51, .4)    /*  40% opaque green */ 
rgba(51, 170, 51, .7)    /*  70% opaque green */ 
rgba(51, 170, 51,  1)    /* full opaque green */ 

/* Whitespace syntax */
rgba(51 170 51 / 0.4)    /*  40% opaque green */ 
rgba(51 170 51 / 40%)    /*  40% opaque green */ 

/* Functional syntax with floats value */
rgba(255, 0, 153.6, 1)
rgba(1e2, .5e1, .5e0, +.25e2%)

This syntax is "Whitespace", i.e., separates the values by space, and the last parameter is opacity:

div {
  border: solid 1px #000;
  display: inline-block;
  height: 100px;
  width: 100%;
  margin: 10px 0
}

.div1 {
  background-color: rgb(51 170 51 / 20%)    /*  20% opacidade */ 
}

.div2 {
  background-color: rgb(51 170 51 / 50%)    /*  50% opacidade */ 
}

.div3 {
  background-color: rgb(51 170 51 / 80%)    /*  80% opacidade */ 
}

<div class="div1"></div>
<div class="div2"></div>
<div class="div3"></div>

It is like multiple units of measure (px, pt, em, etc) or for example style syntax margin:

margin: 0 20px;
margin: 0 12px 3em -2pt;
margin: 0 auto;
etc...

Answer 2

Complementing the @Ricardopunctual response ...

This is a way to simplify the use of rgb or rgba and leave the code in a simpler way. In addition to the rgb, has support for the hsl, color, and some I’ve never even used.

That:

rgb(0, 128, 255)

rgba(0, 128, 255, 0.5)

hsl(198, 38% 50%)

hsla(198, 28%, 50%, 0.5)

Can be written as:

rgb(0 128 255)

rgb(0 128 255 / 50%)

hsl(198deg 28% 50%)

hsl(198deg 28% 50% / 50%)

lab(56.29% -10.93 16.58 / 50%)

lch(56.29% 19.86 236.62 / 50%)

color(sRGB 0 0.50 1 / 50%)

.hsl {
 background-color: hsl(298deg 28% 50% / 50%);
}

<div class="hsl">BG: usando hsl</div>

Regarding support and other matters:

• The browser support is good, except for IE 11.

• If you need support for IE 11, you can:

  • pre-process it using SASS or Postcss;

  • or not to use it.

• Prettier, to clean and format your code, could intervene and convert the syntax. At the moment has this belief about. Make sure your updated version corrects this behavior.

Answer 3

This relatively new syntax, I found an article https://css-tricks.com/no-comma-color-functions-in-css/, where it mentions that the new functions (e.g, lab, lch, and color), will work with the new syntax, however, abandoning the old function would be necessary an update has billions of sites probably, so no browser would abandon the old format.

Then they updated the old function to work with the new format to better standardize its code, and possibly declare colors as variables and use in multiple functions more easily