Bild-Farbpaletten-Extraktor – kostenlos

Beispiel

Klicken Sie unter dem Ablagebereich auf „Beispiel ausprobieren“. Der Datei-Chip zeigt sample-image.png, und der Regler lautet „Anzahl der Farben (6)“. Das Beispiel ist ein Verlauf aus Petrol, Himmelblau und Violett mit einer Reihe pastellfarbener Kreise und dem Wort LibraTool, daher sind die meisten Farbfelder Blautöne. Bei unserem Testlauf begann die Liste mit #189AE3 bei 38.5 %, #0D9CB6 bei 28.7 % und #4C69EB bei 26.1 %, gefolgt von drei kleinen mit 3.1 %, 2.2 % und 1.4 %. Das erste Farbfeld lautet rgb(24, 154, 227) · hsl(202, 81%, 49%) · 38.5 %, und seine Kontrastzeile gibt 6.8:1 für schwarzen Text und 3.1:1 für weißen an. Ziehen Sie den Regler auf 2, und Sie erhalten #238DD7 bei 92.9 % und #ADC0CA bei 7.1 %. Wählen Sie wieder bei 6 unter „Exportieren als“ CSS und klicken Sie auf „Code kopieren“ für einen :root-Block, der mit --color-1: #189ae3 beginnt. „PNG-Streifen herunterladen“ speichert sample-image_palette.png. Ihre Hex-Codes können um einige Stufen abweichen, weil Browser den Text des Beispiels etwas unterschiedlich zeichnen.

Welche Einstellungen zu verwenden sind, und die Grenzen

• Fügen Sie das Bild auf dem schnellsten Weg hinzu. Legen Sie eine Datei im Bereich ab, klicken Sie auf „Dateien durchsuchen“ oder fügen Sie einen Screenshot mit Strg+V ein. Auf Touchscreens sind die Hinweise zum Ablegen und Einfügen ausgeblendet, und „Dateien durchsuchen“ ist der Weg hinein. Akzeptiert werden JPEG, PNG, WebP und GIF, und ein HEIC-Foto vom iPhone wird zuerst mit der Meldung „iPhone-Foto wird konvertiert…“ umgewandelt. „Oder Datei-URL einfügen“ lädt das Bild von einer Adresse, was nur funktioniert, wenn diese Website es erlaubt. Erneutes Einfügen, während ein Bild geöffnet ist, ersetzt es. „Beispiel ausprobieren“ lädt ein Testbild mit 1200 × 800.
• Stellen Sie die „Anzahl der Farben“ mit dem Regler ein. Der Regler reicht von 2 bis 16 und beginnt bei 6, und seine Beschriftung zeigt die Anzahl, etwa „Anzahl der Farben (6)“. Niedrige Anzahlen ergeben die grobe Palette, höhere erfassen kleine Akzente. Sie sehen unter Umständen weniger Farbfelder, als der Regler angibt, weil Farben, die auf denselben Hex-Wert runden, zusammengeführt und leere Gruppen verworfen werden. Dasselbe Bild und dieselbe Anzahl ergeben immer dieselbe Palette, da die Suche von einem festen Startwert ausgeht. Jedes Farbfeld zeigt seinen Anteil am Bild, etwa 38.5 %, und der größte Anteil steht zuerst.
• Denken Sie daran, dass Farbfelder Durchschnittswerte sind. Das Bild wird auf höchstens 200 px an der längsten Seite verkleinert, überwiegend durchsichtige Pixel (Alpha unter 128) werden ignoriert, und die übrigen werden über bis zu 20 Durchläufe nach Abstand im RGB-Raum gruppiert. Jedes Farbfeld ist der Durchschnitt einer Gruppe. Das heißt, es muss nirgends genau so in Ihrem Bild vorkommen, und ein schmaler Akzent kann in eine Nachbargruppe eingemischt werden. Wenn Sie eine exakte Farbe brauchen, klicken Sie auf das Bild, statt sich auf ein Farbfeld zu verlassen.
• Klicken Sie auf das Bild, um ein exaktes Pixel zu wählen. Unter dem Bild steht „Klicken Sie auf das Bild, um eine Pixelfarbe aufzunehmen“. Jeder Klick liest ein Pixel aus dem Bild in voller Größe, nicht aus der verkleinerten Kopie, auch wenn die Vorschau kleiner als das Original ist oder leere Ränder hat. Aufgenommene Farben erscheinen als Chips mit dem Hex-Code. Klicken Sie auf einen Chip, um ihn zu kopieren, oder auf das ×, um ihn zu entfernen. Eine bereits aufgenommene Farbe wird nicht doppelt hinzugefügt, nur die letzten 12 bleiben erhalten, und Klicks auf den Rand bewirken nichts. Aufgenommene Farben sind von den Farbfeldern getrennt und nicht Teil der Exporte.
• Nutzen Sie die Kontrastzeile, um eine Textfarbe zu wählen. Unter jedem Farbfeld gibt die Kontrastzeile das Verhältnis für schwarzen und für weißen Text auf dieser Farbe an, auf eine Dezimalstelle. Die Verhältnisse verwenden die WCAG-Formel für die relative Luminanz. Der Farbpaletten-Generator der Website stuft 4.5:1 als AA ein; betrachten Sie das also als Untergrenze für Fließtext. Im Beispiel erreicht #4C69EB 4.5:1 mit Schwarz und 4.6:1 mit Weiß, keines von beiden ist also komfortabel, während #DAEFFB mit Schwarz 17.7:1 erreicht.
• Wählen Sie den Export, der zu Ihrem Code passt. Wählen Sie unter „Exportieren als“ CSS, Tailwind, SCSS oder JSON, prüfen Sie das Vorschaufeld und klicken Sie dann auf „Code kopieren“. CSS liefert :root-Variablen mit den Namen --color-1 aufwärts, SCSS liefert $color-1 aufwärts und Tailwind palette-1 aufwärts, alle mit Hex in Kleinbuchstaben. JSON liefert jede Farbe als Hex in Großbuchstaben, RGB-Zahlen und den Anteil auf eine Dezimalstelle. „Gesamte Palette kopieren“ kopiert die Hex-Codes mit Kommas. „PNG-Streifen herunterladen“ speichert ein Bild von 1000 × 200, in dem jede Farbe so breit ist wie ihr Anteil, mit einem Namen wie photo_palette.png.

