New CSS Color syntax — rgb instead of rgba

25th Mar 2022

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!

If you enjoyed this article, please support me by sharing this article Twitter or buying me a coffee 😉. If you spot a typo, I’d appreciate if you can correct it on GitHub. Thank you!

Hold on while i sign you up…

🤗
Woohoo! You’re in!
Now, hold on while I redirect you.