Palette Generator: Farbschemata erstellen

Was ist Palette Generator?

Demnächst verfügbar: Palette Generator ist ein browserseitiges Werkzeug, das Farbtheorie-Algorithmen nutzt, um mathematisch ausgewogene Farbpaletten aus einer einzigen Basisfarbe zu erzeugen. Das Tool bietet drei Modi: Harmonie (mit 11 Harmonietypen, darunter komplementär, analog, triadisch, tetradisch, split-komplementär, monochromatisch, doppelt-split-komplementär, Rechteck, Clash, Fünf-Ton und Sechs-Ton), Generieren (mit Schattierungen/Tönen, eingeschränktem Zufall, WCAG-Kontrastpaaren, Verlaufsinterpolation und Bildfarbextraktion) und Stimmung (mit 20 stimmungsbasierten Presets). Das Ergebnis ist eine Palette, die Sie als Hex-Werte kopieren, als CSS-Variablendatei, als JSON-Objekt, als SCSS-Variablen oder als Tailwind-Konfigurationserweiterung herunterladen oder als Adobe Swatch Exchange (ASE)-Datei exportieren können. Alles läuft im Browser — keine Daten werden an einen Server gesendet.

Hauptfunktionen

• Komplementäre Farbschemata: Erzeugt eine Zwei-Farben-Palette mit Farben, die sich direkt gegenüber auf dem Farbkreis befinden (180° voneinander entfernt), und produziert maximalen Kontrast mit inhärentem visuellen Gleichgewicht.
• Analoge Farbpaletten: Erzeugt drei Farben, die auf dem Farbkreis nebeneinander liegen, und schafft harmonische, kontrastschwache Paletten, die gut für Hintergründe und ruhige UI-Designs geeignet sind.
• Triadische und tetradische Harmonien: Triadisch verwendet drei gleichmäßig auf 120°-Intervalle verteilte Farben; tetradisch verwendet vier Farben in 90°-Intervallen. Beide bieten reichhaltige Mehrfarbenoptionen bei gleichzeitiger Beibehaltung der Harmonie.
• Split-komplementäre Schemata: Eine weichere Alternative zu komplementär — nimmt die Basisfarbe und zwei Farben, die dem Komplement benachbart sind, anstatt das Komplement selbst. Im Komponent als Harmonietyp 'split-complementary' verifiziert.
• Monochrome Variationen: Erzeugt mehrere Schattierungen desselben Farbtons durch Helligkeitsvariation und schafft kohärente Ein-Ton-Paletten.
• Sättigung und Helligkeit anpassen: Die Basisfarbe akzeptiert jeden gültigen HEX-Wert, der manuell eingegeben, über ein Farbauswahl-Widget gewählt oder zufällig mit dem Zufallsbutton generiert wird.
• Farben in mehreren Formaten kopieren: Jede Farbe in der Palette hat ihre eigene Kopiertaste. Die Schaltfläche „Alle kopieren" schreibt die gesamte Palette als kommagetrennte HEX-Werte und zeichnet die Aktion im Sitzungsverlauf auf.
• Palette als JSON, CSS, SCSS, Tailwind oder ASE exportieren: Fünf Exportformate sind direkt aus dem Tool verfügbar und decken Webentwicklung, Stylesheet-Präprozessoren und Adobe-Designanwendungen ab.

So verwenden Sie Palette Generator

Schritt 1: Basisfarbe wählen

Öffnen Sie Demnächst verfügbar: Palette Generator. Das Tool lädt mit einer Standardbasisfarbe, die aus Ihrem aktuellen Website-Farbschema abgeleitet wird (das Standardschema verwendet Blau). Ändern Sie sie auf drei Arten:

• Klicken Sie auf die Farbfeld-Eingabe (ein nativer Browser-Farbwähler öffnet sich)
• Geben Sie einen HEX-Wert direkt in das Textfeld neben dem Farbfeld ein oder fügen Sie ihn ein
• Klicken Sie auf die Schaltfläche „Zufällig", um eine zufällige HEX-Farbe zu generieren

Eine große Vorschaufläche wird in Echtzeit aktualisiert und zeigt Ihre Basisfarbe mit ihrem Hex-Wert in kontrastierendem Text.

Schritt 2: Harmonietyp auswählen

Unterhalb des Basisfarbenbereichs werden elf Harmonietyp-Schaltflächen in einem Raster angezeigt. Klicken Sie auf eine, um sie auszuwählen:

Die aktive Harmonietyp-Schaltfläche wird in der Primärfarbe hervorgehoben. Die generierte Palette aktualisiert sich bei jeder Auswahländerung sofort.

