I am trying to make a component customizable by having the color as an input. In the end, I want to be able to use the component like this <component-name color="myColor"></component-name>:

To start with, I'm trying to set the css variable using hostbinding, like this:

 @HostBinding('style.--color') myColor: string = '--blue'

:host {
  --blue: #5dbbbb;
  --green: #286e22;

  background-color: var(--color);
}

But the blue never renders. If I inspect the component in chrome, I can see that it has "background-color: --color" When I look at the variable it's defined as --color: --blue

It works fine if I use the hex code directly (@HostBinding('style.--color') myColor: string = '#xxxxxx') instead of the css variable for the color, but I want to avoid that if possible. Any thoughts on what could be wrong? I'm using Angular14.