60 Farbverlauf-Kombinationen, die funktionieren, mit Codes

Die besten Farbverlauf-Kombinationen folgen einer von zwei Regeln: Sie nutzen Farbtöne, die auf dem Farbkreis nebeneinanderliegen, sodass die Mischung sauber bleibt, oder sie überbrücken entfernte Farbtöne mit einer gewählten Mittelfarbe, sodass nichts ins Graue kippt. Unten findest du 60 Kombinationen nach diesen Regeln, nach Stimmung gruppiert: ruhig, kräftig, warm, kühl, dunkel und pastell. Kopiere jedes Muster als CSS und lies die Anmerkung unter der Gruppe, um zu verstehen, warum sie funktionieren, damit du eigene bauen kannst.

Alles hier ist einfaches CSS mit Hex-Farben. Es läuft in jedem Browser, und dieselben Codes lassen sich in jedes Design-Tool eintippen. Falls dir ein Begriff neu ist, erklärt Was ist ein Farbverlauf Farbstopps und Winkel.

Ruhige Farbverlauf-Kombinationen

Ruhige Verläufe halten ihre Farben in Farbton und Helligkeit nah beieinander. Nichts springt, das Auge ruht. Sie eignen sich als Hintergrund zum Lesen, für Wellness-Marken, Portfolios und alles, was leise wirken soll. Salbei und Stein zum Beispiel bewegt sich nur ein kleines Stück um den Kreis und verliert unterwegs etwas Helligkeit. Das liest sich wie Schatten an einer Wand und nicht wie ein Farbeffekt.

Kräftige Farbverlauf-Kombinationen

Kräftige Verläufe nutzen gesättigte Farben und mehr Abstand auf dem Kreis. Sie ziehen die Aufmerksamkeit in einem vollen Feed, auf einem Sale-Banner oder einer Launch-Seite auf sich. Der Trick ist, Paare zu wählen, deren gerade Mischung hell bleibt. Magenta zu Bernstein läuft durch Koralle, Kobalt zu Koralle durch Violett. Keins kommt in die Nähe von Grau, deshalb wirken sie auf der ganzen Strecke leuchtend.

Warme Farbverlauf-Kombinationen

Warme Verläufe liegen zwischen Rot und Gelb und wirken sonnig, appetitlich und menschlich. Sie passen zu Essen, Gastronomie, Lifestyle und allem Persönlichen. Die meisten bekommen ein dunkleres, röteres Ende, damit die Mischung Gewicht hat: Goldene Stunde läuft von blassem Honig zu gebranntem Bernstein, so wie spätes Licht eine Wand hinabwandert. Zur Psychologie der Temperatur siehe warme und kalte Farben.

Kühle Farbverlauf-Kombinationen

Kühle Verläufe liegen zwischen Grün und Violett und wirken sauber, ruhig und präzise. Sie sind das natürliche Zuhause von Technik, Gesundheit, Finanzen und Wasser. Blau ist der Anker der meisten von ihnen, deshalb wirken sie vertrauenswürdig, und deshalb braucht ein kühler Verlauf ein eigenes Detail, etwa ein violettes Ende oder eine Verschiebung Richtung Petrol, damit er nicht aussieht wie jede Bank. Weitere Blautöne findest du in blaue Farbverläufe.

Dunkle Farbverlauf-Kombinationen

Dunkle Verläufe sind fast schwarze Gründe, aus denen eine leuchtende Farbe aufsteigt. Sie wirken hochwertig, nächtlich und filmisch, und weiße Schrift steht darauf scharf. Halte das dunkle Ende leicht getönt statt reinschwarz, damit die Mischung etwas hat, durch das sie wandern kann. Dunkle Verläufe zeigen schnell Banding, also füge vor der Veröffentlichung Körnung hinzu, siehe dunkle Farbverlauf-Hintergründe.

Pastell-Farbverlauf-Kombinationen

Pastelltöne sind blasse, sehr helle Farben mit etwas Sättigung. Sie wirken frisch, weich und freundlich und passen zu Beauty, Baby, Papeterie und Frühlingskampagnen. Weil sie alle so hell sind, können selbst entfernte Pastelltöne in ein weißliches Grau verlaufen, deshalb führen die letzten beiden hier über ein helles Lila. Setze Text auf Pastell in dunkler Schrift statt in Weiß. Mehr findest du unter Pastell-Farbverläufe.

So nutzt du diese Farbverlauf-Codes

Jeder Code ist ein vollständiger CSS-Wert für background. Füge ihn in ein beliebiges Element ein oder übertrage die Hex-Farben und Stopp-Positionen in ein Design-Tool. Im Web setzt du zuerst eine einfarbige Ersatzfarbe, entnommen dem dunkelsten oder wichtigsten Stopp.

.card {
  background-color: #3b1d6e; /* fallback */
  background-image: linear-gradient(135deg, #0f0b1e 0%, #3b1d6e 55%, #7c3aed 100%);
  color: #ffffff;
}

So baust du deine eigene Kombination

1. 1

   Wähle zuerst die Stimmung

   Entscheide dich vor jeder Farbe für ruhig oder kräftig, warm oder kühl, dunkel oder hell. Das grenzt die Auswahl auf eine der Gruppen oben ein.

2. 2

   Wähle eine Ankerfarbe

   Meist deine Markenfarbe oder die Farbe dessen, was du verkaufst. Siehe Markenfarben wählen.

3. 3

   Füge einen Nachbarn hinzu

   Gehe 30 bis 60 Grad auf dem Farbkreis weiter, für eine saubere zweite Farbe. Verändere auch die Helligkeit ein wenig, für Tiefe.

4. 4

   Überbrücke alles Entfernte

   Wenn du einen weit entfernten Farbton willst, setze eine leuchtende Mittelfarbe dazwischen, damit die Mischung nicht grau wird. Siehe schlammige Farbverläufe.

5. 5

   Mach ihn zu deinem

   Ändere den Winkel, verschiebe einen Stopp von 50 %, füge eine dritte Farbe oder eine Schicht Körnung hinzu. Kleine Änderungen sorgen dafür, dass eine Kombination nicht wie eine Voreinstellung aussieht.

Ein beliebter Code ist ein guter Anfang, aber Tausende andere Designs beginnen ebenfalls dort. Wenn du eine Verlaufs-Identität willst, die sonst niemand hält, kannst du ein Bild, das du liebst, mit seiner Palette und den ähnlichsten Marks abgleichen oder neue Marks in diesem Stil machen.