diff --git a/nuxt4/app/composables/useColorCustomization.ts b/nuxt4/app/composables/useColorCustomization.ts
index ac03c0b..14060ab 100644
--- a/nuxt4/app/composables/useColorCustomization.ts
+++ b/nuxt4/app/composables/useColorCustomization.ts
@@ -75,6 +75,42 @@ function generateColorPalette(baseColor: string): Record<string, string> {
   return palette
 }
 
+/**
+ * Convierte HSL a HEX
+ */
+function hslToHex(h: number, s: number, l: number): string {
+  const sDecimal = s / 100
+  const lDecimal = l / 100
+
+  const c = (1 - Math.abs(2 * lDecimal - 1)) * sDecimal
+  const x = c * (1 - Math.abs((h / 60) % 2 - 1))
+  const m = lDecimal - c / 2
+  let r = 0
+  let g = 0
+  let b = 0
+
+  if (h >= 0 && h < 60) {
+    r = c; g = x; b = 0
+  } else if (h >= 60 && h < 120) {
+    r = x; g = c; b = 0
+  } else if (h >= 120 && h < 180) {
+    r = 0; g = c; b = x
+  } else if (h >= 180 && h < 240) {
+    r = 0; g = x; b = c
+  } else if (h >= 240 && h < 300) {
+    r = x; g = 0; b = c
+  } else if (h >= 300 && h < 360) {
+    r = c; g = 0; b = x
+  }
+
+  const toHex = (value: number) => {
+    const hex = Math.round((value + m) * 255).toString(16)
+    return hex.length === 1 ? '0' + hex : hex
+  }
+
+  return `#${toHex(r)}${toHex(g)}${toHex(b)}`
+}
+
 /**
  * Aplica el color personalizado a las variables CSS
  */
@@ -82,24 +118,25 @@ function applyCustomColor(color: string, isDark: boolean) {
   if (import.meta.server) return
 
   const hsl = hexToHSL(color)
+
+  // Aplicar color principal en formato HEX
+  document.documentElement.style.setProperty('--cata-primary', color)
+
+  // Generar variantes light y dark
+  const lightHsl = { ...hsl, l: Math.min(hsl.l + 15, 95) }
+  const darkHsl = { ...hsl, l: Math.max(hsl.l - 15, 10) }
+
+  const lightColor = hslToHex(lightHsl.h, lightHsl.s, lightHsl.l)
+  const darkColor = hslToHex(darkHsl.h, darkHsl.s, darkHsl.l)
+
+  document.documentElement.style.setProperty('--cata-primary-light', lightColor)
+  document.documentElement.style.setProperty('--cata-primary-dark', darkColor)
+
+  // Aplicar paleta completa para Nuxt UI (en formato HSL)
   const palette = generateColorPalette(color)
-
-  // Aplicar color principal
-  document.documentElement.style.setProperty('--cata-primary', `${hsl.h} ${hsl.s}% ${hsl.l}%`)
-
-  // Aplicar paleta completa
   Object.entries(palette).forEach(([key, value]) => {
     document.documentElement.style.setProperty(`--color-primary-${key}`, value)
   })
-
-  // Ajustar border y otros colores derivados según el modo
-  if (isDark) {
-    document.documentElement.style.setProperty('--cata-border', `${hsl.h} 100% 40%`)
-    document.documentElement.style.setProperty('--cata-muted', `${hsl.h} 80% 30%`)
-  } else {
-    document.documentElement.style.setProperty('--cata-border', `${hsl.h} 50% 70%`)
-    document.documentElement.style.setProperty('--cata-muted', `${hsl.h} 30% 40%`)
-  }
 }
 
 /**
@@ -173,7 +210,16 @@ export const useColorCustomization = () => {
     const theme = isDark.value ? 'dark' : 'light'
     customColors.value[theme] = null
     saveCustomColors()
-    applyCustomColor(DEFAULT_COLORS[theme], isDark.value)
+
+    // Limpiar las variables CSS personalizadas para que vuelvan a los valores del CSS
+    document.documentElement.style.removeProperty('--cata-primary')
+    document.documentElement.style.removeProperty('--cata-primary-light')
+    document.documentElement.style.removeProperty('--cata-primary-dark')
+
+    // Limpiar paleta de Nuxt UI
+    for (let i = 50; i <= 950; i += (i < 100 ? 50 : 100)) {
+      document.documentElement.style.removeProperty(`--color-primary-${i}`)
+    }
   }
 
   /**
@@ -200,16 +246,19 @@ export const useColorCustomization = () => {
 
     loadCustomColors()
 
-    // Aplicar el color personalizado si existe
+    // Solo aplicar colores si hay colores personalizados guardados
     const theme = isDark.value ? 'dark' : 'light'
-    const color = customColors.value[theme] || DEFAULT_COLORS[theme]
-    applyCustomColor(color, isDark.value)
+    if (customColors.value[theme]) {
+      applyCustomColor(customColors.value[theme], isDark.value)
+    }
 
     // Observar cambios en el modo de color
     watch(isDark, (newIsDark) => {
       const theme = newIsDark ? 'dark' : 'light'
-      const color = customColors.value[theme] || DEFAULT_COLORS[theme]
-      applyCustomColor(color, newIsDark)
+      // Solo aplicar si hay color personalizado para este tema
+      if (customColors.value[theme]) {
+        applyCustomColor(customColors.value[theme], newIsDark)
+      }
     })
   }