From 4aafd9e0c2769bf635d1bff0d55e00b21d284806 Mon Sep 17 00:00:00 2001
From: Ferdinand <ferdinand@MacBook-Pro.local>
Date: Wed, 1 Apr 2026 14:08:04 +0200
Subject: [PATCH] Add Farbhelfer design spec

---
 .../specs/2026-04-01-farbhelfer-design.md     | 115 ++++++++++++++++++
 1 file changed, 115 insertions(+)
 create mode 100644 docs/superpowers/specs/2026-04-01-farbhelfer-design.md

diff --git a/docs/superpowers/specs/2026-04-01-farbhelfer-design.md b/docs/superpowers/specs/2026-04-01-farbhelfer-design.md
new file mode 100644
index 0000000..2bf6aa7
--- /dev/null
+++ b/docs/superpowers/specs/2026-04-01-farbhelfer-design.md
@@ -0,0 +1,115 @@
+# Farbhelfer — Design Spec
+
+**Datum:** 2026-04-01  
+**Status:** Genehmigt
+
+---
+
+## Überblick
+
+Web-App zur Farbextraktion, -umrechnung und -verwaltung. Kernproblem: Man sieht eine Farbe vor Augen und muss mühsam online nach dem Hex-Code suchen. Der Farbhelfer löst das durch Bild-Upload/-Einfügen mit direkter Pixelauswahl und bietet darüber hinaus Farbumrechnung, Harmonien und eine persönliche Farbsammlung.
+
+**Technologie:** Vanilla HTML/CSS/JS — kein Framework, kein Build-Step, läuft direkt im Browser.
+
+---
+
+## Dateistruktur
+
+```
+/coding/Farbhelfer/
+  index.html
+  style.css
+  js/
+    picker.js      — Bild-Upload, Screenshot-Paste, Eyedropper
+    converter.js   — Hex ↔ RGB ↔ HSL, Komplementär, Harmonien
+    collection.js  — Favoriten, Historie, Schemata (localStorage + Export)
+```
+
+---
+
+## Navigation
+
+4 Tabs in einer fixen Navigationsleiste:
+
+| Tab | Zweck |
+|---|---|
+| Picker | Farbe aus Bild extrahieren |
+| Eingabe | Farbe direkt eingeben und umrechnen |
+| Harmonien | Farbharmonien zur gewählten Farbe anzeigen |
+| Sammlung | Favoriten, Historie, gespeicherte Schemata verwalten |
+
+---
+
+## Tab 1: Picker
+
+**Workflow:**
+1. Bild rein — per Drag & Drop, Datei-Upload oder `Ctrl+V` (Screenshot aus Zwischenablage)
+2. Bild wird in einem `<canvas>`-Element angezeigt
+3. Automatischer Vorschlag: Hex-Code des mittleren Pixels wird sofort angezeigt
+4. Eyedropper: Mausklick auf beliebigen Punkt wählt diesen Pixel
+5. Ausgabe: Große Farbvorschau + Hex/RGB/HSL gleichzeitig
+6. Aktionen: "Zu Favoriten" / "Zu Schema hinzufügen"
+
+**Technisch:** `<canvas>` + `getImageData()` — komplett clientseitig, kein Server nötig.
+
+---
+
+## Tab 2: Eingabe
+
+- Eingabefelder für Hex, RGB und HSL — alle drei gleichzeitig sichtbar
+- Änderung in einem Feld aktualisiert die anderen automatisch (bidirektionale Umrechnung)
+- Großes Farbfeld zeigt die Farbe live
+- Buttons: "Zu Favoriten" / "Zu Schema hinzufügen"
+
+---
+
+## Tab 3: Harmonien
+
+- Farbrad-Visualisierung (SVG) mit der gewählten Farbe als Ausgangspunkt
+- 4 Harmonietypen als Farbfelder mit Hex-Codes:
+  - **Komplementär** — 1 Farbe gegenüber (180°)
+  - **Analog** — 2 Nachbarfarben (±30°)
+  - **Triade** — 3 gleichmäßig verteilt (120°)
+  - **Split-Komplementär** — 2 Farben neben der Komplementärfarbe (150°/210°)
+- Jede angezeigte Farbe kann direkt in Favoriten oder ein Schema übernommen werden
+- Ausgangsfarbe: immer die zuletzt im Picker oder Eingabe-Tab verwendete Farbe
+
+---
+
+## Tab 4: Sammlung
+
+**Favoriten**
+- Manuell gespeicherte Einzelfarben
+- Je als Farbfeld + Hex-Code dargestellt
+- Einzeln löschbar
+
+**Historie**
+- Automatisch — die letzten 20 verwendeten Farben
+- Älteste Farbe fällt raus wenn die Liste voll ist
+- Nicht manuell bearbeitbar
+
+**Farbschemata**
+- Gruppen aus je 4 Farben
+- Name vergeben (z.B. "Website Relaunch")
+- Farben innerhalb eines Schemas per Drag & Drop umsortierbar
+- Schema als Ganzes kopieren oder löschen
+
+**Persistenz**
+- Alles automatisch in `localStorage` gespeichert
+- Export: Download als `farbhelfer-sammlung.json`
+- Import: JSON-Datei laden, wird mit Bestand gemerged (keine Duplikate)
+
+---
+
+## Geteilter Zustand
+
+Der aktive Farbwert (zuletzt gewählte Farbe) ist global verfügbar und wird zwischen Picker, Eingabe und Harmonien-Tab geteilt. Wechsel zwischen Tabs behält die aktuelle Farbe.
+
+---
+
+## Out of Scope
+
+- Benutzerkonten / Cloud-Sync
+- Barrierefreiheits-Kontrast-Check (kann später ergänzt werden)
+- Native App / Electron-Wrapper
+- Farbpaletten aus mehreren Pixeln (Durchschnitt/Clustering)