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)

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:

Bild rein — per Drag & Drop, Datei-Upload oder Ctrl+V (Screenshot aus Zwischenablage)
Bild wird in einem <canvas>-Element angezeigt
Automatischer Vorschlag: Hex-Code des mittleren Pixels wird sofort angezeigt
Eyedropper: Mausklick auf beliebigen Punkt wählt diesen Pixel
Ausgabe: Große Farbvorschau + Hex/RGB/HSL gleichzeitig
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)

3.5 KiB Raw Permalink Blame History