Question: How can I change the color of the using CSS? 

Saw on another post that if I use the following code, it would change it, but I had no luck with it so far. 

```
.mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
    background-color:rgb(255, 37, 37);
  }

.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
    border-color: rgb(66, 134, 244);
}

.mat-radio-button.mat-accent .mat-radio-inner-circle {
    background-color: rgb(66, 134, 244);
}

```

Also, how could I use the rest of the color hues? 

```
<mat-radio-button color="accent">Hello, World</mat-radio-button>

```

Let's say that I want to use from the Accent color, the hue of 300 or A100, how would I go about to doing that? 

I've tried using `accent-100` and `accent hue-100` but, it doesn't work

Answer: 
You can set custom color using following approach: 

Put this code in your module declaration:

```
providers: [{
    provide: MAT_RADIO_DEFAULT_OPTIONS,
    useValue: { color: 'accent' },
}]

```
I'm on ng 13.1.2 and adding color attribute to my mat-radio-buttion worked for me

```
<mat-radio-button color="primary" style="..." class="..." value="..." (change)="...">
      RADIO LABEL
</mat-radio-button>

```