Eine Farbpalette aus einem Bild erstellen – für Marke und Präsentation

Um eine Farbpalette aus einem Bild zu erstellen, öffnen Sie Farbpipette & Palette und fügen das Bild hinzu – ein Logo, ein Produktfoto, eine Aufnahme Ihres Schaufensters. Das Werkzeug findet die dominanten Farben des Bildes (zwischen drei und sechzehn, standardmässig sechs), gibt jede in HEX, RGB, HSL, HSV, OKLCH und ungefährem CMYK an und exportiert die Palette als CSS-Variablen, JSON, .ase-Farbfelddatei für Gestaltungsprogramme und Farbfeldbild.

Die Palette ist erst der Anfang. Dieser Artikel zeigt, wie Sie sie erstellen, welche Farbschreibweise wohin gehört, wie Text in Ihren Farben lesbar bleibt, warum dieselbe Farbe am Bildschirm und auf Papier verschieden aussieht und wie Sie die Palette in anderen Werkzeugen einsetzen.

So erstellen Sie eine Farbpalette aus einem Bild

1. 1

   Ein geeignetes Ausgangsbild wählen

   Ein Bild pro Durchgang. Ein Logo oder eine Grafik mit flächigen Farben liefert exakte Werte; ein Foto die Farben, die es prägen – oft genau das Richtige für eine Stimmung oder ein Präsentationsdesign. Bei animierten Bildern wird das erste Bild verwendet.

2. 2

   Anzahl Farben und Reihenfolge festlegen

   Wählen Sie, wie viele Farben ermittelt werden und wie sie sortiert sind: Häufigste zuerst, Hell nach dunkel oder Nach Farbton. Weniger Farben ergeben eine ruhigere Palette, mehr zeigen die Nuancen.

3. 3

   Exakte Farben dort auslesen, wo es zählt

   Die Palette fasst ähnliche Pixel zusammen; ihre Farben sind repräsentativ, nicht einer Stelle entnommen. Mit der Pipette lesen Sie dagegen den exakten Wert eines beliebigen Pixels – nützlich für das genaue Blau eines Logos.

4. 4

   Die zu erstellenden Dateien wählen

   Unter Zu erstellende Dateien: CSS-Variablen (.css), JSON (.json), eine Farbfeld-Austauschdatei (.ase) und ein Farbfeldbild (.png). Mit einem Präfix für die CSS-Variablennamen, etwa marke, erhalten Sie --marke-1, --marke-2 und so weiter.

5. 5

   Kopieren oder herunterladen

   Kopieren Sie einen einzelnen Wert, oder laden Sie die Dateien herunter und geben Sie sie an die Person weiter, die Website, Folien oder Drucksachen gestaltet.

HEX, RGB, HSL und mehr: welcher Farbwert wohin gehört

Alle Werte beziehen sich auf den Farbraum sRGB, den gängigen Farbraum des Webs. Verwendet ein Foto ein grösseres Farbprofil, wird es zuerst nach sRGB umgerechnet, und sehr gesättigte Farben werden beschnitten; der Bericht des Werkzeugs weist darauf hin.

Vor dem Einsatz für Text: Kontrast prüfen

Eine Palette aus einem schönen Foto hat oft mehrere Mitteltöne, die gut zusammenpassen, aufeinander aber schwer lesbar sind. Die Web Content Accessibility Guidelines (WCAG) 2.2 legen auf Stufe AA Mindestkontraste fest: 4,5:1 für normalen Text und 3:1 für grossen Text (mindestens 18 Punkt oder 14 Punkt fett). Bedienelemente und Grafiken, die zum Verständnis nötig sind, brauchen 3:1 gegenüber angrenzenden Farben. Text, der Teil eines Logos ist, hat keine Kontrastanforderung.

Farbpipette & Palette liefert exakte Werte, berechnet aber keine Kontrastverhältnisse. Geben Sie die HEX-Werte von Textfarbe und Hintergrund in einen Kontrastrechner ein, bevor Sie sich für ein Paar entscheiden. Einige Faustregeln:

• Für Fliesstext die Extreme kombinieren. Die dunkelste Farbe der Palette auf ihrer hellsten ist für Text meist die sicherste Wahl.
• Kräftige Mitteltöne für Akzente – grosse Überschriften, Schaltflächen (nach einer Kontrastprüfung), Linien und Symbole.
• Nach Hell nach dunkel sortieren, um auf einen Blick zu sehen, welche Farben Text tragen können und welche in den Hintergrund gehören.
• Beide Richtungen prüfen, wenn Website oder Folien eine dunkle Variante haben: Heller Text auf dunkler Farbe ist ein eigenes Paar.

Bildschirm und Druck: warum dieselbe Farbe anders aussieht

