diff --git a/assets/css/theme-semantic.css b/assets/css/theme-semantic.css
index 527b7d8..2f436be 100644
--- a/assets/css/theme-semantic.css
+++ b/assets/css/theme-semantic.css
@@ -4,10 +4,8 @@
    ======================================== */
 
 :root {
-  /* Accent color (dynamic, set by theme) */
-  --t-accent-h: 24;
-  --t-accent-s: 95%;
-  --t-accent-l: 53%;
+  /* Accent color - HSL components set dynamically by CSS generator */
+  /* Derived accent colors use the dynamic HSL values */
   --t-accent: hsl(var(--t-accent-h) var(--t-accent-s) var(--t-accent-l));
   --t-accent-hover: hsl(var(--t-accent-h) var(--t-accent-s) calc(var(--t-accent-l) - 8%));
   --t-accent-subtle: hsl(var(--t-accent-h) 40% 95%);
diff --git a/lib/simpleshop_theme_web/live/theme_live/index.html.heex b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
index 8572992..00f57f2 100644
--- a/lib/simpleshop_theme_web/live/theme_live/index.html.heex
+++ b/lib/simpleshop_theme_web/live/theme_live/index.html.heex
@@ -130,25 +130,25 @@
         <!-- Colors -->
         <div>
           <h3 class="font-semibold mb-3">Accent Color</h3>
-          <div class="flex gap-2 items-center">
-            <input
-              type="color"
-              phx-change="update_color"
-              phx-value-field="accent_color"
-              value={@theme_settings.accent_color}
-              class="w-12 h-10 rounded cursor-pointer"
-              phx-debounce="300"
-            />
-            <input
-              type="text"
-              phx-change="update_color"
-              phx-value-field="accent_color"
-              value={@theme_settings.accent_color}
-              class="input input-bordered input-sm flex-1 font-mono text-xs"
-              placeholder="#000000"
-              phx-debounce="blur"
-            />
-          </div>
+          <form phx-change="update_color" phx-value-field="accent_color">
+            <div class="flex gap-2 items-center">
+              <input
+                type="color"
+                name="value"
+                value={@theme_settings.accent_color}
+                class="w-12 h-10 rounded cursor-pointer"
+                phx-debounce="300"
+              />
+              <input
+                type="text"
+                name="value"
+                value={@theme_settings.accent_color}
+                class="input input-bordered input-sm flex-1 font-mono text-xs"
+                placeholder="#000000"
+                phx-debounce="blur"
+              />
+            </div>
+          </form>
         </div>
 
         <!-- Header Layout -->