Häufige Probleme und wie man sie behebt

Es heißt: „Das Bild konnte nicht geladen werden. Die Datei ist möglicherweise beschädigt oder in einem nicht unterstützten Format.“

Der Browser hat die Datei angenommen, konnte sie aber nicht als Bild dekodieren. Übliche Ursachen sind eine beschädigte oder halb heruntergeladene Datei oder ein Bild, das Ihr Browser nicht zeichnen kann. Öffnen Sie das Original in einem anderen Programm, speichern oder exportieren Sie es erneut als JPEG oder PNG und fügen Sie dann die neue Datei hinzu. Die Liste der Farbfelder bleibt leer, solange diese Meldung angezeigt wird.

Es heißt: „report.pdf ist eine PDF-Datei, die dieses Tool nicht öffnen kann.“ (mit Ihrem eigenen Dateinamen und -typ).

Der Ablagebereich liest die ersten Bytes einer Datei, daher hilft es nicht, ein PDF in .jpg umzubenennen. Dieses Tool öffnet JPEG, PNG, WebP, GIF und HEIC-Fotos vom iPhone. AVIF-, BMP-, TIFF- und SVG-Dateien werden abgelehnt. Eine nicht identifizierbare Datei erhält „Dateityp nicht unterstützt“ und ihren Namen. Konvertieren Sie das Bild zuerst in JPEG oder PNG. Nach der Meldung kann ein Link zu einem Tool folgen, das die Datei öffnet. Eine Datei mit 0 Bytes, oft ein Platzhalter von OneDrive oder iCloud, erhält eine eigene Meldung, die Sie bittet, sie zuerst herunterzuladen.

Es heißt: „Diese Website erlaubt anderen Websites nicht, ihre Dateien herunterzuladen. Laden Sie die Datei zuerst auf Ihr Gerät herunter und legen Sie sie dann hier ab.“

Das erscheint nach „Oder Datei-URL einfügen“ und „Abrufen“. Ihr Browser fragt die andere Website nach dem Bild, und die meisten Websites erlauben einer anderen Website nicht, ihre Dateien herunterzuladen. Speichern Sie das Bild auf Ihrem Gerät und legen Sie es stattdessen im Bereich ab. Eine andere Meldung, „Der Link hat einen Fehler zurückgegeben (HTTP 404)“ mit Ihrer eigenen Statusnummer, bedeutet, dass die Adresse selbst fehlgeschlagen ist; prüfen Sie sie also oder speichern Sie die Datei und legen Sie sie hier ab.

Der Regler sagt „Anzahl der Farben (12)“, aber es erscheinen weniger Farbfelder.

Farben, die auf denselben Hex-Wert runden, werden zusammengeführt, und leere Gruppen werden verworfen; flache Bilder wie Logos, Screenshots und einfache Grafiken ergeben daher weniger Farbfelder, als der Regler verlangt. Es ist nichts falsch. Überwiegend durchsichtige Pixel werden ebenfalls ignoriert, und ein Bild, das vollständig durchsichtig ist, ergibt gar keine Farbfelder. Für eine schlichtere Palette verringern Sie den Regler. Für feinere Abstufungen erhöhen Sie ihn bei einem Foto bis auf 16.

Es heißt: „Konnte nicht in die Zwischenablage kopiert werden.“

Der Browser hat das Kopieren abgelehnt, was passieren kann, wenn die Seite nicht sicher ist, in einem Frame angezeigt wird oder der Browser den Zugriff auf die Zwischenablage blockiert hat. Die Meldung bleibt, bis Sie den Regler bewegen oder ein anderes Bild laden. Klicken Sie einmal auf die Seite und versuchen Sie es erneut. Schlägt es weiterhin fehl, markieren Sie den Text im Vorschaufeld unter „Exportieren als“ und kopieren Sie ihn von Hand, oder speichern Sie die Palette mit „PNG-Streifen herunterladen“ stattdessen als Bild.

Wie es im Vergleich abschneidet

Die Pipette einer Design-App liest exakte Pixel, und dieses Tool tut das bei jedem Klick. Hinzu kommt die Liste der dominanten Farben, die durch Gruppieren der Farben des ganzen Bilds ermittelt wird. Es verwendet das ganze Bild, daher dominiert ein großer Hintergrund die Liste, und es gibt keine Möglichkeit, einen Bereich auszuwählen oder zuerst den Hintergrund zu entfernen. Es arbeitet mit einer Kopie von höchstens 200 px, benennt keine Farben und sortiert nicht nach Farbton. Die Farben bleiben auf Ihrem Gerät, da das Bild im Browser gelesen wird. Um eine Palette aus einer einzelnen Farbe statt aus einem Foto zu erstellen, verwenden Sie den Farbpaletten-Generator.