Dominant
60%
Vorschau der dominanten Karte
Nach dem Upload erscheint hier die Familie mit der größten Fläche.
60:30:10-Farbverhältnis-Analysator
Laden Sie ein Bild hoch, gruppieren Sie ähnliche Farben, vergleichen Sie Dominante, Sekundärfarbe und Akzent mit 60:30:10 und prüfen Sie, wie sich die Akzentfarbe im Bild verteilt.
60:30:10-Farbverhältnis-Analysator
Bild hochladen
Bild hierher ziehen oder zum Hochladen klicken
PNG, JPG, GIF, WebP · Max. 10 MB · Analyse nur im Browser
Analyseoptionen
Wenn große neutrale Flächen wie weiße oder schwarze Hintergründe vorhanden sind, wird ihr Gewicht angepasst, damit die dominante Farbe nicht verzerrt gelesen wird.
Farbcodes anzeigen
Prüfen Sie sofort Ihre 60:30:10-Balance
Laden Sie ein Bild hoch, um ähnliche Töne zu gruppieren und die dominante, sekundäre und akzentuierende Verteilung samt Akzentplatzierung zu analysieren.
Farbfamilien und Verteilung werden analysiert…
Analyse ausstehend
60:30:10-Anpassung
0 Pkt.
Laden Sie ein Bild hoch, um sofort zu sehen, welche Familie dem 60-Prozent-Anteil am nächsten kommt und ob die Akzentfarbe ausreichend präsent ist.
Dominante ausstehend
Sekundär ausstehend
Akzent ausstehend
Analysevorschau
Original des hochgeladenen Bildes
Laden Sie ein Bild hoch, damit hier die repräsentative Ansicht erscheint.
Zielverhältnis vs. tatsächliche Verteilung
Dominant
0%
Sekundär
0%
Akzent
0%
Einfluss der Neutralfarben
0%
Diagnose der Akzentfarbe
Konzentration
Ausstehend
Zusammenfassung
Nach der Analyse sehen Sie, ob sich die Akzentfarbe auf einen Bereich konzentriert oder breit verteilt.
Hier erscheint die Heatmap der Akzentfarbe.
Farbfamilien nach Rolle
Sekundär
30%
Vorschau der sekundären Karte
Nach dem Upload erscheint hier die Familie, die als Zwischenschicht arbeitet.
Akzent
10%
Vorschau der Akzentkarte
Nach dem Upload erscheinen hier die Fokusfamilie und ihre Platzierungstendenz.
Gruppen ähnlicher Farben
Hier erscheint eine Palette mit ähnlichen Farbfamilien.
Interpretation und Verbesserungshinweise
- Laden Sie ein Bild hoch und das Tool fasst automatisch zusammen, wie Sie näher an 60:30:10 kommen.
Analysetabelle
| Rolle | Familienname | Anteil | Leitcode | Kommentar |
|---|---|---|---|---|
| Die Tabelle wird nach der Analyse gefüllt. | ||||
Worauf das Tool achtet
- Dominant 60 % — Die größte Farbfamilie, die den Grundton des Bildes festlegt
- Sekundär 30 % — Die Zwischenschicht zwischen Dominante und Akzent
- Akzent 10 % — Eine kleine Farbfläche mit starker Blickwirkung
- Visuelle Konzentration — Ob die Akzentfarbe an einem Punkt konzentriert ist oder sich über das ganze Bild verteilt
Dieses Tool analysiert das Bild ausschließlich im Browser. Die 60:30:10-Regel ist kein absolutes Gesetz, sondern eine Design-Heuristik, um visuelle Balance zu lesen; je nach Bildabsicht kann eine andere Aufteilung besser passen.
Was ist der 60:30:10-Farbverhältnis-Analysator?
Der 60:30:10-Farbverhältnis-Analysator bündelt ähnliche Farben aus einem hochgeladenen Bild, damit sichtbar wird, welche Farbfamilie die visuelle Basis bildet, welche als Zwischenschicht funktioniert und welche den Blickpunkt erzeugt. Statt einfach nur die drei größten Farben zu nehmen, fasst das Tool nahe Nuancen zu einer gemeinsamen Familie zusammen, damit das Ergebnis näher an der tatsächlichen Bildwirkung liegt.
Das Ergebnis zeigt einen Anpassungswert für die Aufteilung 60 % dominant, 30 % sekundär und 10 % Akzent. Zusätzlich sehen Sie, welche Familie dem 60-Prozent-Anteil am nächsten kommt, ob die Akzentfarbe zu schwach oder zu stark ist und ob sie sich auf einen Bereich konzentriert oder im ganzen Bild verteilt. Das ist hilfreich für Präsentationen, Thumbnails, Illustrationen, Web-UI und die Analyse visueller Referenzen.
Wann dieses Tool sinnvoll ist
- Analyse von Animationsszenen — Wenn Sie verstehen möchten, warum eine Szene stabil wirkt und wo die Fokusfarbe greift
- Aufschlüsselung von Marken- oder Thumbnail-Referenzen — Wenn Sie die Farbstruktur einer Referenz schnell in Prozenten und Farbfamilien zerlegen möchten
- Prüfung von UI-Entwürfen — Wenn Sie prüfen möchten, ob die Akzentfarbe eines Buttons zu weit streut oder Dominante und Sekundärfarbe zu wenig getrennt sind
- Plakat- und Bannerdesign — Wenn Sie schnell bewerten möchten, ob Hintergrund, Nebenflächen und Akzentpunkte sauber verteilt sind
- Studium von Color Scripts — Wenn Sie Farbmischung und Platzierungsmuster eines Bildes in wiederverwendbarer Sprache festhalten möchten
Wichtige Funktionen
- Automatische Gruppierung ähnlicher Töne — Auch feine Variationen werden in einer gemeinsamen Familie gebündelt, damit das Ergebnis näher an der tatsächlichen Wahrnehmung liegt.
- 60:30:10-Anpassungswert — Zeigt mit Punktzahl und kurzer Erläuterung, wie nah das Bild an der Idealverteilung liegt.
- Karten für dominante, sekundäre und Akzentfarbe — Jede Karte bündelt Repräsentativfarbe, Anteil, Eigenschaften und einen Verbesserungshinweis.
- Heatmap der Akzentfarbe — Zeigt auf einen Blick, ob die Akzentfarbe an einem Punkt konzentriert ist oder sich über das ganze Bild verteilt.
- Modus zur Reduktion des Hintergrundeinflusses — Hilft bei der Korrektur, wenn ein weißer Hintergrund oder große neutrale Flächen die Auswertung verzerren.
- HEX/RGB/HSL-Codes anzeigen — Wandeln Sie den repräsentativen Farbcode in das gewünschte Format um und kopieren Sie ihn direkt.
So funktioniert es
- Bild hochladen — Laden Sie die Szene, das Thumbnail, Poster oder UI-Screenshot hoch, die Sie analysieren möchten.
- Analysemodus wählen — Wenn das Bild einen großen weißen oder schwarzen Hintergrund hat, sollten Sie den Standardmodus zur Reduktion des Hintergrundeinflusses aktiv lassen.
- Score und Rollen prüfen — Beginnen Sie mit dem Wert oben sowie den Anteilen für Dominante, Sekundärfarbe und Akzent.
- Heatmap und Hinweise lesen — Prüfen Sie, wo sich der Akzent sammelt und ob er reduziert oder verstärkt werden sollte.
- Codes weiterverwenden — Nutzen Sie die HEX-, RGB- oder HSL-Werte aus den Karten und Familien für Ihre Gestaltung.
Wie funktioniert die Analyse?
Das Tool verkleinert das Bild zunächst für die Stichprobe, blendet transparente Pixel aus, bildet Farbcluster und führt nahe Nuancen anschließend zusammen. Aus diesen repräsentativen Farbgruppen werden die Rollen dominant, sekundär und Akzent abgeleitet und die jeweilige Flächenverteilung berechnet.
Die Akzentfarbe wird nicht einfach als drittgrößte Farbe gewählt. Das Tool priorisiert kleinere Gruppen, die durch genügend Sättigung und Kontrast den Blick anziehen können. Anschließend teilt es das Bild in ein Raster auf, misst die Verteilung des Akzents und zeigt, ob der Fokus gebündelt oder verstreut wirkt.
Das Ergebnis dient als Interpretationshilfe. Narrativ, Licht, räumliche Tiefe oder Markenabsicht werden nicht automatisch verstanden, deshalb sollte die endgültige Designentscheidung immer gemeinsam mit dem Kontext getroffen werden.
Häufige Fragen
Muss die 60:30:10-Regel strikt eingehalten werden?
Nein. Die 60:30:10-Regel ist eine Heuristik, um visuelle Balance schnell einzuschätzen. Je nach Bildabsicht kann eine Verteilung wie 70:20:10 oder 50:35:15 besser funktionieren. Das Tool ist als Referenzpunkt gedacht, nicht als starre Vorgabe.
Warum werden ähnliche Farben gruppiert, statt nur die drei größten zu nehmen?
In echten Bildern gibt es innerhalb einer Farbfamilie oft viele Abstufungen in Helligkeit und Sättigung. Wenn nur die drei größten Farben angezeigt werden, können Himmelblau und Graublau wie unterschiedliche Rollen wirken, obwohl sie visuell zu demselben Block gehören. Deshalb gruppiert das Tool ähnliche Töne zu einer natürlicheren Lesart.
Kann das Ergebnis bei Bildern mit weißem Hintergrund irritierend wirken?
Ja. Ein weißer, schwarzer oder allgemein sehr neutraler Hintergrund kann dazu führen, dass der dominante Farbanteil stärker wirkt als die tatsächliche Bildwirkung. In solchen Fällen hilft der Standardmodus zur Reduktion des Hintergrundeinflusses, das Ergebnis näher an die reale Wahrnehmung zu bringen.
Wie sollte die Heatmap der Akzentfarbe gelesen werden?
Die Heatmap zeigt, wo sich die Akzentfarbe besonders stark sammelt. Wenn sie auf eine Seite oder einen Fokuspunkt konzentriert ist, wirkt die Blickführung meist klarer. Wenn sie sich gleichmäßig über das ganze Bild verteilt, kann der Schwerpunkt verwässern. Bei muster- oder texturbasierten Bildern kann eine gewisse Streuung trotzdem natürlich sein, daher sollte das Ergebnis immer im Kontext gelesen werden.
Wird das hochgeladene Bild auf dem Server gespeichert?
Nein. Die Analyse läuft ausschließlich im Browser und das hochgeladene Bild wird nicht auf dem Server gespeichert. Dadurch eignet sich das Tool auch besser für sensible Entwürfe oder interne Arbeitsbilder.
Noch keine Kommentare. Hinterlassen Sie die erste Meinung.