How to create a different color for every new chip?

Ionic Framework ionic-v3
1

I have a page, where you can create chips. I want that every chip has a different, random color, taken , from the colors in variables.scss . How can I do this?

<ion-chip color="viewable" class="chip" #chip *ngFor="let tag of tagName">

    <ion-label>{{tag.tag}}</ion-label>
     <button ion-button clear color="dark" (click)="remove(chip)">
       <ion-icon name="close-circle"></ion-icon>
     </button>
       </ion-chip>
   
       <ion-chip color="primary">
       <button ion-button clear color="light" (click)="add(chip)">
         <ion-icon name="add"></ion-icon>
       </button>
       </ion-chip>


    
  remove(chip: Element) {
    chip.remove();

  }

  add(chip: Element) {
    this.tagName.push({"tag":"#men"});

  }
2

You could create a custom interface

interface TagItem {
 tag: string, 
 color: string
 }

<ion-label [color]="tag.color"

You’d just have to figure a way of assigning each TagItem a random string to serve as color. Could easily be done using an array of all scss strings and some javascript