Using variables on Angular animations

Question

I want to make the animations to use a variable from the component and not hardcoding the hex color. How can I do it? I need to mention that I really need this because in future I want to create randomly colors so I need to get this colors from a variable. This is my code:

@Component({
  selector: 'app-demo',
  templateUrl: './demo.component.html',
  styleUrls: ['./demo.component.css'],
  animations: [
    trigger('heroState', [
      state('inactive', style({
        backgroundColor: '#eee'
        // transform: 'scale(1)'
      })),
      state('active',   style({
        backgroundColor: '#ff0000'
        // something like this
        // backgroundColor: this.color;
        // transform: 'scale(1.1)'
      })),
      transition('inactive => active', animate('100ms ease-in')),
      transition('active => inactive', animate('1000ms ease-out'))
    ])
  ]
})
export class DemoComponent implements OnInit {

  color:string = "#ff0000";

  inactive: boolean = false;

  constructor() { }

  ngOnInit() {
  }

  get stateName() {
    return this.inactive ? 'inactive' : 'active';
  }

  toggle() {
    this.inactive = !this.inactive;
  }
}