Farbpaletten-Generator.

Starte mit einer Farbe, die du schon hast, oder mit einer zufälligen und erhalte fünf Farben, die zusammenpassen: primary, secondary, tertiary, neutral und surface. Sperre die, die dir gefallen, und generiere für den Rest neu. Das Tool läuft in deinem Browser, und nichts, was du auswählst, wird hochgeladen.

Mit einer Farbe startenHarmonie

Drücke die Leertaste, um eine neue Palette zu generieren.

primary#A8401Foklch(0.51 0.145 37.449)
secondary#008FAAoklch(0.6 0.145 217.449)
tertiary#E5A155oklch(0.76 0.123 67.449)
neutral#62514Boklch(0.45 0.025 37.449)
surface#FFF4F1oklch(0.975 0.012 37.449)

#A8401F
#008FAA
#E5A155
#62514B
#FFF4F1

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

So erzeugst du eine Farbpalette

Starte mit einer Farbe. Wähle sie über das Farbfeld oder gib sie als HEX, rgb(), hsl() oder oklch() ein. Sie wird zur Farbe primary. Oder klick auf Generieren, um mit einer zufälligen Farbe zu starten, die weder stumpf noch grell ist.
Wähle eine Harmonie: analog, komplementär, triadisch, geteilt komplementär oder monochrom. Sie bestimmt, welche Farbtöne die Farben secondary und tertiary bekommen.
Generiere erneut mit dem Button oder mit der Leertaste, wenn kein Feld ausgewählt ist, für eine neue Variante. Farben, die du nicht gesperrt hast, ändern sich. Ist primary nicht gesperrt, wählt Generieren auch eine neue zufällige Startfarbe, sperr es also, um deine zu behalten.
Sperr, was dir gefällt. Das Schloss an jedem Farbfeld behält diese Farbe bei jedem weiteren Generieren, sodass du die Palette Farbe für Farbe aufbauen kannst.
Kopier das Ergebnis. Jedes Farbfeld zeigt seine Rolle, seinen HEX-Code und seinen OKLCH-Wert, mit einem Button zum Kopieren des HEX-Codes. Unter den Farbfeldern enthalten die drei Export-Tabs die ganze Palette in dem Format, das du brauchst.

Die fünf Farben

primary ist deine Startfarbe.
secondary und tertiary sind Akzente, deren Farbtöne die Harmonie festlegt. Secondary hat eine mittlere Helligkeit, tertiary ist heller. Bei monochrom sind es eine dunklere und eine hellere Abstufung deiner Farbe.
neutral ist ein dunkles Grau mit einem Hauch vom Farbton deiner Farbe, für Sekundärtext und Bildunterschriften.
surface ist ein fast reines Weiß mit demselben Hauch Farbton, für Hintergründe.

Das kannst du kopieren

HEX: die fünf Codes, einer pro Zeile, in der Reihenfolge von oben.
Tailwind v4 @theme: ein @theme-Block, der --color-primary, --color-secondary, --color-tertiary, --color-neutral und --color-surface als oklch()-Werte definiert. Füge ihn in deine CSS-Datei ein und verwende Klassen wie bg-primary und text-neutral. Nutzt dein Projekt shadcn/ui, das einige dieser Namen schon definiert, nimm stattdessen den shadcn-Theme-Generator.
DESIGN.md-Farben: ein colors:-Block mit den fünf Rollen als HEX-Codes, für das Frontmatter einer DESIGN.md.

Mit Codex verwenden

Eine Palette hilft Codex nur, wenn sie dort steht, wo Codex nachsieht. Die DESIGN.md kennt sieben Farbrollen, zwei mehr, als dieses Tool erzeugt: on-primary, die Textfarbe auf primary, und on-surface, die Hauptfarbe für Text. So vervollständigst du das Set:

Kopier die DESIGN.md-Farben in deine DESIGN.md oder füge die fünf HEX-Codes in den DESIGN.md-Generator ein. Der Generator fragt außerdem nach on-primary und on-surface und nennt jedes Farbpaar mit einem Kontrast unter 4,5:1.
Prüf die Kombinationen, die du für Text verwenden willst, im Kontrast-Checker.
Verweise in der AGENTS.md auf die Datei, wie die Anleitung zu DESIGN.md zeigt.

Wenn Codex das Set lieber selbst vervollständigen soll, füge die Codes in einen Prompt ein:

Palette zur DESIGN.md

Das sind die Farben, die ich ausgewählt habe: primary [HEX], secondary [HEX], tertiary [HEX], neutral [HEX] und surface [HEX]. Schreib sie in den Farbabschnitt der DESIGN.md im Stammverzeichnis des Repositorys. Ergänze on-primary und on-surface und wähle für beide Weiß oder fast Schwarz, sodass on-primary auf primary und on-surface auf surface mindestens 4,5:1 Kontrast erreichen. Wenn ein Paar das nicht schafft, ändere meine Farben nicht; sag mir, welches Paar durchfällt und mit welcher kleinsten Änderung es besteht. Gestalte danach den Screen [Start] nur mit diesen Farben und liste alles auf, was du sonst noch gebraucht hast.

Häufige Fragen

Ist das Tool kostenlos?

Ja. Es ist kostenlos, braucht keine Anmeldung, und du kannst beliebig viele Paletten generieren.

Werden meine Farben hochgeladen?

Nein. Die Palette entsteht in deinem Browser und wird nirgendwo gesendet oder gespeichert, kopiere also, was du behalten willst, bevor du die Seite verlässt. Die Website zählt nur, dass das Tool verwendet wurde, nie die Farben.

Wie entsteht die Palette?

Das Tool arbeitet in OKLCH, einem Farbraum, in dem gleiche Helligkeitsschritte gleich verschieden aussehen. Deine Startfarbe wird zu primary, und die Harmonie bestimmt, wie weit die Farbtöne von secondary und tertiary davon entfernt liegen: 30° nach beiden Seiten bei analog, 180° und 30° bei komplementär, 120° und 240° bei triadisch, 150° und 210° bei geteilt komplementär und keine Verschiebung bei monochrom. Die Akzente übernehmen ungefähr das Chroma deiner Farbe, innerhalb gewisser Grenzen: Ein gedämpfter Start ergibt also gedämpfte Akzente. Die anderen vier Farben variieren außerdem bei jedem Mal ein wenig in Helligkeit und Chroma, sodass dieselbe Startfarbe mit derselben Harmonie bei jedem Generieren eine neue Variante ergibt.

Prüft das Tool den Kontrast?

Nein. Es prüft nicht, wie gut lesbar eine Palettenfarbe auf einer anderen ist. Teste die Kombinationen, die du für Text verwendest, im Kontrast-Checker, bevor du dich auf sie festlegst.