Angular Change the color of each badge of different column to a different color

Question

I want to be able to color each badge with a different color example red, green blue and etc. I want to specify what the color of each column should be. How can I change the background color of the badge, or the color of the text of the badge?

 .nav-item {

        .nav-link {
            text-decoration: none !important;
            display: flex;
            align-items: center;
            height: 48px;
            padding: 0 24px;
            position: relative;
            overflow: hidden;   //this is the scss code for the nav badge
            cursor: pointer;
            user-select: none;
            color: currentColor;

            > .nav-link-title {
                flex: 1 1 auto;
                white-space: nowrap;
            }
@media  ( min-width: 576px){
       .nav-link-badge  {
                display: absolute !important;
                align-items: center !important;
                width: 35px;
                height: 35px;
                right: unset !important;
                text-align: center !important;
                padding-top: 50px;
                padding-right: 30px;
                padding-bottom: 50px;
                padding-left: 80px;
                font-size: 11px;
                font-weight: 600;
                border-radius: 20px;
                transition: opacity 0.2s ease-in-out 0.1s;
                margin-left: 8px;
                border-radius: 50%;

                + .collapsable-arrow {
                    margin-left: 8px;
                }
              }
            }

Answer 1

//     var colors = [];
//     colors.currentIndex = -1;
//     colors.getNext = function() {
//         if (this.length > 0) {
//             this.currentIndex += 1;
//             if (this.currentIndex >= this.length) this.currentIndex = 0;
//             return this[this.currentIndex];
//         }