diff --git a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
index 84963611e..e101164ed 100644
--- a/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
+++ b/nezha-fronted/src/components/common/ChartDiagram/diagram.vue
@@ -808,7 +808,7 @@ export default {
         // data = JSON.parse(localStorage.getItem('topoData'))
         if (!res.data.topo || !data.pens) {
           data = {
-            bkColor: '#FFFFFF',
+            bkColor: '#FFFFFF00',
             gridSize: 10,
             gridColor: '#ededed',
             lineWidth: 1,
@@ -887,6 +887,9 @@ export default {
             if (!data.bkImage) {
               data.bkImage = undefined
             }
+            if (data.bkColor === '#FFFFFF') {
+              data.bkColor = '#FFFFFF00'
+            }
             resolve(data)
           }, 100)
         }
diff --git a/nezha-fronted/src/components/common/nezhaColor.vue b/nezha-fronted/src/components/common/nezhaColor.vue
index 0649bb244..72d68c252 100644
--- a/nezha-fronted/src/components/common/nezhaColor.vue
+++ b/nezha-fronted/src/components/common/nezhaColor.vue
@@ -21,7 +21,7 @@
       <el-row v-if="!single" class="color-tab">
         <div v-for="item in valueArr" :key="item.key" :class="[keyName==item.name?'color-active':'']" @click="colorTabChange(item)">{{item.name}}</div>
       </el-row>
-      <sketch v-model="colors" :disableAlpha="true" @input="updateValue" :presetColors="presetColors"/>
+      <sketch v-model="colors" :disableAlpha="disableAlpha" @input="updateValue" :presetColors="presetColors"/>
     </div>
   </span>
 </template>
@@ -67,6 +67,10 @@ export default {
           '#7C2EA3', '#8F3BB8', '#B877D9'
         ]
       }
+    },
+    disableAlpha: {
+      type: Boolean,
+      default: false
     }
   },
   watch: {},
@@ -89,7 +93,12 @@ export default {
   methods: {
     updateValue (color) {
       this.colors = color.hex
-      this.$emit('colorChange', color.hex, this.keyName)
+      if (!this.disableAlpha) {
+        this.colors = color.hex8
+        this.$emit('colorChange', color.hex8, this.keyName)
+      } else {
+        this.$emit('colorChange', color.hex, this.keyName)
+      }
     },
     changeColor () {
       this.showColorPicker = !this.showColorPicker
diff --git a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
index e224034d0..8a7d093a6 100644
--- a/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
+++ b/nezha-fronted/src/components/common/project/L5/CanvasProps.vue
@@ -1709,7 +1709,7 @@ export default {
         return ''
       }
       ;
-      if (color.length <= 7) {
+      if (color.indexOf('#') === 0) {
         return color
       }
       const rgb = color.split(',')
diff --git a/nezha-fronted/src/components/common/project/topologyL5.vue b/nezha-fronted/src/components/common/project/topologyL5.vue
index e4418d428..bd08cf041 100644
--- a/nezha-fronted/src/components/common/project/topologyL5.vue
+++ b/nezha-fronted/src/components/common/project/topologyL5.vue
@@ -805,7 +805,7 @@ export default {
           // data = JSON.parse(localStorage.getItem('topoData'))
           if (!res.data.topo || !data.pens) {
             data = {
-              bkColor: '#FFFFFF',
+              bkColor: '#FFFFFF00',
               gridSize: 10,
               gridColor: '#ededed',
               lineWidth: 1,
@@ -886,6 +886,9 @@ export default {
               if (!data.bkImage) {
                 data.bkImage = undefined
               }
+              if (data.bkColor === '#FFFFFF') {
+                data.bkColor = '#FFFFFF00'
+              }
               Promise.all(promiseArr).then(res => {
                 res.forEach((response, index) => {
                   const item = data.pens[index]