diff --git a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx
index 004a8c40161..1f0efae6ce2 100644
--- a/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx
+++ b/packages/grafana-ui/src/components/ThresholdsEditorNew/ThresholdsEditor.tsx
@@ -59,7 +59,11 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
       nextValue = steps[steps.length - 1].value + 10;
     }
 
-    const color = colors.filter((c) => !steps.some((t) => t.color === c))[1];
+    let color = colors.filter((c) => !steps.some((t) => t.color === c))[1];
+    if (!color) {
+      // Default color when all colors are used
+      color = '#CCCCCC';
+    }
 
     const add = {
       value: nextValue,
@@ -154,15 +158,13 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
           value={'Base'}
           disabled
           prefix={
-            threshold.color && (
-              <div className={styles.colorPicker}>
-                <ColorPicker
-                  color={threshold.color}
-                  onChange={(color) => this.onChangeThresholdColor(threshold, color)}
-                  enableNamedColors={true}
-                />
-              </div>
-            )
+            <div className={styles.colorPicker}>
+              <ColorPicker
+                color={threshold.color}
+                onChange={(color) => this.onChangeThresholdColor(threshold, color)}
+                enableNamedColors={true}
+              />
+            </div>
           }
         />
       );
@@ -179,15 +181,13 @@ export class ThresholdsEditor extends PureComponent<Props, State> {
         onBlur={this.onBlur}
         prefix={
           <div className={styles.inputPrefix}>
-            {threshold.color && (
-              <div className={styles.colorPicker}>
-                <ColorPicker
-                  color={threshold.color}
-                  onChange={(color) => this.onChangeThresholdColor(threshold, color)}
-                  enableNamedColors={true}
-                />
-              </div>
-            )}
+            <div className={styles.colorPicker}>
+              <ColorPicker
+                color={threshold.color}
+                onChange={(color) => this.onChangeThresholdColor(threshold, color)}
+                enableNamedColors={true}
+              />
+            </div>
             {isPercent && <div className={styles.percentIcon}>%</div>}
           </div>
         }