diff --git a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts
index 2374749cbc..499f857df8 100644
--- a/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts
+++ b/ui-ngx/src/app/shared/components/dialog/color-picker-dialog.component.ts
@@ -67,7 +67,7 @@ export class ColorPickerDialogComponent extends DialogComponent<ColorPickerDialo
   }
 
   cancel(): void {
-    this.dialogRef.close(this.data.color);
+    this.dialogRef.close(null);
   }
 
   select(): void {
diff --git a/ui-ngx/src/app/shared/components/json-form/json-form.component.ts b/ui-ngx/src/app/shared/components/json-form/json-form.component.ts
index fa8b9b3427..cdd3efcd07 100644
--- a/ui-ngx/src/app/shared/components/json-form/json-form.component.ts
+++ b/ui-ngx/src/app/shared/components/json-form/json-form.component.ts
@@ -217,7 +217,7 @@ export class JsonFormComponent implements OnInit, ControlValueAccessor, Validato
                        val: tinycolor.ColorFormats.RGBA,
                        colorSelectedFn: (color: tinycolor.ColorFormats.RGBA) => void) {
     this.dialogs.colorPicker(tinycolor(val).toRgbString()).subscribe((color) => {
-      if (colorSelectedFn) {
+      if (color && colorSelectedFn) {
         colorSelectedFn(tinycolor(color).toRgb());
       }
     });