diff --git a/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts b/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts
index 7703f631b..39629054c 100644
--- a/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts
+++ b/src/components/side_panel/conditional_formatting/cf_editor/cf_editor.ts
@@ -563,6 +563,10 @@ export class ConditionalFormattingEditor extends Component<Props, SpreadsheetChi
   }
 
   updateDataBarColor(color: Color) {
+    if (!isColorValid(color)) {
+      return;
+    }
+
     this.state.rules.dataBar.color = Number.parseInt(color.substr(1), 16);
   }
 
diff --git a/src/components/side_panel/conditional_formatting/cf_editor/data_bar_rule_editor.xml b/src/components/side_panel/conditional_formatting/cf_editor/data_bar_rule_editor.xml
index 95c63e3c9..471761cfc 100644
--- a/src/components/side_panel/conditional_formatting/cf_editor/data_bar_rule_editor.xml
+++ b/src/components/side_panel/conditional_formatting/cf_editor/data_bar_rule_editor.xml
@@ -5,6 +5,7 @@
       <RoundColorPicker
         currentColor="colorNumberString(rule.color)"
         onColorPicked.bind="updateDataBarColor"
+        disableNoColor="true"
       />
       <div class="o-section-subtitle">Range of values</div>
       <SelectionInput