oLoveTools
Paletten-Labor

ColorSnap

Hol eine echte Palette aus jedem Bild und korrigiere sie danach von Hand. Die Gruppierung läuft in einem wahrnehmungsgetreuen Farbraum, die Pipette arbeitet pixelgenau, und nichts verlässt jemals deinen Browser.

Nichts läuft, bevor du den Knopf drückstWahrnehmungsgetreues OKLab-ClusteringPipette, Festpinnen und Rückgängig

Bild hierher ziehen oder zum Hochladen klicken

PNG, JPG, WebP, AVIF, GIF, BMP, HEIC, TIFF und SVG — bis 80 MB, im Browser gelesen

Palette

Lade ein Bild, um daraus eine Palette zu bauen.

So funktioniert es

1

Bring ein Bild herein

Zieh es herein, wähl es aus, füg es ein oder schick es aus einem anderen oLoveTools-Werkzeug herüber. Noch läuft nichts.

2

Erst einstellen

Wähle, wie viele Farben du willst, wie tief abgetastet wird und welche Töne ignoriert werden.

3

Extrahieren, wenn du es sagst

Der Median-Schnitt engt das Feld ein, dann verfeinert k-means es in OKLab, wo Abstand dem entspricht, was du siehst.

4

Von Hand korrigieren

Pinne fest, was passt, wirf raus, was nicht passt, und hol dir mit der Pipette, was die Mathematik übersehen hat.

Sieht Farbe wie du

Geclustert wird in OKLab, damit nie zwei optisch identische Blautöne beide durchkommen, während das einzige Orange im Bild rausfliegt.

Pipette mit Lupe

Bis auf den Pixel zoomen, zum Ablesen darüberfahren, klicken zum Behalten. Alt+Klick entfernt das Feld, das dem Zielpunkt am nächsten liegt.

Pinne fest, was schon passt

Sperre ein Feld, und der Rest der Palette baut sich darum herum neu auf, statt von vorn anzufangen und deinen Favoriten zu verlieren.

Lesbarkeit geprüft

Echte WCAG-2.1-Kontrastwerte gegen Weiß, Schwarz und jedes andere Feld, dazu Protan-, Deutan- und Tritan-Simulation.

100% im Browser

Kein Upload, kein Modell von einem CDN, überhaupt kein Netzwerkaufruf. Das Bild bleibt im Tab und ist beim Schließen weg.

Exporte, die man wirklich nutzt

CSS-Custom-Properties, SCSS, ein Tailwind-v4-@theme-Block, JSON, eine GIMP-.gpl-Palette, SVG-Felder und ein PNG-Bogen.

colorsnap

Eine Palette, die zum Bild passt — kein verwaschener Durchschnitt davon

Die meisten Extraktoren schrumpfen dein Foto zum Vorschaubild und zählen Pixel in einem festen Raster; dabei verschmelzen benachbarte Farben und es entstehen Töne, die nie da waren. ColorSnap tastet das Bild in voller Auflösung ab, behält den exakten Mittelwert jedes gefüllten Farbfachs und clustert diese Fächer in OKLab — einem Raum, in dem numerischer Abstand dem wahrgenommenen Unterschied entspricht. Das ist der Unterschied zwischen einer Palette aus vier fast gleichen Blautönen und einer, die das Orange in der Ecke wirklich enthält.

Nichts läuft, bevor du den Knopf drückst
Wahrnehmungsgetreues OKLab-Clustering
Pipette, Festpinnen und Rückgängig
WCAG-Kontrast und Farbsehschwäche-Test
Sieben Exportformate
HEIC, AVIF und TIFF werden auch gelesen

Der schwere Durchlauf läuft abseits des Hauptthreads

Der Pixel-Scan passiert in einem Web Worker auf einem OffscreenCanvas, damit die Oberfläche auch bei einem 50-MP-Foto reagiert. Zurück kommt ein kompaktes Histogramm, und jede spätere Änderung — Palettengröße, Sättigungsschwelle, gepinnte Felder — wird daraus in Millisekunden neu gelöst, ohne das Bild noch einmal anzufassen.

Erst automatisch, manuell wann immer du willst

Eine Datei abzulegen startet nichts: Das Bild wartet, während du die Einstellungen wählst. Du kannst den automatischen Durchlauf auch komplett überspringen und die Palette ab dem ersten Klick von Hand bauen — mit Zoom, Lupe, Festpinnen und Rückgängig. Jede Farbe bleibt danach änderbar, und eine neue Extraktion behält alles Gepinnte.

100% privat, und zwar wörtlich

Kein Upload, keine API, kein von einem CDN geladenes Modell und keine Analyse deines Bildes. Alles — Dekodieren, Abtasten, Clustern, Exportieren — geschieht mit Browser-APIs in deinem Tab. Dein Bild liegt nur im Arbeitsspeicher und ist weg, sobald du die Seite schließt.

Häufige Fragen

QWird mein Bild an einen Server geschickt?+

Nein. Dekodieren, Abtasten und Clustern laufen alle über Canvas- und Web-Worker-APIs in deinem Browser. Es gibt keinen Upload und zu keinem Zeitpunkt eine Netzwerkanfrage, die dein Bild betrifft.

QWelche Formate kann ich öffnen?+

PNG, JPG, WebP, AVIF, GIF, BMP und SVG öffnen nativ. HEIC und HEIF vom iPhone werden im Browser umgewandelt, und TIFF wird ebenfalls lokal dekodiert. Die Grenze liegt bei 80 MB pro Datei. Du kannst ablegen, durchsuchen, aus der Zwischenablage einfügen oder ein Bild aus einem anderen oLoveTools-Werkzeug empfangen.

