diff --git a/packages/jaeger-ui-components/src/utils/color-generator.test.js b/packages/jaeger-ui-components/src/utils/color-generator.test.js
index 894dd69ab81..4281b91ff5e 100644
--- a/packages/jaeger-ui-components/src/utils/color-generator.test.js
+++ b/packages/jaeger-ui-components/src/utils/color-generator.test.js
@@ -37,3 +37,13 @@ it('should clear cache', () => {
   const colorTwo = getColorByKey('serviceB', createTheme());
   expect(colorOne).toBe(colorTwo);
 });
+
+it('should not allow red', () => {
+  clear();
+  getColorByKey('serviceA', createTheme());
+  getColorByKey('serviceB', createTheme());
+  getColorByKey('serviceC', createTheme());
+  getColorByKey('serviceD', createTheme());
+  const colorFive = getColorByKey('serviceE', createTheme());
+  expect(colorFive).not.toBe('#E24D42');
+});
diff --git a/packages/jaeger-ui-components/src/utils/color-generator.tsx b/packages/jaeger-ui-components/src/utils/color-generator.tsx
index aa5bc87dfd6..6e6a0627ed6 100644
--- a/packages/jaeger-ui-components/src/utils/color-generator.tsx
+++ b/packages/jaeger-ui-components/src/utils/color-generator.tsx
@@ -44,9 +44,10 @@ class ColorGenerator {
   _getColorIndex(key: string): number {
     let i = this.cache.get(key);
     if (i == null) {
-      i = this.currentIdx;
-      this.cache.set(key, this.currentIdx);
-      this.currentIdx = ++this.currentIdx % this.colorsHex.length;
+      // colors[4] is red (which we want to disallow as a span color because it looks like an error)
+      i = this.currentIdx !== 4 ? this.currentIdx : this.currentIdx + 1;
+      this.cache.set(key, i);
+      this.currentIdx = (i + 1) % this.colorsHex.length;
     }
     return i;
   }