116 lines
3.5 KiB
Markdown
116 lines
3.5 KiB
Markdown
# 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)
|