Schritt 3: Generierte Palette prüfen

Der Abschnitt „Generierte Palette" zeigt zwei Ansichten des Ergebnisses:

• Ein horizontales Band von Farbblöcken, die jeweils proportionale Breite ausfüllen. Klicken Sie auf einen Block, um den HEX-Wert dieser Farbe direkt zu kopieren.
• Eine Liste unterhalb des Bandes, die den HEX-Code jeder Farbe mit einem Farbfeld und ihrer eigenen Kopiertaste zeigt. Der erste Eintrag ist als Basisfarbe gekennzeichnet.

Als Beispiel erzeugt #e63946 mit triadischer Harmonie:

#e63946  (Basis)
#46e639
#3946e6

Schritt 4: Kopieren oder exportieren

Verwenden Sie die Exportschaltflächen, um die Palette für Ihren Arbeitsablauf zu speichern:

• JSON exportieren: Lädt triadic-palette.json herunter, das { baseColor, harmonyType, palette } enthält.
• CSS exportieren: Lädt triadic-palette.css als :root CSS-Custom-Properties herunter: --color-1, --color-2 usw.
• Tailwind JS exportieren: Lädt triadic-tailwind.js mit einem Tailwind-Config-theme.extend.colors-Block herunter, der palette als Farbfamilienschlüssel mit Einträgen wie color-1, color-2 usw. verwendet.
• SCSS-Variablen exportieren: Lädt triadic-palette.scss mit $color-1, $color-2 usw. sowie einer Sass-Map herunter.
• ASE exportieren (Premium): Lädt eine binäre Adobe Swatch Exchange-Datei herunter, die von Photoshop, Illustrator und anderen Adobe-Anwendungen gelesen werden kann.

Schritt 5: Als Preset speichern oder zurücksetzen

Wenn Sie diese Kombination aus Basisfarbe und Harmonietyp regelmäßig verwenden, nutzen Sie das Presets-Panel (Glyph Widgets Supporter-Funktion), um sie namentlich für den Einzel-Klick-Abruf zu speichern. Um die Standardeinstellungen wiederherzustellen, klicken Sie auf die Schaltfläche „Zurücksetzen" — dies setzt auf die Basisfarbe #8467c7 und den komplementären Harmonietyp zurück.

Praktische Beispiele

Farbsystem für eine Landingpage entwerfen

Beginnen Sie mit Ihrer primären Markenfarbe, zum Beispiel #0f62fe (IBM Blau). Wählen Sie die split-komplementäre Harmonie für eine weichere Kontrastpaarung. Das Ergebnis gibt Ihnen ein primäres Blau plus zwei warme Akzentoptionen, die zusammenarbeiten, ohne zu kollidieren. Exportieren Sie als CSS-Variablen und fügen Sie sie direkt in den :root-Block Ihres Stylesheets ein.

:root {
  --color-1: #0f62fe;
  --color-2: #fe620f;
  --color-3: #fe0f62;
}

Eine Tailwind-Palettenerweiterung generieren

Sie erstellen ein Tailwind-CSS-Projekt und benötigen eine benutzerdefinierte Farbfamilie. Geben Sie Ihre Markenfarbe ein, wählen Sie monochromatisch, um Schattierungen von hell bis dunkel zu generieren, und exportieren Sie dann als Tailwind JS. Die heruntergeladene Datei gibt Ihnen einen einfügefertigen theme.extend.colors-Block, bei dem jede Schattierung als monochromatic-1, monochromatic-2 usw. indiziert ist.

Farbfelder für ein Adobe Illustrator-Projekt vorbereiten

Sie müssen eine Web-Farbpalette in einem Druckdesign abgleichen. Geben Sie die Basisfarbe ein, wählen Sie Ihren Harmonietyp und exportieren Sie dann als ASE. Die binäre ASE-Datei folgt dem ASEF-Format und kann direkt in Illustrators Farbfelder-Panel geladen werden, wobei alle RGB-Werte ohne manuelle Neueingabe erhalten bleiben.

Tipps und Best Practices

Der Zufalls-Button setzt eine vollständig zufällige HEX-Basisfarbe. Verwenden Sie ihn, um Harmonien zu erkunden, die Sie nicht bewusst gewählt hätten — es ist ein schneller Weg, um unerwartete Ausgangspunkte für ein neues Design zu finden.

