New CSS Color syntax — rgb instead of rgba

If you want to support transparency in a CSS rgb or hsl function, there’s no need to write rgba or hsla anymore. You can simply write rgb or hsl with a / to indicate the alpha.

No need for commas too!

Here’s an example.

.rgb {
  rgb(59 50 103 / 0.3)
}

.hsl {
  color: hsl(250 35% 30% / 0.3);
}

Adam Argyle’s tweet explains this better than I can.

rgb() ⇒ rgba() just to add transparency? 🤢
hsl() ⇒ hsla() … 😭

GOOD NEWS!
fixed in CSS color-level-4,
rgb() & hsl() accept a 4th parameter 🎉

color demohttps://t.co/6uMtGvVbUY

color level 4 docshttps://t.co/T1PSfA6boS

🔥 tips
- try in your fav browser!
- drop comma’s! pic.twitter.com/xjc3DrPG0A

— Adam Argyle (@argyleink) January 17, 2020

Here’s the good news: This is supported across all major browsers — so you can use it in production today!

You can also use this if you’re a Sass user — Dart Sass supports this syntax too, but it converts the function into a regular rgba underneath the hood.

// What you write
.selector {
  color: hsl(250 35% 30% / 0.3);
}

// Compiled CSS
.selector {
  color: rgba(59, 50, 103, 0.3);
}

That’s it!