{

How to Convert Hex color to RGB in Sass| 2 ways examples


Colors in CSS contain Hexa values and RGB and RGBA values.

For example, #fff is a white color Hexa code

RGB(255,255,255) is an RGB color code, that contains red green blue values rgba(255, 170, 255, 0.5) is an RGBA color code that RGB and optional Alpha.

Convert Hexa color code to RGBA color code

There are multiple ways, we can convert to rgba color codes.

  • use rgba() function Sass provides an RGBA function that converts Hexa color to rgba color.
 rgba(hexacolor, alpha)

hexacolor code is a required color code alpha is an optional transparency or opacity or alpha channel

Here is a sass code to convert Hexa color code to RGBA color

$color: #8fa;
$opacity: .2;

.div {
  color: rgba($color, $opacity);
}

Above, Sass is compiled to CSS as given below Output CSS

.div {
     color: rgba(136, 255, 170, .2);
}

If you pass an invalid Hexa code, It throws fatal error: parse error: failed at

 fatal error: parse error: failed at `$color: #kmn;
 (stdin) on line 1

for below invalid color code

 $color: #kmn;
$opacity: .2;

.div {
  color: rgba($color, $opacity);
}
  • use transparentize() function Another way, using the built native function provided by the sass framework. transparentize() is a built-in function that takes Hexa and transparency between 0 and 1.

For example, apply background-color to div

div {
     background-color: transparentize(#fff, .3);
}

Compiled CSS:

div {
     background-color: rgba(255, 255, 255, 0.7);
}

Conclusion

Learn multiple ways to convert hexa color code to rgba in sass and scss examples

THE BEST NEWSLETTER ANYWHERE
Join 6,000 subscribers and get a daily digest of full stack tutorials delivered to your inbox directly.No spam ever. Unsubscribe any time.

Similar Posts
Subscribe
You'll get a notification every time a post gets published here.