How to create a different color for every new chip?

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">

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

  remove(chip: Element) {


  add(chip: Element) {


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