Turns out the binding of style to a string doesn't work. The solution would be to bind the background of the style.

 <div class="circle" [style.background]="color">

create a function which accept color code and opacity

  RGBA(hexCode, opacity) {
    let hex = hexCode.replace("#", "");

    if (hex.length === 3) {
      hex = `{hex[0]}{hex[1]}{hex[2]}`;
    }

    const r = parseInt(hex.substring(0, 2), 16);
    const g = parseInt(hex.substring(2, 4), 16);
    const b = parseInt(hex.substring(4, 6), 16);

    return `rgba({g},{opacity})`;
  }

and use it in template

<div [ngStyle]="{ 'color': RGBA('#fc7303',.7)}">
  Nilesh Patel
</div>
<div [style.background-color]="RGBA('#fc7303',.8)">
    Nilesh Patel-style
</div>