Farbpipette für Bilder: Farbcode und Farbpalette aus Bild
Klick irgendwo ins Bild, um die genaue Farbe zu bekommen. Die Palette darunter passt sich jedem Bild an. Öffne, zieh oder füge dein eigenes Bild ein, es verlässt deinen Browser nie.
Beispiel: ein Landingpage-Design
Farbe unter dem Cursor
#000000rgb(0, 0, 0)hsl(0, 0%, 0%)Aufgenommene Farben
Klick ins Bild, um hier Farben zu sammeln.
Farbpalette aus diesem Bild
Palette wird geladen...So bestimmst du eine Farbe aus einem Bild
- Öffne ein Bild, zieh es hierher oder füge es ein. Ein Screenshot, den du mit dem Tastenkürzel deines Systems kopiert hast, lässt sich direkt einfügen.
- Fahr über das Bild. Die Lupe zeigt die Pixel rund um den Cursor, so triffst du auch einen ein Pixel breiten Rahmen.
- Klick (oder tipp), um die Farbe aufzunehmen. HEX, RGB und HSL erscheinen rechts mit Kopier-Buttons, und die Farbe landet unter Aufgenommene Farben.
Mit der Tastatur: Bild mit Tab fokussieren, mit den Pfeiltasten bewegen (Shift springt 10 Pixel) und mit Enter aufnehmen.
Eine Farbpalette aus einem Bild erstellen
Die Palette fasst ähnliche Pixel zusammen und zeigt die häufigsten Farben zuerst, jeweils mit dem Anteil am Bild. Wähl zwischen 3 und 12 Farben: Weniger liefert die Markenfarben, mehr bringt auch Rahmen und Schatten zum Vorschein. Kopier sie als :root-CSS-Variablen, als Tailwind-Block theme.extend.colors oder als einfache Liste von HEX-Codes.
Beispiele
- Markenfarben aus einem Screenshot übernehmen. Mit dem Beispielbild oben und 6 Farben liefert die Palette den Lavendel-Hintergrund (
#f2f1fd, 73 % der Pixel), das Weiß der Karten (#fcfcfd), zwei helle Grautöne für Rahmen und Logos, das Violett der Buttons (#6049f0) und den dunklen Text (#3c3b62): genau das Set, das du für ein Stylesheet brauchst. - Kontrast prüfen. Nimm die Textfarbe und den Hintergrund darunter auf und vergleiche beide HEX-Werte in einem Kontrast-Checker, bevor du live gehst.
- Ein Theme aus einem Foto bauen. Zieh ein Produktfoto hierher, stell 5 Farben ein und füg den Tailwind-Block in deine Config ein, um eine Landingpage darauf abzustimmen.
Fragen zur Farbpipette
Wird mein Bild hochgeladen?
Nein. Das Bild wird in deinem Browser auf ein Canvas gezeichnet und jedes Pixel lokal ausgelesen. Nichts verlässt dein Gerät, deshalb funktioniert es auch mit vertraulichen Mockups.
Warum weicht die Farbe leicht von meinem Design-Tool ab?
Die Kompression von JPG und WebP verändert Pixelwerte ein wenig, und Screenshots können ein anderes Farbprofil haben als die Originaldatei. Für exakte Markenfarben nimm die Farbe aus einem PNG-Export des Designs auf.
Wie wird die Palette berechnet?
Das Bild wird auf etwa 160 Pixel an der längsten Seite verkleinert, und die Farben werden per k-means-Clustering gruppiert. Jedes Farbfeld ist der Mittelwert einer Gruppe, der Prozentwert ist ihr Anteil an den Pixeln. Dasselbe Bild ergibt immer dieselbe Palette.
Welche Bildformate funktionieren?
Alles, was dein Browser anzeigen kann: PNG, JPG, WebP, GIF (erstes Bild), AVIF und SVG. Du kannst auch einen Screenshot direkt aus der Zwischenablage einfügen.
Kann ich die Palette in Tailwind CSS verwenden?
Ja. Der Tab Tailwind liefert dir einen Block theme.extend.colors. Füg ihn in tailwind.config.js ein und nutze Klassen wie bg-palette-100 oder text-palette-300.