diff --git a/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js b/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js
index 61a48946f..0a9f9a24c 100644
--- a/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js
+++ b/packages/fineui/src/case/colorchooser/colorchooser.popup.hex.js
@@ -22,7 +22,13 @@ import { Label, Combo, TextItem } from "@/base";
 import { PopupPanel } from "../layer";
 import { CustomColorChooser } from "./colorchooser.custom";
 import { ColorChooserPopup } from "./colorchooser.popup";
-import { ColorPickerEditor, ColorPicker, HexColorPicker } from "./colorpicker";
+import {
+    ColorPickerEditor,
+    ColorPicker,
+    HexColorPicker,
+    SimpleHexColorPickerEditor,
+    HexColorPickerEditor
+} from "./colorpicker";
 
 /**
  * @author windy
@@ -59,8 +65,8 @@ export class HexColorChooserPopup extends Widget {
                                 extend(
                                     {
                                         type: o.simple
-                                            ? "bi.simple_hex_color_picker_editor"
-                                            : "bi.hex_color_picker_editor",
+                                            ? SimpleHexColorPickerEditor.xtype
+                                            : HexColorPickerEditor.xtype,
                                         value: o.value,
                                         height: o.simple ? 36 : 70,
                                         listeners: [
diff --git a/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js b/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
index f512888be..25ffb0a2a 100644
--- a/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
+++ b/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.js
@@ -39,7 +39,7 @@ export class HexColorPickerEditor extends Widget {
     static EVENT_CHANGE = "EVENT_CHANGE";
 
     props = {
-        baseCls: "bi-color-picker-editor",
+        baseCls: "bi-color-picker-editor bi-hex-color-picker-editor",
         height: 30,
     };
 
diff --git a/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js b/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
index 3c13b1aba..14386afac 100644
--- a/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
+++ b/packages/fineui/src/case/colorchooser/colorpicker/editor.colorpicker.hex.simple.js
@@ -23,7 +23,8 @@ import { TextEditor } from "@/widget/editor/editor.text";
 
 const RGB_WIDTH = 32,
     HEX_WIDTH = 70,
-    HEX_PREFIX_POSITION = 1;
+    HEX_PREFIX_POSITION = 1,
+    DEFAULT_HEX = "ffffff";
 
 /**
  * @author windy
@@ -37,7 +38,7 @@ export class SimpleHexColorPickerEditor extends Widget {
     static EVENT_CHANGE = "EVENT_CHANGE";
 
     props = {
-        baseCls: "bi-color-picker-editor",
+        baseCls: "bi-color-picker-editor bi-simple-hex-color-picker-editor",
         height: 36,
     };
 
@@ -112,6 +113,7 @@ export class SimpleHexColorPickerEditor extends Widget {
                                 errorText: i18nText("BI-Color_Picker_Error_Text_Hex"),
                                 width: HEX_WIDTH,
                                 height: 24,
+                                value: DEFAULT_HEX,
                                 listeners: [
                                     {
                                         eventName: "EVENT_CHANGE",