Bildfarben Studio

Bildfarben lokal analysieren, Pixel prüfen, Paletten und Harmonien erzeugen sowie vollständige Ergebnisse exportieren.

Funktionen

• Lokale Bildanalyse
• Farbpaletten und Harmonien
• WCAG-Kontrastprüfung
• Analyseexport

Zweck und Datenschutz

Das Bildfarben-Studio untersucht lokale Bilder pixelgenau. Bilddateien, Pixel und Analyseergebnisse bleiben im Browser und werden nicht an einen Server oder Drittanbieter übertragen. Die letzte verwendete Bilddatei kann lokal in IndexedDB gespeichert werden, damit sie beim nächsten Start wieder verfügbar ist.

Voraussetzungen

Benötigt werden ein aktueller Browser, eine lokale Bilddatei und JavaScript. Die optionale Bildschirm-Pipette benötigt localhost oder HTTPS sowie EyeDropper-Unterstützung.

Schritte

Lade ein Bild, wähle einen Pixel oder eine Palettenfarbe, öffne die gewünschte Analyseansicht und exportiere das Ergebnis bei Bedarf ausdrücklich.

Parameter

Zoom, Pan-Modus, Palettengröße, aktive Basisfarbe sowie Vorder- und Hintergrundfarbe beeinflussen Darstellung und Analyse.

Ergebnis

Das Studio liefert Pixelwerte, dominante Farben, Sammlung, Varianten, Harmonien, WCAG-Kontrast, Theme-Tokens und lokale Exporte.

Bild laden

Öffne ein Bild über Bild öffnen, ziehe es auf die Arbeitsfläche oder füge es mit Strg+V ein. Unterstützt werden PNG, JPEG/JPG, WebP und BMP. AVIF funktioniert, wenn der Browser das Format decodieren kann; GIF kann als erster Frame unterstützt werden. Bei einer ungültigen Datei bleibt das letzte gültige Bild erhalten.

Arbeitsfläche

Die Werkzeugleiste bietet Verkleinern, Vergrößern, 100 %, Einpassen und Verschieben. Mausrad und Tastatur steuern den Zoom; Pfeiltasten verschieben die Pixelauswahl. Die 11×11-Lupe und alle Koordinaten beziehen sich immer auf die Originalpixel, unabhängig vom Zoom. Die Analyseleiste kann geschlossen, geöffnet und über den Trenner in der Breite geändert werden.

IconButtons und ihre Bedienung

Die erste Spalte zeigt jeweils den echten, deaktivierten AT-IconButton. Tooltip und zugänglicher Name entsprechen der Bezeichnung und erklären die Aktion auch ohne Farbwahrnehmung.

IconButton	Bezeichnung	Funktion
	Bild öffnen	Öffnet die lokale Dateiauswahl.
	Bildschirm-Pipette	Wählt eine Bildschirmfarbe, sofern Browser und Sicherheitskontext die Funktion unterstützen.
	Verkleinern	Verkleinert ausschließlich den sichtbaren Bildausschnitt.
	Vergrößern	Vergrößert ausschließlich den sichtbaren Bildausschnitt.
	Originalgröße	Setzt die Ansicht auf 100 Prozent.
	Einpassen	Zentriert und skaliert das ganze Bild in die Arbeitsfläche.
	Verschieben	Schaltet den Pan-Modus ein oder aus; der gedrückte Zustand kennzeichnet den aktiven Modus.
	Kopieren	Kopiert den zugehörigen Farbwert beziehungsweise alle Sammlungswerte.
	Zur Farbsammlung hinzufügen	Sammelt die aktive Pixel-, Bildschirm-, Paletten-, Varianten- oder Harmoniefarbe.
	Palette anzeigen	Zeigt die berechnete Palettenliste.
	Farbdaten anzeigen	Zeigt das Property Grid der gewählten Palettenfarbe.
	Sammlung leeren	Löscht alle gesammelten Farben.
	Eintrag entfernen	Löscht ausschließlich die betreffende Sammlungszeile.

Pixel und Bildschirm-Pipette

Ein Klick wählt einen Pixel. HEX, HEX8, RGB, RGBA, HSL, HSV, HWB, CMYK, XYZ, LAB, LCH und Alpha lassen sich einzeln kopieren oder in die Farbsammlung übernehmen. Die Bildschirm-Pipette benötigt localhost oder HTTPS, eine sichtbare Benutzeraktion und einen Browser mit EyeDropper-Unterstützung.

Palette und Farbsammlung

Die Palette berechnet wahlweise 5, 8, 10, 12 oder 16 dominante Farben samt Anteil. Farben können ausgewählt, kopiert und gesammelt werden. In der Sammlung lassen sie sich untersuchen, einzeln entfernen, gemeinsam kopieren oder vollständig löschen.

Varianten, Harmonien, Theme und Kontrast

Varianten erzeugt hellere und dunklere Abstufungen. Harmonien zeigt komplementäre, split-komplementäre, analoge, triadische, tetradische und monochrome Beziehungen. Theme erzeugt Light- und Dark-Tokens aus der aktiven Farbe. Kontrast bewertet Vorder- und Hintergrund nach WCAG AA und AAA und zeigt eine direkte Textvorschau.

Export

Der JSON-Export enthält den vollständigen Analysezustand und Metadaten, jedoch keine Bildbytes. CSS enthält Theme-, Paletten- und Sammlungsvariablen. Der Textbericht fasst Quelle und Kernergebnisse lesbar zusammen. Ein Download entsteht nur nach einer ausdrücklichen Aktion.

Typische Fehler

Beschädigte oder nicht unterstützte Dateien werden abgewiesen. Die Bildschirm-Pipette fehlt ohne sicheren Kontext oder Browserunterstützung. Ein gesperrter lokaler Speicher kann die Wiederherstellung verhindern.

Fehlerbehebung

Alle Standardbedienelemente sind per Tastatur erreichbar. Falls ein Bild nicht geladen wird, prüfe Format und Dateiintegrität. Falls die Bildschirm-Pipette fehlt, verwende localhost/HTTPS und einen unterstützten Browser. Lade die Seite neu, wenn die lokale Wiederherstellung fehlschlägt; Originaldateien werden dadurch nicht verändert.