diff --git a/admin-panel/admin/assets/js/component-navbar.js b/admin-panel/admin/assets/js/component-navbar.js
index 05a148dd..919d6c51 100644
--- a/admin-panel/admin/assets/js/component-navbar.js
+++ b/admin-panel/admin/assets/js/component-navbar.js
@@ -11,8 +11,39 @@ window.NavbarComponent = {
 	 */
 	init: function() {
 		console.log('Navbar component initialized');
-		// Aquí van event listeners específicos si se necesitan
-		// Por ejemplo: actualizar preview en tiempo real
+
+		// Actualizar valores hexadecimales de color pickers en tiempo real
+		this.initColorPickers();
+	},
+
+	/**
+	 * Inicializar event listeners para color pickers
+	 */
+	initColorPickers: function() {
+		const colorPickers = [
+			{ input: 'navbarBgColor', display: 'navbarBgColorValue' },
+			{ input: 'navbarTextColor', display: 'navbarTextColorValue' },
+			{ input: 'navbarLinkHoverColor', display: 'navbarLinkHoverColorValue' },
+			{ input: 'navbarLinkHoverBgColor', display: 'navbarLinkHoverBgColorValue' },
+			{ input: 'navbarDropdownBgColor', display: 'navbarDropdownBgColorValue' },
+			{ input: 'navbarDropdownItemColor', display: 'navbarDropdownItemColorValue' },
+			{ input: 'navbarDropdownItemHoverColor', display: 'navbarDropdownItemHoverColorValue' }
+		];
+
+		colorPickers.forEach(function(picker) {
+			const inputEl = document.getElementById(picker.input);
+			const displayEl = document.getElementById(picker.display);
+
+			if (inputEl && displayEl) {
+				// Actualizar cuando cambia el color
+				inputEl.addEventListener('input', function() {
+					displayEl.textContent = inputEl.value.toUpperCase();
+				});
+
+				// Inicializar valor al cargar
+				displayEl.textContent = inputEl.value.toUpperCase();
+			}
+		});
 	},
 
 	/**