# 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)