Farbschema Generator — Harmonische Paletten aus einem HEX (Kostenlos, CSS/Tailwind)
Ausgewählte Farbe anpassen
Palette exportieren
:root {
--color-1: #7C3BED;
--color-2: #3BACED;
--color-3: #3B53ED;
--color-4: #D53BED;
--color-5: #ED3BAC;
}Verwandte externe Tools
Einige Links sind Affiliate-Links.
Verwandte Tools
Dieser kostenlose Farbpaletten-Generator erstellt harmonische Farbkombinationen aus einer Basisfarbe nach bewährter Farbtheorie. Gib einen HEX-Code ein, wähle eine Farbe mit dem Farbwähler oder klicke auf Zufällig — dann wähle ein Schema wie Komplementär, Analog, Triade, Tetrade oder Monochrom, um sofort eine ausgewogene Palette zu erzeugen. Sperre die Farben, die dir gefallen, und generiere den Rest neu, passe Helligkeit und Sättigung mit Schiebereglern an, kopiere jeden HEX mit einem Klick oder exportiere die gesamte Palette als CSS-Variablen, Tailwind-Farben oder JSON. Alles läuft in deinem Browser — deine Farben werden nie an einen Server gesendet.
So verwendest du das Tool
- Gib einen HEX-Code (z. B. #7C3AED) oder einen CSS-Farbnamen (z. B. rebeccapurple) in das Feld Basisfarbe ein, nutze den Farbwähler oder klicke auf Zufällig, um mit einer zufälligen Basisfarbe zu starten.
- Wähle ein Schema — Komplementär, Analog, Triade, Tetrade, Geteiltes Komplementär oder Monochrom — und die Palette aktualisiert sich sofort.
- Stelle die Anzahl der Farben (3–8) mit dem Schieberegler ein.
- Klicke auf das Schloss-Symbol einer Farbe, um sie zu fixieren. Klicke auf Neu generieren (oder drücke die Leertaste außerhalb eines Eingabefelds), um nur die nicht gesperrten Farben neu zu mischen.
- Wähle ein Farbmuster und nutze die Schieberegler für Helligkeit / Sättigung zur Feinjustierung. Wechsle zu 'Alle Farben', um die gesamte Palette relativ anzupassen.
- Kopiere einen HEX mit dem Kopier-Symbol oder nutze 'Alle HEX kopieren'. Wähle im Export-Tab das Format und kopiere oder lade herunter.
- Nutze 'Palette-URL kopieren', um diese exakte Kombination zu teilen.
Farbschemata (Farbharmonie)
Ein Farbschema ist eine Regel zur Auswahl von Farben, die harmonisch zusammenwirken, basierend auf ihren Positionen im Farbkreis. Die Farbtonbeziehungen bilden das Fundament; Helligkeits- und Sättigungsvariation bringt Leben hinein.
Komplementär
Zwei Farben, die sich im Kreis direkt gegenüberstehen (+180°). Hoher Kontrast und auffällig. Ideal für Akzente, die hervorstechen.
Geteiltes Komplementär
Die Basisfarbe plus die zwei Nachbarn ihres Komplementärs (+150°/+210°). Sanftere Spannung als Komplementär, leichter zu balancieren.
Analog
Benachbarte Farbtöne (±30°). Kohäsiv und ruhig — ideal für Hintergründe und natürliche Farbgeschichten.
Triade
Drei gleichmäßig im Kreis verteilte Farbtöne (+120°/+240°). Ausgewogen und lebendig — stark und vielseitig.
Tetrade
Vier Farbtöne im 90°-Abstand bilden ein Rechteck. Reich und abwechslungsreich; erfordert sorgfältige Balance zwischen Warm- und Kalttönen.
Monochrom
Mehrere Helligkeits- und Sättigungsvariationen eines einzigen Farbtons. Das sicherste Schema — immer kohäsiv und ohne Risiko.
Tipp: Wenn du unsicher bist, fang mit Analog oder Monochrom an — diese sind am schwierigsten zu verpatzen.
Funktionen
Aus einer Basisfarbe oder zufällig generieren
Gib einen beliebigen HEX, CSS-Namen ein oder nutze den Farbwähler, um eine Basisfarbe festzulegen, und lass das Schema den Rest generieren. Oder klicke auf Zufällig für einen völlig neuen Ausgangspunkt.
Farben sperren und den Rest neu generieren
Eine Farbe gefunden, die dir gefällt? Klicke auf das Schloss, um sie zu fixieren. Neu generieren (oder Leertaste) mischt nur die nicht gesperrten Plätze — schnell, um Variationen zu erkunden.
Helligkeit und Sättigung fein abstimmen
Wähle ein Muster aus und ziehe die Schieberegler für Helligkeit oder Sättigung, um es präzise anzupassen — ohne die Farbtonharmonie zu verändern. Nutze 'Alle Farben', um die gesamte Palette zu verschieben.
HEX mit einem Klick kopieren
Klicke auf das Kopier-Symbol eines Musters, um seinen HEX sofort in die Zwischenablage zu kopieren. Nutze 'Alle HEX kopieren', um alle Farben auf einmal zu übernehmen.
Als CSS-Variablen, Tailwind oder JSON exportieren
Öffne den Export-Tab und wähle dein Format. CSS-Variablen erzeugt einen :root-Block (--color-1, --color-2…). Tailwind erzeugt einen einfügefertigen theme.extend.colors-Block. JSON erzeugt ein einfaches Array. Farbwerte sind immer Großbuchstaben-HEX, nie lokal formatiert.
Kontrast- und Lesbarkeitstipps
Jedes Muster zeigt, ob weißer oder schwarzer Text lesbarer darauf ist, das WCAG-Kontrastverhältnis und ein Bestanden/Nicht-bestanden-Abzeichen für AA — mit Farbe und Text, nicht nur mit Farbe.
Anwendungsfälle
Markenfarben aus einem Logo-HEX definieren
Füge den primären HEX deiner Marke ein, wähle Analog oder Komplementär und erhalte sofort Kandidaten für Akzentfarbe, Hintergrund und Textfarbe, die mit deinem Logo harmonieren.
Direkt in CSS / Tailwind einfügen
Exportiere als CSS-Variablen (:root { --color-1: ... }) oder als Tailwind theme.extend.colors-Block und füge es direkt in deinen Code ein — ohne manuelle Konvertierung.
Farbzugänglichkeit prüfen
Nutze die Lesbarkeitstipps jedes Musters, um zu prüfen, ob der Text den WCAG AA-Standard erfüllt (4,5:1 Kontrast). Erkenne Problemfarben, bevor du mit der Entwicklung beginnst.
Hinweise und Tipps
- Schemata bieten einen harmonischen Ausgangspunkt, kein garantiertes Ergebnis. Die richtige Palette hängt immer vom Kontext, den Proportionen und den spezifischen verwendeten Farbtönen ab.
- Kontrast ist ein Richtwert: Die WCAG-Berechnung ist exakt, aber die tatsächliche Lesbarkeit hängt auch von Schriftgröße, Schriftstärke und umgebenden Farben ab.
- Monochrome Paletten können bei extremen Helligkeitswerten entsättigt wirken — das ist zu erwarten. Eine moderat hohe Basissättigung hilft.
- Deine Farbdaten werden nie an einen Server gesendet. Das Teilen funktioniert durch Kodierung der Palette in der URL — nur was du bewusst kopierst, verlässt dein Gerät.
Häufig gestellte Fragen
- Kann ich eine Farbpalette aus einem HEX-Code generieren?
- Ja. Gib einen beliebigen HEX-Code (mit oder ohne #) in das Feld Basisfarbe ein, und das Tool generiert sofort eine harmonische Palette mit dem ausgewählten Schema. CSS-Farbnamen wie 'rebeccapurple' funktionieren ebenfalls.
- Welche Farbschemata kann ich wählen?
- Sechs: Komplementär (+180°), Geteiltes Komplementär (+150°/+210°), Analog (±30°), Triade (+120°/+240°), Tetrade (je +90°) und Monochrom (ein einziger Farbton mit variierender Helligkeit). Alle basieren auf der Standard-Farbtheorie.
- Kann ich eine Farbe fixieren und nur den Rest neu generieren?
- Ja. Klicke auf das Schloss-Symbol eines Musters, um es zu fixieren. Neu generieren oder die Leertaste drücken mischt dann nur die nicht gesperrten Plätze.
- Kann ich als CSS-Variablen, Tailwind oder JSON exportieren?
- Ja. Im Export-Tab wähle das Format: CSS-Variablen (:root { --color-1: #...; }), Tailwind-Konfiguration (theme.extend.colors → palette: { 1: '#...', ... }) oder JSON ({ "palette": ["#...", ...] }). Jedes kann kopiert oder heruntergeladen werden.
- Wie viele Farben kann die Palette haben?
- 3 bis 8. Verwende den Schieberegler. Wenn das Schema weniger Hauptfarbtöne hat als angefordert, werden die zusätzlichen Plätze mit Helligkeitsvariationen (Töne und Schatten) aufgefüllt.
- Kann ich prüfen, ob Text auf jeder Farbe lesbar ist?
- Ja. Jedes Muster zeigt die empfohlene Textfarbe (weiß oder schwarz), das WCAG-Kontrastverhältnis und eine Bestanden/Nicht-bestanden-Beschriftung für AA — in Text, nicht nur in Farbe.
- Werden meine Farben an einen Server gesendet?
- Nein. Alle Palettengenierung, Anpassung, Kontrastberechnung und Export findet vollständig in deinem Browser statt. Deine Farben werden nie hochgeladen oder gespeichert.