diff --git a/frontend/index.html b/frontend/index.html
index 0a18c36..8dde17e 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -282,7 +282,10 @@
       </div>
       <div class="form-group">
         <label>Farbe</label>
-        <input type="color" id="acc-color" value="#4285f4" class="color-input" />
+        <div class="ev-color-row">
+          <input type="text" id="acc-color-hex" class="ev-color-hex" maxlength="7" value="#4285f4" spellcheck="false" />
+          <div class="ev-color-preview" id="acc-color-preview" style="background:#4285f4" title="Farbe wählen"></div>
+        </div>
       </div>
       <div id="acc-error" class="form-error hidden"></div>
     </div>
@@ -321,23 +324,23 @@
         </div>
         <div class="form-group">
           <label>Primärfarbe</label>
-          <div class="color-row">
-            <input type="color" id="cfg-primary-color" class="color-input" />
-            <span class="color-label" id="cfg-primary-label">#4285f4</span>
+          <div class="ev-color-row">
+            <input type="text" id="cfg-primary-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
+            <div class="ev-color-preview" id="cfg-primary-preview" title="Farbe wählen"></div>
           </div>
         </div>
         <div class="form-group">
           <label>Akzentfarbe</label>
-          <div class="color-row">
-            <input type="color" id="cfg-accent-color" class="color-input" />
-            <span class="color-label" id="cfg-accent-label">#ea4335</span>
+          <div class="ev-color-row">
+            <input type="text" id="cfg-accent-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
+            <div class="ev-color-preview" id="cfg-accent-preview" title="Farbe wählen"></div>
           </div>
         </div>
         <div class="form-group">
           <label>Heutige-Tag-Farbe</label>
-          <div class="color-row">
-            <input type="color" id="cfg-today-color" class="color-input" />
-            <span class="color-label" id="cfg-today-label">#4285f4</span>
+          <div class="ev-color-row">
+            <input type="text" id="cfg-today-hex" class="ev-color-hex" maxlength="7" spellcheck="false" />
+            <div class="ev-color-preview" id="cfg-today-preview" title="Farbe wählen"></div>
           </div>
         </div>
         <div class="form-group">
diff --git a/frontend/js/calendar.js b/frontend/js/calendar.js
index cead487..d13e1bd 100644
--- a/frontend/js/calendar.js
+++ b/frontend/js/calendar.js
@@ -610,18 +610,31 @@ function openAccountModal() {
   document.getElementById('acc-url').value = '';
   document.getElementById('acc-username').value = '';
   document.getElementById('acc-password').value = '';
-  document.getElementById('acc-color').value = '#4285f4';
+  document.getElementById('acc-color-hex').value = '#4285f4';
+  document.getElementById('acc-color-preview').style.background = '#4285f4';
   document.getElementById('acc-error').classList.add('hidden');
   openModal('modal-account');
 }
 
 function bindAccountModal() {
+  const accPreview = document.getElementById('acc-color-preview');
+  const accHex = document.getElementById('acc-color-hex');
+  accPreview.addEventListener('click', async () => {
+    const picked = await openColorPicker(accPreview, accHex.value || '#4285f4');
+    if (picked) { accHex.value = picked.toUpperCase(); accPreview.style.background = picked; }
+  });
+  accHex.addEventListener('change', () => {
+    let val = accHex.value.trim();
+    if (!val.startsWith('#')) val = '#' + val;
+    if (/^#[0-9a-fA-F]{6}$/.test(val)) { accHex.value = val.toUpperCase(); accPreview.style.background = val; }
+  });
+
   document.getElementById('acc-save').onclick = async () => {
     const name     = document.getElementById('acc-name').value.trim();
     const url      = document.getElementById('acc-url').value.trim();
     const username = document.getElementById('acc-username').value.trim();
     const password = document.getElementById('acc-password').value;
-    const color    = document.getElementById('acc-color').value;
+    const color    = document.getElementById('acc-color-hex').value;
     const errEl    = document.getElementById('acc-error');
 
     if (!name || !url || !username || !password) {
@@ -655,14 +668,16 @@ function openSettingsModal() {
   const s = state.settings;
   document.getElementById('cfg-default-view').value  = s.default_view   || 'month';
   document.getElementById('cfg-week-start').value    = s.week_start_day || 'monday';
-  document.getElementById('cfg-primary-color').value = s.primary_color  || '#4285f4';
-  document.getElementById('cfg-accent-color').value  = s.accent_color   || '#ea4335';
-  document.getElementById('cfg-today-color').value   = s.today_color    || '#4285f4';
-  document.getElementById('cfg-dim-past').checked    = !!s.dim_past_events;
-
-  document.getElementById('cfg-primary-label').textContent = s.primary_color || '#4285f4';
-  document.getElementById('cfg-accent-label').textContent  = s.accent_color  || '#ea4335';
-  document.getElementById('cfg-today-label').textContent   = s.today_color   || '#4285f4';
+  const colors = [
+    { id: 'cfg-primary', val: s.primary_color || '#4285f4' },
+    { id: 'cfg-accent',  val: s.accent_color  || '#ea4335' },
+    { id: 'cfg-today',   val: s.today_color   || '#4285f4' },
+  ];
+  colors.forEach(({ id, val }) => {
+    document.getElementById(id + '-hex').value = val.toUpperCase();
+    document.getElementById(id + '-preview').style.background = val;
+  });
+  document.getElementById('cfg-dim-past').checked = !!s.dim_past_events;
 
   // Show users section only for admins
   const user = JSON.parse(localStorage.getItem('user') || '{}');
@@ -709,10 +724,17 @@ async function loadUsers() {
 }
 
 function bindSettingsModal() {
-  ['cfg-primary-color','cfg-accent-color','cfg-today-color'].forEach(id => {
-    document.getElementById(id).addEventListener('input', e => {
-      const labelId = id.replace('color', 'label');
-      document.getElementById(labelId).textContent = e.target.value;
+  ['cfg-primary','cfg-accent','cfg-today'].forEach(prefix => {
+    const preview = document.getElementById(prefix + '-preview');
+    const hex = document.getElementById(prefix + '-hex');
+    preview.addEventListener('click', async () => {
+      const picked = await openColorPicker(preview, hex.value || '#4285f4');
+      if (picked) { hex.value = picked.toUpperCase(); preview.style.background = picked; }
+    });
+    hex.addEventListener('change', () => {
+      let val = hex.value.trim();
+      if (!val.startsWith('#')) val = '#' + val;
+      if (/^#[0-9a-fA-F]{6}$/.test(val)) { hex.value = val.toUpperCase(); preview.style.background = val; }
     });
   });
 
@@ -739,9 +761,9 @@ function bindSettingsModal() {
     const settings = {
       default_view:    document.getElementById('cfg-default-view').value,
       week_start_day:  document.getElementById('cfg-week-start').value,
-      primary_color:   document.getElementById('cfg-primary-color').value,
-      accent_color:    document.getElementById('cfg-accent-color').value,
-      today_color:     document.getElementById('cfg-today-color').value,
+      primary_color:   document.getElementById('cfg-primary-hex').value,
+      accent_color:    document.getElementById('cfg-accent-hex').value,
+      today_color:     document.getElementById('cfg-today-hex').value,
       dim_past_events: document.getElementById('cfg-dim-past').checked,
     };
     try {