Grün-Blau-Farbverlauf: frische Codes, die natürlich wirken

Ein Grün-Blau-Farbverlauf mischt zwei kühle Nachbarn: Grüntöne wie Smaragd #10b981 oder Mint #a7f3d0 und Blautöne wie #0284c7 oder Himmel #bae6fd, mit Petrol und Aqua als Brücke dazwischen. Die Mischung bleibt sauber, weil zwischen beiden Tönen kein Graupunkt liegt. Sie wirkt natürlich, weil du sie dein Leben lang in Wasser, Eis und Himmel gesehen hast. Die Codes hier folgen vier Landschaften, mit den Textfarben, die darauf lesbar sind, und CSS für hellen und dunklen Modus.

Warum Grün und Blau zusammen natürlich aussehen

Grün und Blau sind Analogfarben: Sie liegen im Farbkreis nebeneinander, deshalb ist jeder Schritt dazwischen eine echte Farbe, meist Petrol und Aqua. Die Natur zeigt diese Paarung ständig, von flachen Meeren, in denen blaues Wasser über grünen Tang und Sand fließt, bis zu Gletscherseen und Kiefernwäldern, die sich im stillen Wasser spiegeln. Von solchen Szenen zu borgen ist der einfachste Weg, den Verlauf ruhig statt geschäftsmäßig wirken zu lassen.

Lagune: leuchtende Aqua- und Grün-Verläufe

Flaches tropisches Wasser ist meist Aqua, grün an den flachsten Stellen und blau, wo es tiefer wird. Diese Verläufe wirken urlaubshell. Füge einen warmen Sandstopp hinzu, wenn sie nach Strand statt nach Schwimmbad aussehen sollen.

Waldsee: tiefe Grün-Blau-Verläufe

Dunkles Grün, das in dunkles Blau übergeht, wirkt ruhig, hochwertig und vertrauenswürdig. Denk an einen Waldsee in der Dämmerung oder die Farbe einer alten Flasche. Diese Verläufe tragen weiße Schrift gut und passen zu Finanzen, Outdoor-Ausrüstung, Architektur und jeder Marke, die Beständigkeit ausstrahlen will.

Gletscher: blasse Mint- und Himmelverläufe

Hebst du das Paar ganz an, entstehen Gletschereis und kalte Morgen: klar, luftig und sehr ruhig. Diese Verläufe passen zu Gesundheit, Hautpflege, Reinigung und Produktivitäts-Apps. Sie können klinisch wirken, ein Hauch warmes Weiß hilft.

Polarlicht: Grün und Blau am Nachthimmel

Polarlichter sind grünes und blaues Licht auf Schwarz, deshalb gehören Aurora-Verläufe zu den beliebtesten dunklen Hintergründen. Halte die Farbe in weichen Bändern und lass den dunklen Grund den größten Teil des Rahmens tragen. Aurora-Verläufe behandelt die ganze Technik.

Textfarben auf Grün-Blau-Verläufen

Smaragd und Aqua sind überraschend hell, deshalb fällt weiße Schrift auf den leuchtenden Versionen oft durch. Tiefes Petrol funktioniert auf hellen Mischungen und hält alles in einer Familie; Weiß und Mint lesen sich gut auf den dunklen. Die Verhältnisse unten folgen der WCAG-Formel. Text auf einem Verlauf zeigt, was du tust, wenn eine Zeile beide Enden kreuzt.

So wärmst du eine Grün-Blau-Palette auf

Grün und Blau sind beide kühl, deshalb kann eine ganze Marke darin distanziert wirken. Ein warmer Akzent löst das. Sand, Koralle und sanftes Gold liegen alle gegenüber von Petrol im Farbkreis, setze sie also neben den Verlauf, in einen Button, ein Logo oder einen schmalen Streifen am Rand, statt sie hineinzumischen. Komplementärfarben erklärt, warum eine Mischung über den Farbkreis hinweg grau wird.

CSS für Grün-Blau-Verläufe im hellen und dunklen Modus

.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}

Eine helle und eine dunkle Version desselben Grün-Blaus zu kombinieren lässt einen Themenwechsel gestaltet statt invertiert wirken. Dark-Mode-Verläufe geht tiefer. In Gradiently wird ein Mark in jeder Größe gerendert, die du gestaltest, und wählt pro Zeile helle oder dunkle Schrift aus seiner eigenen Palette, sodass sowohl Lagunenhelligkeit als auch Waldseedunkel ihre Worte lesbar halten.