QWarum wird die Palette nicht sofort beim Ablegen extrahiert?+

Weil die Einstellungen das Ergebnis verändern. Farbanzahl, Abtasttiefe und Sättigungsschwelle prägen, was herauskommt; vorher zu starten verschwendet nur einen Durchlauf. Das Bild wartet, du drückst den Knopf. Und wer den automatischen Durchlauf gar nicht will, geht per Knopf direkt zur Pipette.

QWas bedeutet der Abweichungswert?+

Es ist der mittlere wahrnehmungsbezogene Abstand in OKLab zwischen den Farben deines Bildes und der ihnen jeweils zugewiesenen Palettenfarbe. Unter etwa 3 beschreibt die Palette das Bild originalgetreu; über 6 siehst du nur noch einen groben Eindruck davon. Mehr Farben senken den Wert — die ehrliche Art zu prüfen, ob fünf Felder gereicht haben.

QWas bewirkt das Festpinnen einer Farbe?+

Ein gepinntes Feld gilt als unverrückbar. Wenn du die Palettengröße änderst oder neu extrahierst, bleiben die gepinnten Farben exakt so, wie sie sind, und die übrigen Plätze werden um sie herum neu berechnet — so verlierst du nie das Feld, das dir schon gefiel.

QKann ich direkt in mein Projekt exportieren?+

Ja. CSS-Custom-Properties, SCSS-Variablen samt Map, ein Tailwind-v4-@theme-Block, JSON mit HEX/RGB/HSL/OKLCH und Anteil, eine .gpl-Palette für GIMP, Inkscape und Krita, SVG-Felder, reiner Text und ein PNG-Bogen. Die Variablennamen stammen aus den Farben selbst, du bekommst also --deep-teal statt --color-4.

Verwandte Suchanfragen

colorsnapbild-farbwählerpalette aus bild extrahierendominante farbenhex-farbextraktorcss-paletten-generatoroklab-palettewcag-kontrastprüfertailwind-palettefarbenblindheits-simulator
Teil der oLoveTools-Suite
oLoveTools

Farbpaletten aus jedem Bild extrahieren, von Hand verfeinern und exportieren — komplett im Browser.

© 2026 oLoveToolsÜber uns

Nächster Schritt

Farbe in RGB/HSL umwandeln Hex to RGB

ColorSnap | Farbpaletten aus jedem Bild extrahieren

Extrahiere die dominanten Farben eines Bildes mit wahrnehmungsgetreuem OKLab-Clustering, verfeinere sie von Hand mit der Pipette, prüfe den WCAG-Kontrast und exportiere nach CSS, SCSS, Tailwind, JSON, GIMP oder als PNG-Bogen. Läuft vollständig im Browser.

Häufige Fragen

Wird mein Bild an einen Server geschickt?

Nein. Dekodieren, Abtasten und Clustern laufen alle über Canvas- und Web-Worker-APIs in deinem Browser. Es gibt keinen Upload und zu keinem Zeitpunkt eine Netzwerkanfrage, die dein Bild betrifft.

Welche Formate kann ich öffnen?

PNG, JPG, WebP, AVIF, GIF, BMP und SVG öffnen nativ. HEIC und HEIF vom iPhone werden im Browser umgewandelt, und TIFF wird ebenfalls lokal dekodiert. Die Grenze liegt bei 80 MB pro Datei. Du kannst ablegen, durchsuchen, aus der Zwischenablage einfügen oder ein Bild aus einem anderen oLoveTools-Werkzeug empfangen.

Warum wird die Palette nicht sofort beim Ablegen extrahiert?

Weil die Einstellungen das Ergebnis verändern. Farbanzahl, Abtasttiefe und Sättigungsschwelle prägen, was herauskommt; vorher zu starten verschwendet nur einen Durchlauf. Das Bild wartet, du drückst den Knopf. Und wer den automatischen Durchlauf gar nicht will, geht per Knopf direkt zur Pipette.

Was bedeutet der Abweichungswert?

Es ist der mittlere wahrnehmungsbezogene Abstand in OKLab zwischen den Farben deines Bildes und der ihnen jeweils zugewiesenen Palettenfarbe. Unter etwa 3 beschreibt die Palette das Bild originalgetreu; über 6 siehst du nur noch einen groben Eindruck davon. Mehr Farben senken den Wert — die ehrliche Art zu prüfen, ob fünf Felder gereicht haben.

Was bewirkt das Festpinnen einer Farbe?

Ein gepinntes Feld gilt als unverrückbar. Wenn du die Palettengröße änderst oder neu extrahierst, bleiben die gepinnten Farben exakt so, wie sie sind, und die übrigen Plätze werden um sie herum neu berechnet — so verlierst du nie das Feld, das dir schon gefiel.

Kann ich direkt in mein Projekt exportieren?

Ja. CSS-Custom-Properties, SCSS-Variablen samt Map, ein Tailwind-v4-@theme-Block, JSON mit HEX/RGB/HSL/OKLCH und Anteil, eine .gpl-Palette für GIMP, Inkscape und Krita, SVG-Felder, reiner Text und ein PNG-Bogen. Die Variablennamen stammen aus den Farben selbst, du bekommst also --deep-teal statt --color-4.

Verwandte Suchanfragen

colorsnap, bild-farbwähler, palette aus bild extrahieren, dominante farben, hex-farbextraktor, css-paletten-generator, oklab-palette, wcag-kontrastprüfer, tailwind-palette, farbenblindheits-simulator