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: 
add this css in your `style.css/style.scss` 

**[Stackblitz](https://stackblitz.com/edit/angular-6-material-hues-and-how-to-change-the-color-of-mat-radi?file=styles.css)**

**style.css/style.scss**

```
.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{
  color:rgb(66, 134, 244);
  background-color:rgb(66, 134, 244) ;
}

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

```
```
::ng-deep .mat-radio-button.mat-accent .mat-radio-ripple .mat-ripple-element {
  background-color: blue !important;
}

::ng-deep .mat-radio-button.mat-accent .mat-radio-inner-circle {
  background-color: blue!important;   /*inner circle color change*/
}

::ng-deep.mat-radio-button.mat-accent.mat-radio-checked .mat-radio-outer-circle {
 border-color:blue!important; /*outer ring color change*/
}

```