Was ist eine Farbpalette?
Eine Farbpalette ist die kleine Gruppe von Farbtönen, die das Aussehen eines Bildes oder einer Marke bestimmt. Wenn du die Palette aus einem Foto extrahierst, kannst du genau diese Farben wiederverwenden – in einem Design, auf einer Website, in einer Präsentation oder bei der Einrichtung eines Raums – für ein stimmiges, harmonisches Ergebnis.
Designer, Webentwickler, Content-Creator und alle, die Farben sicher kombinieren wollen, nutzen solche Tools täglich: um die Identität eines Projekts aus einem inspirierenden Foto abzuleiten, eine Website an die Farben eines Logos anzupassen oder einfach den Code einer bestimmten Farbe herauszufinden.
So extrahierst du die Farben aus einem Bild
- Füge das Bild hinzu, indem du es in den Bereich oben ziehst, auswählst oder mit Strg+V einfügst.
- Sieh dir die Palette an: Die dominanten Farben erscheinen, sortiert nach ihrem Anteil am Bild.
- Stelle die Anzahl der Farben ein – mit dem Schieberegler zwischen 3 und 12.
- Klicke auf eine Farbe, um ihren HEX-Code zu kopieren. Du kannst auch die ganze Palette kopieren, sie als CSS-Variablen kopieren oder als PNG-Bild herunterladen.
- Nutze die Pipette: Klicke auf eine beliebige Stelle im Bild, um die exakte Farbe dieses Pixels zu erhalten.
Wie die Farben berechnet werden
Pasafoto analysiert die Pixel des Bildes und wendet den Median-Cut-Algorithmus an – dieselbe Idee, mit der viele Bildbearbeitungsprogramme Farben reduzieren. Ähnliche Töne werden gruppiert und jede Gruppe gemittelt, sodass die Palette die tatsächlich im Foto vorhandenen Farben und ihren Anteil widerspiegelt. Transparente Bereiche werden ignoriert, daher funktioniert es gut mit PNG-Logos.
HEX, RGB und CSS
- HEX (#1E40AF): das im Webdesign und in Tools wie Figma oder Canva am häufigsten genutzte Format.
- RGB (rgb(30, 64, 175)): der Anteil von Rot, Grün und Blau, jeweils von 0 bis 255.
- CSS-Variablen: Der Button „CSS kopieren“ erzeugt einen
:root-Block, den du direkt in dein Stylesheet einfügen kannst.
Privat und kostenlos
Das Bild wird in deinem Browser analysiert und nie auf einen Server hochgeladen. Du kannst es ganz beruhigt mit vertraulichen Designs, privaten Fotos oder Kundenmaterial nutzen.
Ideen für deine Palette
Eine klassische Designregel ist 60-30-10: eine dominante Farbe für 60 % der Fläche (Hintergründe), eine sekundäre für 30 % (Blöcke, Karten) und eine Akzentfarbe für 10 % (Buttons, Links). Extrahiere 5 oder 6 Farben aus einem Foto, das dich inspiriert, und verteile die Rollen so. Prüfe auch den Kontrast zwischen Text und Hintergrund, damit alles lesbar bleibt: Sehr helle Farben eignen sich als Hintergrund, dunkle als Text. Wenn du von einem Logo ausgehst, extrahiere nur 3 oder 4 Farben, um die exakten Markenfarben zu bekommen.
Häufige Fragen
Wie bekomme ich den Farbcode aus einem Bild?
Füge das Bild hinzu und klicke auf die gewünschte Stelle: Die Pipette zeigt dir den HEX- und RGB-Code und kopiert ihn in die Zwischenablage.
Wie viele Farben kann ich extrahieren?
Zwischen 3 und 12. Bewege den Schieberegler, und die Palette wird sofort neu berechnet.
Was bedeutet der Prozentwert jeder Farbe?
Er gibt ungefähr an, welchen Anteil des Bildes diese Farbgruppe einnimmt.
Kann ich die Palette in Canva, Figma oder CSS nutzen?
Ja. Kopiere die HEX-Codes für Canva oder Figma, oder nutze „CSS kopieren“, um fertige Variablen für deine Website zu erhalten.
Funktioniert es mit transparenten Logos?
Ja, transparente Pixel werden ignoriert und nur die sichtbaren Farben analysiert.
Wird mein Bild ins Internet hochgeladen?
Nein. Die Analyse läuft in deinem Browser, und das Bild verlässt nie dein Gerät.