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.

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!

Want to become a better Frontend Developer?

Don’t worry about where to start. I’ll send you a library of articles frontend developers have found useful!

  • 60+ CSS articles
  • 90+ JavaScript articles

I’ll also send you one article every week to help you improve your FED skills crazy fast!