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

[Canonical HTML page](https://gradiently.design/de/guide/green-blue-gradient)

Grün trifft Blau: die Farbe von flachem Wasser über Sand, von einem See unter Kiefern, von Polarlichtern. Deshalb wirkt das Paar so mühelos natürlich. So bleibt es auch so.

## The short version

- Ein Grün-Blau-Farbverlauf mischt benachbarte kühle Töne wie Smaragd #10b981, Petrol #0d9488 und Himmelblau #0284c7, mit Petrol oder Aqua in der Mitte.
- Weil Grün und Blau im Farbkreis nebeneinander liegen, bleibt die Mischung sauber, und sie wirkt natürlich, weil sie Wasser, Eis und Himmel spiegelt.
- Leuchtende Grün- und Aquatöne sind zu hell für weiße Schrift, nimm deshalb ein tiefes Petrol auf hellen Versionen und Weiß oder Mint auf dunklen.
- Dunkle Grün-Blau-Verläufe wirken ruhig und vertrauenswürdig, helle Versionen frisch und sauber.
- Das Paar passt zu Reisen, Wellness, Finanzen, Outdoor-Marken und Technik, und ein warmer Akzent wie Sand oder Koralle verhindert, dass es kühl wirkt.

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](https://gradiently.design/de/guide/analogous-colors): 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.

- Tiefes Petrol als Schriftfarbe: #042f2e
- Kiefer: #065f46
- Smaragd: #10b981
- Petrol: #0d9488
- Aqua: #22d3ee
- Seeblau: #0284c7
- Mint: #a7f3d0
- Himmel: #bae6fd

Die Spanne von Grün zu Blau mit einer tiefen Schriftfarbe. Petrol und Aqua sind die Brückenfarben, die die Mischung durchgehend halten.

## 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.

- Lagune: `linear-gradient(180deg, #a5f3fc 0%, #2dd4bf 50%, #0891b2 100%)`
- Riff: `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`
- Sandbank: `linear-gradient(0deg, #fde68a 0%, #5eead4 30%, #0ea5e9 100%)`

Leuchtende Grün-Blau-Verläufe. Der dritte setzt unten Sand ein, was den ganzen Rahmen wärmt. [Ozean-Verläufe](https://gradiently.design/de/guide/ocean-gradient) zeigt mehr.

## 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.

- Waldsee: `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`
- Mondlicht-Petrol: `radial-gradient(circle at 80% 20%, #0d9488 0%, #134e4a 40%, #031418 80%)`
- Flasche zu Marine: `linear-gradient(135deg, #064e3b 0%, #115e59 50%, #1e3a8a 100%)`

Dunkles Grün und Blau. Diese bekommen in komprimierten Bildern leicht Streifen, also füge vor dem Export eine feine Körnung hinzu.

## 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.

- Gletscher: `linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%)`
- Kalter Morgen: `linear-gradient(180deg, #f0fdfa 0%, #ccfbf1 50%, #e0f2fe 100%)`
- Eis im Sonnenlicht: `radial-gradient(circle at 25% 25%, #fefce8 0%, #d1fae5 45%, #bae6fd 100%)`

Blasses Grün und Blau. Tiefes Petrol liest sich auf allen. [Mint-Verläufe](https://gradiently.design/de/guide/mint-gradient) geht weiter ins Grüne.

## 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](https://gradiently.design/de/guide/aurora-gradients) behandelt die ganze Technik.

- Polarlicht: `radial-gradient(ellipse at 30% 30%, #34d399 0%, #0f766e 30%, #0b1e3a 65%, #030712 90%)`
- Lichtband: `linear-gradient(170deg, #030712 0%, #064e3b 40%, #0e7490 70%, #030712 100%)`
- Polarwirbel: `conic-gradient(from 210deg at 60% 40%, #030712, #10b981, #0ea5e9, #030712)`

Grün und Blau auf fast Schwarz. Mint und Aqua sind hier beide auffällige Textfarben.

## 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](https://gradiently.design/de/guide/text-on-gradient) zeigt, was du tust, wenn eine Zeile beide Enden kreuzt.

| Hintergrund | Text | Kontrast | Urteil |
| --- | --- | --- | --- |
| Smaragd `#10b981` | Weiß | 2,5:1 | Fällt durch |
| Aqua `#22d3ee` | Weiß | 1,8:1 | Fällt durch |
| Petrol `#0d9488` | Weiß | 3,7:1 | Nur große Überschriften |
| Mint `#a7f3d0` | Tiefes Petrol `#042f2e` | 11,3:1 | Ausgezeichnet |
| Kiefer `#065f46` | Weiß | 7,7:1 | Ausgezeichnet |
| Nacht `#04202a` | Aqua-Mint `#5eead4` | 11,4:1 | Ausgezeichnet, Farbe als Schrift |

Bei einer Grün-Blau-Mischung ist das grüne Ende meist das hellere, prüfe den Kontrast also zuerst dort.

Ein Reise-Post im Hochformat mit tiefpetrolfarbener Schrift auf einem leuchtenden Aqua-Grün-Verlauf

Ein Post eines Reisebüros in leuchtenden Lagunentönen, mit tiefpetrolfarbener Schrift.

Ein Linkbild im Querformat für eine Finanz-App mit weißer Schrift auf einem Verlauf von dunklem Grün zu Marine

Ein LinkedIn-Linkbild in Kiefer zu Marine für eine Finanz-App.

## 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](https://gradiently.design/de/guide/complementary-colors) erklärt, warum eine Mischung über den Farbkreis hinweg grau wird.

### Vermeiden

- Petrol direkt in Koralle gemischt
- Weiße Schrift auf Smaragd oder Aqua
- Jede Fläche in kühlen Farben
- Gesättigtes Grün auf gesättigtem Blau in voller Stärke

### Besser

- Koralle oder Sand neben dem Verlauf als Akzent
- Tiefes Petrol als Schrift auf hellen Mischungen
- Warmes Weiß oder Creme für Flächen und Schrift
- Eine Farbe führt, die andere unterstützt

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

```css
.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;
  }
}
```

Gletscher im hellen Modus, Waldsee im dunklen Modus. Gleiche Töne, damit die Marke wie eine Einheit wirkt.

Eine helle und eine dunkle Version desselben Grün-Blaus zu kombinieren lässt einen Themenwechsel gestaltet statt invertiert wirken. [Dark-Mode-Verläufe](https://gradiently.design/de/guide/dark-mode-gradients) 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.

## FAQ

### Was ist ein guter Code für einen Grün-Blau-Farbverlauf?

Eine leuchtende Option ist `linear-gradient(135deg, #6ee7b7 0%, #22d3ee 55%, #0284c7 100%)`. Für etwas Dunkleres und Ruhigeres probiere `linear-gradient(160deg, #022c22 0%, #065f46 45%, #0c4a6e 100%)`.

### Passen Grün und Blau zusammen?

Ja. Sie sind Nachbarn im Farbkreis, mit Petrol und Aqua dazwischen, deshalb bleibt die Mischung sauber und wirkt natürlich.

### Welche Farbe liegt zwischen Grün und Blau?

Petrol, etwa `#0d9488`, mit Aqua und Türkis als hellere Verwandte.

### Welche Textfarbe passt auf einen Grün-Blau-Farbverlauf?

Tiefes Petrol wie `#042f2e` auf hellen Versionen und Weiß oder Mint auf dunklen. Weiß auf leuchtendem Smaragd oder Aqua besteht den Kontrast nicht.

### Was bedeutet ein Grün-Blau-Farbverlauf für eine Marke?

Er wirkt meist ruhig, frisch und vertrauenswürdig, weil er Wasser, Himmel und Pflanzen aufgreift. Dunkle Versionen wirken beständig, helle sauber.