how to display different colors on each column of a row using ngClass in agular?

I have 4 rows, each row contains 3 cards.
I am fetching information for these cards from db then rendering them using ngfor in html.
The problem is I want each of card of a row to show different color.

Example:->

ROW 1:
BLUECARD | WHITECARD | REDCARD

ROW 2:
BLUECARD | WHITECARD | REDCARD

as of now I able to do for two colors but how can I make it for 3 colors as I stated in example.

<div *ngFor="let r of rates; let i=index;"> 
  <div class="box" [ngClass]="i % 2 == 0 ? 'BLUECARD' : 'REDCARD'">
   <!-- card contents -->
  </div>
</div>

As you can see I am able to show 2 colors alternatively but how can I show 3 colors instead?