diff --git a/src/components/color_picker/color_picker.ts b/src/components/color_picker/color_picker.ts
index 8bf5ed201a..8b52429113 100644
--- a/src/components/color_picker/color_picker.ts
+++ b/src/components/color_picker/color_picker.ts
@@ -195,6 +195,7 @@ export interface ColorPickerProps {
   dropdownDirection?: "left" | "right" | "center";
   onColorPicked: (color: Color) => void;
   currentColor: Color;
+  disableNoColor?: boolean;
 }
 
 interface State {
diff --git a/src/components/color_picker/color_picker.xml b/src/components/color_picker/color_picker.xml
index 5d3c820c13..e61560482d 100644
--- a/src/components/color_picker/color_picker.xml
+++ b/src/components/color_picker/color_picker.xml
@@ -72,10 +72,12 @@
           <button class="o-add-button" t-on-click="setCustomColor">Add</button>
         </div>
       </div>
-      <div class="o-separator"/>
-      <div class="o-buttons">
-        <button t-on-click="resetColor" class="o-cancel">Reset</button>
-      </div>
+      <t t-if="!props.disableNoColor">
+        <div class="o-separator"/>
+        <div class="o-buttons">
+          <button t-on-click="resetColor" class="o-cancel">Reset</button>
+        </div>
+      </t>
     </div>
   </t>
 </templates>
diff --git a/src/components/side_panel/conditional_formatting/color_scale_rule_editor.xml b/src/components/side_panel/conditional_formatting/color_scale_rule_editor.xml
index 5b782d2fa1..b331ff5a6b 100644
--- a/src/components/side_panel/conditional_formatting/color_scale_rule_editor.xml
+++ b/src/components/side_panel/conditional_formatting/color_scale_rule_editor.xml
@@ -49,6 +49,7 @@
             dropdownDirection="'left'"
             onColorPicked="(color) => this.setColorScaleColor(thresholdType, color)"
             currentColor="getThresholdColor(threshold)"
+            disableNoColor="true"
           />
         </div>
       </div>
diff --git a/src/components/side_panel/conditional_formatting/conditional_formatting.ts b/src/components/side_panel/conditional_formatting/conditional_formatting.ts
index edd3e606cb..3b318ccf1c 100644
--- a/src/components/side_panel/conditional_formatting/conditional_formatting.ts
+++ b/src/components/side_panel/conditional_formatting/conditional_formatting.ts
@@ -1,6 +1,6 @@
 import { Component, onWillUpdateProps, useExternalListener, useState } from "@odoo/owl";
 import { DEFAULT_COLOR_SCALE_MIDPOINT_COLOR } from "../../../constants";
-import { colorNumberString, rangeReference } from "../../../helpers/index";
+import { colorNumberString, isColorValid, rangeReference } from "../../../helpers/index";
 import { _t } from "../../../translation";
 import {
   CancelledReason,
@@ -670,6 +670,10 @@ export class ConditionalFormattingPanel extends Component<Props, SpreadsheetChil
   }
 
   setColorScaleColor(target: string, color: Color) {
+    if (!isColorValid(color)) {
+      return;
+    }
+
     const point = this.state.rules.colorScale[target];
     if (point) {
       point.color = Number.parseInt(color.substr(1), 16);
diff --git a/tests/components/color_picker.test.ts b/tests/components/color_picker.test.ts
index e1cbf3c831..d5af16f18e 100644
--- a/tests/components/color_picker.test.ts
+++ b/tests/components/color_picker.test.ts
@@ -17,6 +17,7 @@ async function mountColorPicker(partialProps: Partial<ColorPickerProps> = {}, mo
     onColorPicked: partialProps.onColorPicked || (() => {}),
     currentColor: partialProps.currentColor || "#000000",
     maxHeight: partialProps.maxHeight !== undefined ? partialProps.maxHeight : 1000,
+    disableNoColor: partialProps.disableNoColor || false,
   };
   ({ fixture } = await mountComponent(ColorPicker, { model, props }));
 }
@@ -165,4 +166,9 @@ describe("Color Picker buttons", () => {
     const picker = fixture.querySelector<HTMLElement>(".o-color-picker")!;
     expect(picker.style["display"]).toEqual("none");
   });
+
+  test("Hides the 'No Color' button when disableNoColor prop is set to true", async () => {
+    await mountColorPicker({ disableNoColor: true });
+    expect(fixture.querySelector(".o-buttons .o-cancel")).toBeNull();
+  });
 });
diff --git a/tests/components/conditional_formatting.test.ts b/tests/components/conditional_formatting.test.ts
index 51afee669b..0d3af35637 100644
--- a/tests/components/conditional_formatting.test.ts
+++ b/tests/components/conditional_formatting.test.ts
@@ -9,7 +9,11 @@ import {
   paste,
   setSelection,
 } from "../test_helpers/commands_helpers";
-import { setInputValueAndTrigger, triggerMouseEvent } from "../test_helpers/dom_helper";
+import {
+  setInputValueAndTrigger,
+  simulateClick,
+  triggerMouseEvent,
+} from "../test_helpers/dom_helper";
 import {
   createColorScale,
   createEqualCF,
@@ -1123,6 +1127,14 @@ describe("UI of conditional formats", () => {
     expect(errorMessages()).toEqual(["Invalid Maxpoint formula"]);
   });
 
+  test("Hides the 'No Color' button when the color picker is opened for the color scale", async () => {
+    await simulateClick(selectors.buttonAdd);
+    await simulateClick(document.querySelectorAll(selectors.cfTabSelector)[1]);
+    await simulateClick(selectors.colorScaleEditor.minColor);
+
+    expect(fixture.querySelector(".o-buttons .o-cancel")).toBeNull();
+  });
+
   describe("Icon set CF", () => {
     test("can select the Icon set tab", async () => {
       triggerMouseEvent(selectors.buttonAdd, "click");