diff --git a/src/views/tools/add_background/add_background.vue b/src/views/tools/add_background/add_background.vue
index 03049bc..ab9ab50 100644
--- a/src/views/tools/add_background/add_background.vue
+++ b/src/views/tools/add_background/add_background.vue
@@ -298,11 +298,11 @@ favorite-colors-grid<template>
                     <div 
                       v-if="!backgroundColor" 
                       class="sidebar-color-picker-empty"
-                      @click="backgroundColor = '#FFFFFF'"
+                      @click="triggerColorPicker"
                     >
                     </div>
                     <input
-                      v-else
+                      v-if="backgroundColor"
                       v-model="backgroundColor"
                       type="color"
                       class="sidebar-color-picker"
@@ -450,11 +450,11 @@ favorite-colors-grid<template>
                 <div 
                   v-if="!backgroundColor" 
                   class="sidebar-color-picker-empty"
-                  @click="backgroundColor = '#FFFFFF'"
+                  @click="triggerColorPicker"
                 >
                 </div>
                 <input
-                  v-else
+                  v-if="backgroundColor"
                   v-model="backgroundColor"
                   type="color"
                   class="sidebar-color-picker"
@@ -702,6 +702,43 @@ const removeFavoriteColor = (color: string) => {
   }
 }
 
+// Trigger color picker when clicking on empty checkerboard
+const triggerColorPicker = (event: MouseEvent) => {
+  // Get the position of the checkerboard element
+  const targetElement = event.currentTarget as HTMLElement
+  const rect = targetElement.getBoundingClientRect()
+  
+  // Create a temporary color input at the checkerboard position
+  const tempInput = document.createElement('input')
+  tempInput.type = 'color'
+  tempInput.value = '#FFFFFF'
+  tempInput.style.position = 'fixed'
+  tempInput.style.left = `${rect.left}px`
+  tempInput.style.top = `${rect.top}px`
+  tempInput.style.width = `${rect.width}px`
+  tempInput.style.height = `${rect.height}px`
+  tempInput.style.opacity = '0'
+  tempInput.style.border = 'none'
+  tempInput.style.cursor = 'pointer'
+  
+  document.body.appendChild(tempInput)
+  
+  tempInput.addEventListener('input', (e) => {
+    const target = e.target as HTMLInputElement
+    backgroundColor.value = target.value
+    onColorChange()
+  })
+  
+  tempInput.addEventListener('change', () => {
+    setTimeout(() => {
+      document.body.removeChild(tempInput)
+    }, 100)
+  })
+  
+  // Trigger click to open color picker
+  tempInput.click()
+}
+
 // Fetch Pexels images
 const fetchPexelsImages = async () => {
   // Skip fetching if no API key is configured