diff --git a/public/app/features/explore/TraceView/components/utils/color-generator.tsx b/public/app/features/explore/TraceView/components/utils/color-generator.tsx
index 8e885b23ade..9a9a2b02f64 100644
--- a/public/app/features/explore/TraceView/components/utils/color-generator.tsx
+++ b/public/app/features/explore/TraceView/components/utils/color-generator.tsx
@@ -33,12 +33,14 @@ class ColorGenerator {
   colorsHex: string[];
   colorsRgb: Array<[number, number, number]>;
   cache: Map<string, number>;
+  prevColorIndex: number | undefined;
 
   constructor(colorsHex: string[], theme: GrafanaTheme2) {
     const filteredColors = getFilteredColors(colorsHex, theme);
     this.colorsHex = filteredColors;
     this.colorsRgb = filteredColors.map(strToRgb);
     this.cache = new Map();
+    this.prevColorIndex = undefined;
   }
 
   _getColorIndex(key: string): number {
@@ -47,15 +49,14 @@ class ColorGenerator {
       const hash = this.hashCode(key.toLowerCase());
       i = Math.abs(hash % this.colorsHex.length);
 
-      const prevCacheItem = Array.from(this.cache).pop();
-      if (prevCacheItem && prevCacheItem[1]) {
+      if (this.prevColorIndex !== undefined) {
         // disallow a color that is the same as the previous color
-        if (prevCacheItem[1] === i) {
+        if (this.prevColorIndex === i) {
           i = this.getNextIndex(i);
         }
 
         // disallow a color that looks very similar to the previous color
-        const prevColor = this.colorsHex[prevCacheItem[1]];
+        const prevColor = this.colorsHex[this.prevColorIndex];
         if (tinycolor.readability(prevColor, this.colorsHex[i]) < 1.5) {
           let newIndex = i;
           for (let j = 0; j < this.colorsHex.length; j++) {
@@ -70,6 +71,7 @@ class ColorGenerator {
       }
 
       this.cache.set(key, i);
+      this.prevColorIndex = i;
     }
     return i;
   }