Beachten Sie beim Vergleichen von Harmonietypen, dass die Basisfarbe immer der erste Eintrag in jeder generierten Palette ist. So können Sie Ihre Palette an einer Farbe verankern, zu der Sie sich bereits verpflichtet haben (eine Logo-Farbe, ein Markenrichtlinienwert), während Sie verschiedene komplementäre Optionen erkunden.

Triadische Paletten eignen sich gut, wenn Sie drei klar unterschiedliche Funktionsfarben benötigen — primäre Aktion, sekundäre Aktion und destruktive oder Warnzustände. Der 120°-Abstand stellt sicher, dass keine zwei visuell zu ähnlich sind.

Führen Sie für Barrierefreiheit die Farben aus Ihrer generierten Palette durch den Contrast Checker, bevor Sie sie finalisieren. Komplementäre Paare erfüllen oft die WCAG-Kontrastanforderungen, aber analoge Paletten können Kombinationen erzeugen, die bei der Textverwendung nicht bestehen.

Das Verlaufspanel (Supporter-Funktion) zeichnet jede „Alle kopieren"-Aktion mit der Basisfarbe und dem Harmonietyp auf, sodass Sie zu einer Palette zurückkehren können, die Sie früher in der Sitzung generiert haben, ohne sich die genauen Werte merken zu müssen.

Häufige Probleme und Fehlerbehebung

Palette aktualisiert nicht, wenn ich einen HEX-Wert eintippe: Das Tool reagiert auf jeden Tastendruck in der Texteingabe. Wenn Sie eine unvollständige oder ungültige HEX-Zeichenfolge eingeben, empfängt die Funktion generateHarmony den aktuellen Wert und kann unerwartete Ausgaben erzeugen, bis der Wert ein gültiges 6-stelliges HEX ist. Geben Sie den vollständigen Wert ein oder verwenden Sie die Farbauswahl-Eingabe, um ein gültiges Ergebnis zu garantieren.

Der Zufalls-Button erzeugt sehr dunkle oder sehr helle Paletten: Die Funktion generateRandomColor() generiert eine volle Bandbreite von HEX-Werten, einschließlich fast-schwarz und fast-weiß. Wenn das zufällige Ergebnis zu extrem ist, klicken Sie erneut auf Zufällig oder passen Sie die Basisfarbe manuell mit dem Farbwähler an.

ASE-Export erzeugt eine Datei, die Adobe nicht öffnen kann: Der ASE-Export erstellt eine binäre ASEF-Format-Datei im Browser mit DataView. Wenn der Download null Bytes enthält oder die Datei abgelehnt wird, prüfen Sie, ob Ihr Browser Blob mit application/octet-stream unterstützt. Moderne Chromium-basierte Browser und Firefox verarbeiten dies korrekt.

„Alle kopieren" kopiert eine kommagetrennte Liste, aber ich benötige zeilengetrennte Werte: Die Zwischenablageausgabe verwendet , als Trennzeichen. Fügen Sie die Werte in einen Texteditor ein und verwenden Sie Suchen-und-Ersetzen, um , in einen Zeilenumbruch zu ändern, wenn Ihr Zielwerkzeug einen Wert pro Zeile erfordert.

Schaltfläche „Zurücksetzen" setzt auf Standardeinstellungen zurück: Die Schaltfläche „Zurücksetzen" ist dazu gedacht, die Standardeinstellungen wiederherzustellen, einschließlich der Basisfarbe aus Ihrem aktuellen Website-Farbschema und des komplementären Harmonietyps. Dies ist das erwartete Verhalten — es stellt keine vorherige benutzerdefinierte Farbe wieder her.

Datenschutz und Sicherheit

Palette Generator läuft vollständig clientseitig. Alle Farbharmonieberechnungen finden in Ihrem Browser mit JavaScript statt — keine Farbwerte, Präferenzen oder Exportdaten werden an einen Server übermittelt. Exportierte Dateien (JSON, CSS, SCSS, Tailwind JS, ASE) werden als In-Memory-Blob-Objekte generiert und direkt auf Ihr Gerät heruntergeladen. Das Tool funktioniert offline, sobald die Seite geladen wurde.

Häufig gestellte Fragen

Ist Palette Generator kostenlos?

Ja. Die Kernpalettengenerierung und alle Standard-Exportformate (JSON, CSS, SCSS, Tailwind JS) sind kostenlos und ohne Konto verfügbar. Der ASE-Export ist eine Glyph Widgets Supporter-Funktion, verfügbar mit einer Ko-fi-Spende von 5 $ oder mehr, die 30 Tage Premium-Zugang gewährt.

Funktioniert Palette Generator offline?

