Farbpalette aus Bild erstellen.

Wähle ein Bild aus und erhalte seine Hauptfarben als HEX-Codes, die häufigste zuerst, fertig zum Kopieren. Das Tool läuft in deinem Browser, dein Bild verlässt also nie dein Gerät.

Bild auswählenoder hierher ziehen

Anzahl der Farben

Wähle ein Bild aus, um seine Hauptfarben zu sehen.

Läuft in deinem Browser. Nichts, was du hier hinzufügst, wird hochgeladen oder gespeichert.

So extrahierst du Farben aus einem Bild

Wähle ein Bild aus oder zieh es auf das Feld oben: ein Foto, einen Screenshot eines Designs, das dir gefällt, ein Logo oder ein Mockup.
Leg die Anzahl der Farben fest, von 5 bis 8. Voreingestellt sind 6.
Lies die Palette ab. Die Hauptfarben stehen nach Häufigkeit sortiert da, jede mit ihrem Anteil am Bild und ihrem HEX-Code.
Kopiere einen einzelnen HEX-Code oder alle auf einmal als kommagetrennte Liste. Klick auf das Bild, um ein anderes auszuprobieren.

Von der Palette über die DESIGN.md zu Codex

Eine Liste von Farben sagt Codex nicht, welche Farbe wohin gehört. Gib jeder Farbe eine Aufgabe und schreib sie einmal fest, dann verwendet jeder Screen, den Codex gestaltet, dieselbe Palette:

Extrahiere die Farben aus deiner Referenz: einem Stimmungsfoto, einem Markenbild oder einem Screenshot einer Designrichtung, die dir gefällt.
Gib jeder Farbe eine Rolle. Die Anteile helfen dabei: Eine große, helle Farbe wird meist zum Hintergrund (neutral), eine dunkle zur Textfarbe (on-surface), eine kräftige zur Farbe für Hauptaktionen (primary) und ein kleiner Akzent zur secondary- oder tertiary-Farbe.
Prüf die Textkombinationen im Kontrast-Checker. Farben, die direkt aus einem Foto stammen, müssen oft etwas dunkler oder heller werden, bevor Text darauf gut lesbar ist.
Füg die HEX-Codes in den DESIGN.md-Generator ein, ergänze deine Schriften und Abstände und speichere die Datei im Stammverzeichnis deines Projekts.
Verweis Codex darauf, und zwar aus der AGENTS.md, wie es die DESIGN.md-Anleitung zeigt. Ab dann verwendet Codex diese Farben, statt für jeden Screen neue auszusuchen.

Wenn du die Rollen lieber von Codex vergeben lässt, füg die Codes in einen Prompt ein:

Palette in die DESIGN.md

Das sind die Hauptfarben unseres Referenzbildes: [HEX-Codes einfügen]. Ordne sie den DESIGN.md-Farbrollen primary, on-primary, secondary, tertiary, neutral, surface und on-surface zu. Achte darauf, dass on-primary auf primary sowie on-surface auf surface und auf neutral mindestens ein Kontrastverhältnis von 4,5:1 erreichen; wo nicht, passe die Helligkeit an und behalte den Farbton bei. Schreib die Farben dann in die DESIGN.md im Stammverzeichnis des Repositorys.

Häufige Fragen

Ist das Tool kostenlos?

Ja. Es ist kostenlos, ohne Anmeldung und ohne Limit, wie viele Bilder du ausprobierst.

Wird mein Bild hochgeladen?

Nein. Dein Browser liest und analysiert das Bild auf deinem Gerät, und es wird nirgendwohin gesendet oder gespeichert. Die Website zählt nur, dass das Tool benutzt wurde, nie das Bild selbst.

Wie wählt das Tool die Farben aus?

Es verkleinert das Bild auf höchstens 160 Pixel an der längsten Seite, was für Farben völlig reicht. Dann fasst es ähnliche Pixel zu Gruppen zusammen und gibt für jede Gruppe die Durchschnittsfarbe und ihren Anteil am Bild aus. Ein kleiner Akzent bekommt einen eigenen Eintrag, wenn er sich deutlich vom Rest unterscheidet und mindestens 0,5 % des Bildes ausmacht; die gemischten Pixel an Kanten dagegen nicht. Transparente Bereiche werden ignoriert, und dasselbe Bild ergibt immer dieselbe Palette.

Warum bekomme ich weniger Farben, als ich eingestellt habe?

Das Bild hat nicht so viele deutlich unterschiedliche Farben. Ein flaches Logo mit wenigen Farben kann weniger ergeben, als du eingestellt hast.