Farbpaletten-Analyzer
Farbpalette analysieren: Farben manuell eingeben oder aus einem Bild extrahieren. WCAG-Kontrast prüfen, Farbblindheit simulieren, Harmonie erkennen und als CSS/SCSS/Tailwind exportieren.
Farben hinzufügen
Palette-Analyse
Kontrast-Matrix
| — | 1.0 ❌ AA | 1.4 ❌ AA | 1.7 ❌ AA | |
1.0 ❌ AA | — | 1.5 ❌ AA | 1.8 ❌ AA | |
1.4 ❌ AA | 1.5 ❌ AA | — | 1.2 ❌ AA | |
1.7 ❌ AA | 1.8 ❌ AA | 1.2 ❌ AA | — |
Farbabstände (ΔE CIEDE2000)
| — | 45.4 Stark unterschiedlich | 46.6 Stark unterschiedlich | 58.4 Stark unterschiedlich | |
45.4 Stark unterschiedlich | — | 71.5 Stark unterschiedlich | 34.5 Stark unterschiedlich | |
46.6 Stark unterschiedlich | 71.5 Stark unterschiedlich | — | 45.9 Stark unterschiedlich | |
58.4 Stark unterschiedlich | 34.5 Stark unterschiedlich | 45.9 Stark unterschiedlich | — |
Häufige Fragen
Was ist ein Farbpaletten-Analyzer?
Ein Farbpaletten-Analyzer prüft eine Sammlung von Farben auf Harmonie, Barrierefreiheit (WCAG-Kontrast), Farbabstände und simuliert, wie die Palette für Menschen mit Farbsehschwäche aussieht.
Wie kann ich Farben aus einem Bild extrahieren?
Lade ein Bild über den Button „Farben aus Bild extrahieren" hoch. Das Tool analysiert die Pixel mittels k-Means-Clustering und erkennt automatisch die 5–8 dominanten Farben.
Was bedeuten die WCAG-Kontraststufen AA und AAA?
WCAG AA erfordert ein Kontrastverhältnis von mindestens 4,5:1 für normalen Text und 3:1 für großen Text. AAA ist strenger: 7:1 für normalen und 4,5:1 für großen Text. Je höher die Stufe, desto besser die Lesbarkeit.
Was ist ΔE (Delta E) und warum ist es wichtig?
ΔE (Delta E) misst den wahrgenommenen Farbunterschied im CIE-Lab-Farbraum. Werte unter 1 sind für das Auge nicht unterscheidbar, ab 5 sind Farben deutlich verschieden. So stellst du sicher, dass deine Palette-Farben gut unterscheidbar sind.
Welche Arten von Farbblindheit werden simuliert?
Das Tool simuliert Protanopie (rot-blind), Deuteranopie (grün-blind), Tritanopie (blau-blind), die jeweiligen Anomalien (Protanomalie, Deuteranomalie, Tritanomalie) sowie Achromatopsie (komplette Farbenblindheit).
Werden meine Daten hochgeladen?
Nein. Alle Berechnungen — einschließlich der Bildanalyse — laufen vollständig in deinem Browser. Es werden keine Bilder oder Farben an einen Server gesendet.
In welchen Formaten kann ich die Palette exportieren?
Du kannst die Palette als CSS Custom Properties (Variablen), SCSS-Variablen, Tailwind-CSS-Konfiguration oder als JSON mit HEX-, RGB- und HSL-Werten exportieren und in die Zwischenablage kopieren.
Verwandte Tools
Farbpaletten-Analyse — Wissenschaftliche Farbextraktion und Harmonieprüfung
Die computergestützte Farbanalyse revolutioniert den Designprozess durch automatische Extraktion dominanter Farben aus Bildern und systematische Bewertung von Farbpaletten nach wissenschaftlichen Kriterien. Unser Tool kombiniert modernste Bildverarbeitungsalgorithmen mit etablierten Farbtheorien und WCAG-Standards für barrierefreies Design. Es analysiert nicht nur die visuellen Eigenschaften einer Palette, sondern prüft auch deren Zugänglichkeit für Menschen mit verschiedenen Formen der Farbsehschwäche.
K-Means-Clustering und Farbsegmentierung
Die Farbextraktion basiert auf dem K-Means-Clustering-Algorithmus, einem bewährten Verfahren des maschinellen Lernens. Jeder Bildpixel wird als Punkt im dreidimensionalen RGB-Farbraum betrachtet. Der Algorithmus gruppiert ähnliche Farbtöne und berechnet die Schwerpunkte (Zentroiden) jeder Farbgruppe. Diese repräsentieren die dominanten Farben des Bildes. Die Gewichtung erfolgt nach Häufigkeit — häufigere Farben haben größeren Einfluss auf das Clustering-Ergebnis. Standardmäßig werden 5-8 Cluster generiert, um eine ausgewogene Palette zwischen Vielfalt und Übersichtlichkeit zu erreichen.
Quantitative Farbharmonie nach Farbenlehre
Das Tool analysiert Farbbeziehungen nach etablierten Harmonieregeln: Komplementärkontrast (Farben gegenüber im Farbkreis, 180° Abstand), Triadenkontrast (drei Farben mit je 120° Abstand), Analogharmonie (benachbarte Farben, 30-60° Abstand) und Split-Komplementär (eine Grundfarbe plus die beiden Nachbarn ihrer Komplementärfarbe). Die Bewertung erfolgt durch Berechnung der Winkelabstände im HSL-Farbraum und Toleranzbereiche von ±15°. Zusätzlich wird die Sättigung und Helligkeit berücksichtigt — harmonische Paletten zeigen oft ähnliche Sättigungsgrade oder bewusste Kontraste.
WCAG-Kontrastanalyse und Barrierefreiheit
Jeder Farbkombination wird das Kontrastverhältnis nach WCAG 2.1 Standard berechnet. Die Formel lautet: (L1 + 0,05) / (L2 + 0,05), wobei L1 und L2 die relativen Leuchtdichtewerte der helleren bzw. dunkleren Farbe darstellen. Für normalen Text gilt AA-Standard ab 4,5:1, AAA ab 7:1. Bei großem Text (ab 18pt bzw. 14pt fett) sinken die Anforderungen auf 3:1 (AA) bzw. 4,5:1 (AAA). Das Tool markiert alle Farbpaare entsprechend ihrer Eignung für Text/Hintergrund-Kombinationen und zeigt konkrete Verbesserungsvorschläge durch Helligkeitsanpassung.
Delta-E-Farbabstand nach CIE-Standard
Der wahrgenommene Farbunterschied wird mittels Delta-E (ΔE) im CIE-Lab-Farbraum gemessen. Dieser berücksichtigt die menschliche Farbwahrnehmung besser als RGB-Abstände. Die CIEDE2000-Formel ist der modernste Standard und kompensiert Wahrnehmungsunterschiede in verschiedenen Farbregionen. ΔE-Werte unter 1 sind praktisch unsichtbar, 1-2 nur bei direktem Vergleich erkennbar, 2-5 deutlich sichtbar und über 5 sehr unterschiedlich. Für optimale Unterscheidbarkeit in UIs sollten benachbarte Farben mindestens ΔE = 5 aufweisen.
Farbblindheit-Simulation mit Dichromatie-Modellen
Die Simulation verschiedener Farbsehschwächen erfolgt durch mathematische Transformation der Farbwerte. Protanopie (Rot-Blindheit, ~1% der Männer) und Deuteranopie (Grün-Blindheit, ~1% der Männer) sind die häufigsten Formen. Tritanopie (Blau-Blindheit) ist seltener (<0,1%). Die entsprechenden Anomalien (Protanomalie, Deuteranomalie, Tritanomalie) zeigen abgeschwächte Farbwahrnehmung. Die Transformation nutzt etablierte Simulationsmatrizen nach Brettel et al. und Viénot et al., um realistische Darstellungen der veränderten Farbwahrnehmung zu erzeugen.
Export-Formate für moderne Webentwicklung
Die analysierten Farbpaletten können in verschiedenen entwicklerfreundlichen Formaten exportiert werden: CSS Custom Properties für moderne Browser mit Fallback-Unterstützung, SCSS-Variablen für Sass-Preprocessing, Tailwind CSS-Konfiguration zur Integration in das Utility-Framework und JSON mit vollständigen Farbraumangaben (HEX, RGB, HSL, HSB) für JavaScript-Anwendungen. Alle Exporte enthalten Metadaten zu Kontrasteignung und Barrierefreiheit.
Praktische Anwendungen im Designprozess
In der professionellen Designpraxis ermöglicht das Tool verschiedene Workflows: Brand-Entwicklung durch Ableitung von Farbschemata aus Moodboards oder Referenzbildern, Web-Design mit automatischer Prüfung der WCAG-Konformität, Print-Design durch Harmonieanalyse komplexer Farbkombinationen, Barrierefreie UX durch systematische Kontrastoptimierung. Besonders wertvoll ist die Kombination aus ästhetischer Harmonie und technischer Zugänglichkeit — Aspekte, die traditionell getrennt betrachtet werden.
Client-Side-Verarbeitung und Datenschutz
Alle Berechnungen erfolgen vollständig im Browser mittels HTML5 Canvas API und Web Workers für performante Hintergrundverarbeitung. Bilder werden nie an externe Server übertragen — die komplette Analyse läuft lokal ab und funktioniert auch offline. Dies gewährleistet absoluten Datenschutz bei sensiblen Designprojekten und eliminiert Upload-Zeiten bei großen Bilddateien. Die Web Worker-Implementation verhindert UI-Blockierung während rechenintensiver Clustering-Operationen.