Ja. Sobald die Seite in Ihrem Browser geladen wurde, funktionieren alle Farbberechnungen und Dateiexporte ohne Internetverbindung. Das Tool macht während der normalen Palettengenerierung keine Netzwerkanfragen.

Sind meine Daten bei Palette Generator sicher?

Alle Berechnungen werden lokal in Ihrem Browser durchgeführt. Keine Farbdaten, Basisfarben oder Exportdateien werden an einen Server gesendet. Ihre Palettenarbeit ist vollständig privat.

Was ist der Unterschied zwischen triadisch und split-komplementär?

Triadisch wählt drei Farben in genau 120°-Intervallen auf dem Farbkreis. Split-komplementär nimmt Ihre Basisfarbe und zwei Farben, die dem Komplement flankieren — die zwei Farben, die 30° auf beiden Seiten des gegenüberliegenden Farbtons sind. Split-komplementär erzeugt typischerweise weniger visuelle Spannung als ein echtes komplementäres Paar, bietet aber immer noch guten Kontrast.

Wie verwende ich die exportierten CSS-Variablen?

Der CSS-Export erzeugt einen :root-Block mit Variablen namens --color-1, --color-2 usw. Fügen Sie diesen Block in Ihr Stylesheet ein und referenzieren Sie die Variablen überall mit var(--color-1). Der Dateiname enthält den Harmonietyp, sodass complementary-palette.css klar gekennzeichnet ist.

Kann ich den Tailwind-Export direkt in meinem Projekt verwenden?

Die heruntergeladene Datei ist ein Tailwind-Konfigurationsausschnitt, kein vollständiges tailwind.config.js. Kopieren Sie das colors-Objekt aus dem Inneren von theme.extend.colors und fügen Sie es in Ihre bestehende Tailwind-Konfiguration ein. Die Farbfamilie verwendet palette als Schlüssel mit Einträgen wie color-1, color-2 usw., sodass Sie Farben als text-palette-color-1 oder bg-palette-color-2 in Ihren Vorlagen referenzieren können.

Was ist das ASE-Exportformat und für wen ist es gedacht?

ASE (Adobe Swatch Exchange) ist ein Binärformat, das Farbfelder für die Verwendung in Adobe Creative Suite-Anwendungen einschließlich Photoshop, Illustrator und InDesign speichert. Designer, die sowohl im Web (CSS) als auch im Druck (Adobe-Apps) arbeiten, können den ASE-Export verwenden, um die Farbkonsistenz in beiden Umgebungen ohne manuelle Neueingabe von Werten aufrechtzuerhalten.

Wie viele Farben generiert jeder Harmonietyp?

Komplementär generiert 2 Farben; analog, triadisch, split-komplementär und clash generieren jeweils 3; tetradisch und Rechteck generieren jeweils 4; doppelt-split-komplementär und Fünf-Ton generieren jeweils 5; Sechs-Ton generiert 6; monochromatisch generiert eine variable Anzahl von Schattierungen. Alle Paletteneinträge werden im Palettenband und der Liste darunter angezeigt.

Kann ich von einer Farbe ausgehen, die ich aus einem Bild ausgewählt habe?

Ja. Verwenden Sie den Demnächst verfügbar: Image Color Picker, um eine Farbe aus einem Foto zu extrahieren, kopieren Sie ihren HEX-Wert und fügen Sie ihn dann in das Basisfarbentextfeld in Palette Generator ein, um eine Harmonie darum aufzubauen.

Kann ich meine Lieblingspaletten speichern?

Mit einem Glyph Widgets Supporter-Konto können Sie im Presets-Panel benannte Presets speichern, die die Basisfarbe und den Harmonietyp speichern. Das Verlaufspanel zeichnet auch frühere „Alle kopieren"-Vorgänge auf, sodass Sie eine früher generierte Palette leicht wiederfinden können.

Verwandte Tools

• Demnächst verfügbar: Color Blender — Zwei Farben mischen und Zwischenschritte generieren, ergänzend zur Palettenarbeit.
• Color Picker — Eine präzise Basisfarbe mit einem Farbrad oder Schiebereglern auswählen, bevor eine Palette generiert wird.
• Demnächst verfügbar: Gradient Generator — CSS-Verläufe mit Farben aus Ihrer generierten Palette erstellen.
• Contrast Checker — WCAG-Kontrastverhältnisse für zwei beliebige Farben aus Ihrer Palette vor dem Einsatz in UI-Text verifizieren.

Jetzt Palette Generator ausprobieren: Demnächst verfügbar: Glyph Widgets Palette Generator