Bildschirme mischen Licht aus Rot, Grün und Blau; Drucker bringen Cyan, Magenta, Gelb und Schwarz als Farbe auf Papier. Beide können nicht genau denselben Farbumfang wiedergeben, und beide schwanken – von Bildschirm zu Bildschirm, von gestrichenem zu ungestrichenem Papier. Ein leuchtendes Markenblau am Monitor kann im Druck matter wirken. Wie viele Pixel ein Druck braucht, ist eine eigene Frage – siehe Pixel, DPI und Druckgrösse.

• Die CMYK-Werte sind ungefähr. Sie stammen aus einer einfachen Formel ohne Druckfarben- oder Papierprofil. Nutzen Sie sie als Ausgangspunkt, nicht als Druckvorgabe; SchweizerIMG erstellt keine CMYK-Dateien.
• Markenfarben einmal pro Medium festlegen. Halten Sie einen HEX-Wert für Bildschirme fest und lassen Sie die passenden Druckwerte von Ihrer Druckerei oder Ihrer Gestalterin bestimmen und an einem Proof prüfen.
• Die Werte festhalten. Legen Sie die exportierte CSS- oder JSON-Datei zu Ihren Markenunterlagen, damit jede neue Präsentation und jede Webseite dieselben Farben verwendet.

Die Palette in Rand hinzufügen, Rahmen hinzufügen und Wasserzeichen nutzen

Die Farbfelder der Werkzeuge von SchweizerIMG nehmen HEX-Werte an, so gelangt eine Palette direkt in Ihre Bilder:

• *Rand hinzufügen* – Füllfarbe: Produktfotos oder Teambilder auf ein Quadrat oder ein festes Seitenverhältnis in Ihrer Markenfarbe statt in Weiss bringen. Den Ablauf für einen ganzen Shop beschreibt Produktfotos für den Onlineshop vorbereiten.
• *Rahmen hinzufügen* – Rahmenfarbe, die Farbe zwischen den Linien eines Doppelrahmens und die Farbe der Beschriftung beim Polaroid-Rahmen: ein einheitlicher Rahmen für Social-Media-Beiträge oder eine Präsentation.
• *Wasserzeichen* – Textfarbe, Kontur- und Schattenfarbe: ein Zeichen in Ihrer Markenfarbe, das auf hellen und dunklen Fotos lesbar bleibt. Was ein Zeichen schützt und was nicht, steht in was ein Wasserzeichen schützt.

Diese gehören zu den Werkzeugen zum Umformen und Bearbeiten; die Palette selbst finden Sie bei den Analysewerkzeugen. Ein Ergebnis lässt sich ohne Zwischendownload an das nächste Werkzeug weitergeben – siehe Werkzeuge verketten.

Agenturen erstellen Paletten oft aus Material, das noch nicht öffentlich ist: das neue Logo einer Kundin, das Key Visual einer Kampagne, Produktfotos vor der Lancierung. SchweizerIMG liest das Bild in Ihrem Browser; es wird nie an uns gesendet oder bei uns gespeichert, und pro Durchgang erhält unser Server nur das Werkzeug und das Ergebnis. Mehr dazu auf der Sicherheitsseite und unter Bildwerkzeuge für Marketing- und Webagenturen.

Häufige Fragen

Wie viele Farben sollte eine Markenpalette haben?

Eine feste Zahl gibt es nicht. Viele Marken arbeiten mit einer oder zwei Hauptfarben, einem Akzent und einigen neutralen Tönen. Ermitteln Sie mehr Farben, als Sie brauchen – bis zu sechzehn –, und behalten Sie jene, die die Marke tragen; die übrigen eignen sich für Hintergründe und Diagramme.

Warum weicht eine Palettenfarbe vom Pixel ab, das ich ausgewählt habe?

Die Palette fasst ähnliche Pixel zusammen und gibt für jede Gruppe eine repräsentative Farbe an, gewichtet nach ihrem Anteil am Bild. Die Pipette liest ein einzelnes Pixel exakt aus. Hat ein Bild nicht mehr verschiedene Farben, als Sie verlangt haben – etwa ein flächiges Logo –, enthält die Palette genau diese Farben.

Kann ich die Palette in Gestaltungs- oder Präsentationsprogramme übernehmen?

Viele Gestaltungsprogramme importieren .ase-Farbfelddateien. Für Folien ist das Farbfeldbild (.png) die schnellste Vorlage, und der HEX-Wert jeder Farbe lässt sich ins Farbfeld des Programms eintippen. Die CSS-Datei ist für Websites, die JSON-Datei für Entwicklerinnen und Entwickler.

Sind die CMYK-Werte druckfertig?

Nein. Es sind unkalibrierte Näherungen ohne Druckfarben- oder Papierprofil. Für den Druck fragen Sie Ihre Druckerei oder Ihre Gestalterin nach den Werten, die zu Papier und Druckverfahren passen.

Probieren Sie es mit Ihrem Logo: Beginnen Sie mit Ihrem ersten Werkzeug, sehen Sie auf der Preisseite, welche Pläne Farbpipette & Palette enthalten, oder erstellen Sie ein Konto.