Tool wird geladen…

Die Farben aus jedem Bild holen

Ein schönes Foto, ein Logo oder ein Screenshot einer Website, die dir gefällt, ist oft der schnellste Weg zu einem Farbschema. Zieh ein Bild hinein, und QodeCat zeigt seine dominanten Farben als Farbfelder – sortiert danach, wie viel des Bildes sie bedecken.

  • 5 bis 10 Farben: Wähle mit dem Schieberegler, wie viele dominante Farben du möchtest.
  • Alle Formate: Jedes Farbfeld zeigt HEX, RGB und HSL; ein Klick auf einen Wert kopiert ihn.
  • Anteil in Prozent: Sieh, wie viel des Bildes jede Farbe einnimmt.
  • Bereit für Code: Kopiere die ganze Palette als CSS Custom Properties oder als JSON.

Warum dieses Tool?

Echte dominante Farben statt zufälliger Pixel

Das Tool gruppiert ähnliche Pixel mit dem Median-Cut-Verfahren und verfeinert die Gruppen mit k-means. So ist jedes Farbfeld der Durchschnitt eines ganzen Bildbereichs und nicht ein einzelnes Pixel. Transparente Pixel werden ignoriert.

Privat und schnell

Das Bild wird lokal in deinem Browser analysiert, auf einer Kopie mit höchstens 200 Pixeln Kantenlänge. Nichts wird hochgeladen, und die Palette aktualisiert sich sofort, wenn du die Anzahl der Farben änderst.

Häufig gestellte Fragen

F. Wie werden die Farben ausgewählt?

Die Pixel werden in Gruppen ähnlicher Farben aufgeteilt (Median Cut) und jede Gruppe wird mit einigen k-means-Durchläufen verfeinert. Jedes Farbfeld ist die Durchschnittsfarbe einer Gruppe, sortiert nach ihrem Anteil am Bild.

F. Warum bekomme ich manchmal weniger Farben als gewählt?

Enthält das Bild weniger unterschiedliche Farben als gewählt, etwa ein flaches Logo mit drei Farben, gibt das Tool nur die tatsächlich vorhandenen Farben zurück, statt fast identische zu erfinden.

F. Wie sieht der CSS-Export aus?

Ein :root-Block mit einer Custom Property pro Farbe, beginnend mit --color-1 (der häufigsten), mit HEX-Werten. Der JSON-Export listet für jede Farbe HEX, RGB, HSL und den Anteil in Prozent.