diff --git a/frontend/src/metabase/components/form/widgets/FormColorWidget.jsx b/frontend/src/metabase/components/form/widgets/FormColorWidget.jsx
index 91d93194dded04c016bdaa41a18120c6f8cd13bf..5c8cd379214dc97f11db7b7b3b5bdb69479755ab 100644
--- a/frontend/src/metabase/components/form/widgets/FormColorWidget.jsx
+++ b/frontend/src/metabase/components/form/widgets/FormColorWidget.jsx
@@ -3,9 +3,15 @@ import React from "react";
 import ColorPicker from "metabase/components/ColorPicker";
 import cx from "classnames";
 
-const FormColorWidget = ({ field, offset }) => (
+const FormColorWidget = ({ field, offset, initial }) => (
   <div className={cx({ "Form-offset": offset })}>
-    <ColorPicker {...field} />
+    <ColorPicker
+      {...field}
+      value={
+        // if the field has a value use that, otherwise use the initial
+        field.value || initial()
+      }
+    />
   </div>
 );