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: 0.2;

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

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

.div {
  color: rgba(136, 255, 170, 0.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: 0.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, 0.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