So nutzt du: Farbpalette aus Bild
- Wähle ein Bild, zieh es hinein oder füge es ein, oder probiere das Beispielbild aus.
- Stelle ein, wie viele Farben du willst. Aktiviere Fast Weiß und Fast Schwarz ignorieren für Logos und Produktfotos auf einfarbigem Hintergrund.
- Klicke auf ein Farbfeld, um es zu kopieren, oder klicke aufs Bild, um die genaue Farbe eines Pixels zu wählen.
- Exportiere die Palette als CSS-Variablen, Tailwind-Farbkonfiguration, SCSS oder JSON.
So werden die Farben gefunden
Das Bild wird verkleinert, und seine Pixel werden mit k-Means-Clustering nach Farbe gruppiert. Der Algorithmus setzt so viele „Zentren“ wie Farben, die du angefordert hast, ordnet jeden Pixel dem nächsten Zentrum zu, verschiebt jedes Zentrum auf den Durchschnitt seiner Pixel und wiederholt das, bis sich nichts mehr ändert. Jedes Zentrum wird zu einem Farbfeld, und sein Anteil zeigt, wie viel des Bildes es abdeckt. Transparente Pixel werden übersprungen, deshalb funktionieren Logos mit transparentem Hintergrund gut.
Die Palette verwenden
- Wähle eine dominante Farbe für Hintergründe und eine kräftige, kontrastreiche Farbe für Buttons und Links.
- Prüfe Text- und Hintergrundkombinationen mit dem Kontrastprüfer.
- Mache aus einer Farbe eine komplette 50–950-Skala mit dem Tailwind-Farbgenerator oder finde ihren Namen mit dem Farbnamen-Finder.
Dein Bild wird auf deinem Gerät mit einem Canvas verarbeitet und niemals hochgeladen.
Auch gesucht als: farben aus bild extrahieren, bild farbpalette, farbauswahl aus bild, farben aus foto auslesen, farbextraktor, logo farbe finden, palette generator aus foto, hex farbcode aus bild.
Passende Tools zu: Farbpalette aus Bild
- Farbkonverter — Füge eine beliebige CSS-Farbe ein — HEX, rgb(), hsl(), hwb(), oklch() oder einen Namen wie tomato — und erhalte sofort alle anderen Formate sowie eine fertige 50–950-Palette.
- Farbmischer — Wähle zwei Farben und die Anzahl der Schritte, um gleichmäßig gemischte Übergangsfarben zu erhalten — ideal für Verläufe, Rahmen, Diagramme und Hover-Zustände.
- CSS Verlauf Generator — Gestalte einen Verlauf visuell: Farbstopps ziehen, Winkel oder Typ ändern, mit einer Vorlage starten.
- HEX zu RGBA Konverter — Füge einen HEX-Code ein, zieh den Deckkraft-Regler und kopiere das genaue CSS, das du brauchst: klassisches rgba(), modernes rgb( / alpha) oder 8-stelliges HEX.