# Blaue Farbverläufe: 20 Farbpaletten von Eis bis Mitternacht

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

Blau ist die sicherste Farbe im Design, und genau deshalb sehen so viele blaue Farbverläufe gleich aus. Hier sind zwanzig, die es nicht tun, vom hellsten zum dunkelsten sortiert, mit Codes und den Überlegungen dahinter.

## The short version

- Ein blauer Farbverlauf mischt Blautöne, oft mit einem benachbarten Türkis, Cyan oder Violett, von blassem Eis bis tiefem Marineblau.
- Blau wird weithin mit Ruhe, Verlässlichkeit und Technik verbunden, was es beliebt macht und leicht mit dem aller anderen verwechselbar.
- Blau geht sauber zu Türkis, Cyan, Indigo und Violett über, wird aber grau, wenn es direkt zu Orange oder Gelb übergeblendet wird.
- Weißer Text funktioniert auf tiefen und mittleren Blautönen wie #1e3a8a und #2563eb, scheitert aber bei Fließtext auf helleren Blautönen wie #3b82f6.
- Einen blauen Farbverlauf zu Türkis oder Violett zu neigen, tiefer oder blasser zu gehen und einen warmen Akzent zu setzen sind die schnellsten Wege aus dem Konzernlook.

Ein **blauer Farbverlauf** mischt Blautöne, oft mit einem benachbarten Türkis, Cyan oder Violett. Er kann sich anfühlen wie ein klarer Himmel, ein tiefer Ozean, ein Bildschirm bei Nacht oder der Geschäftsbericht einer Bank, je nachdem, welche Blautöne du wählst und wie du sie einsetzt. Unten findest du zwanzig blaue Farbverlaufspaletten mit kopierbarem CSS, vom blassesten zum dunkelsten sortiert, danach die Textfarben, die darauf funktionieren, und wie du Blau vor Langeweile bewahrst.

## Hellblaue Farbverläufe: Eis und Himmel

Blasse blaue Farbverläufe wirken offen, sauber und ruhig. Sie passen zu Gesundheit, Reisen, Wellness und Produktseiten, die Raum brauchen. Nutze dunkle Tinte darauf und füge einen Hauch Wärme oder Flieder hinzu, damit sie nicht kalt und klinisch wirken.

- 1. Eis: `linear-gradient(180deg, #f0f9ff 0%, #bae6fd 100%)`
- 2. Morgenhimmel: `linear-gradient(180deg, #7dd3fc 0%, #e0f2fe 70%, #fef3c7 100%)`
- 3. Lavendelblauer Dunst: `linear-gradient(135deg, #dbeafe 0%, #e0e7ff 50%, #f5d0fe 100%)`
- 4. Gletscher: `linear-gradient(135deg, #ecfeff 0%, #a5f3fc 100%)`
- 5. Wolkenrosa: `linear-gradient(135deg, #e0f2fe 0%, #fce7f3 100%)`

Fünf hellblaue Farbverläufe. Die warmen oder fliederfarbenen Enden bei 2, 3 und 5 verhindern, dass sie steril wirken.

## Ozean- und Türkisblau-Farbverläufe

Blau zu Grün zu neigen gibt ihm Leben. Ozean-Farbverläufe wirken frisch und natürlich und umgehen die Konzernassoziationen von reinem Blau. Sie passen zu Reisen, Essen, Nachhaltigkeit und Outdoor-Marken.

- 6. Offenes Wasser: `linear-gradient(160deg, #0c4a6e 0%, #0891b2 55%, #67e8f9 100%)`
- 7. Tiefer Tauchgang: `linear-gradient(180deg, #a5f3fc 0%, #0e7490 60%, #083344 100%)`
- 8. Lagune: `linear-gradient(135deg, #1e3a8a 0%, #0f766e 55%, #5eead4 100%)`
- 9. Hafen: `linear-gradient(135deg, #164e63 0%, #0d9488 100%)`
- 10. Flachwasser: `linear-gradient(135deg, #0369a1 0%, #22d3ee 60%, #a7f3d0 100%)`

Blau in Türkis und Aqua. Benachbarte Farbtöne halten jeden Übergang sauber.

## Leuchtende und elektrische blaue Farbverläufe

Gesättigte Blautöne sind energiegeladen und technisch. Sie passen zu Launches, Apps, Sport und Events. Sie sind auch die häufigsten Blautöne im Web und profitieren deshalb am meisten von einer unerwarteten Form oder einem warmen Akzent.

- 11. Kobalt zu Cyan: `linear-gradient(135deg, #1d4ed8 0%, #3b82f6 50%, #22d3ee 100%)`
- 12. Ultramarin zu Violett: `linear-gradient(135deg, #1e40af 0%, #4f46e5 50%, #8b5cf6 100%)`
- 13. Blaues Leuchten: `radial-gradient(circle at 30% 20%, #60a5fa 0%, #1d4ed8 45%, #0b1437 100%)`
- 14. Kobalt mit Goldkante: `linear-gradient(135deg, #0047ab 0%, #2563eb 86%, #fbbf24 86%, #f59e0b 100%)`
- 15. Aufsteigendes Signal: `linear-gradient(180deg, #0b1437 0%, #1d4ed8 60%, #38bdf8 100%)`

Lebhafte Blautöne. Nummer 14 behält seinen warmen Akzent als harte Kante, sodass Blau und Gold sich nie zu Grau mischen.

## Dunkelblaue und Mitternachts-Farbverläufe

Tiefes Marineblau und Mitternachts-Farbverläufe wirken ernst, hochwertig und ruhig. Sie sind hervorragende Untergründe für weiße Schrift und helle Akzente. Achte auf Banding, das sich in langsamen, dunklen Blautönen leicht zeigt. Feine Körnung behebt es. Siehe [Gradient Banding](https://gradiently.design/de/guide/gradient-banding).

- 16. Mitternacht: `linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%)`
- 17. Schiefernacht: `linear-gradient(160deg, #0f172a 0%, #1e293b 60%, #334155 100%)`
- 18. Horizontleuchten: `radial-gradient(circle at 50% 110%, #1e40af 0%, #0b1437 50%, #020617 100%)`
- 19. Marine zu Indigo: `linear-gradient(135deg, #0b1437 0%, #312e81 60%, #6d28d9 100%)`
- 20. Dämmerung über dem Wasser: `linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%)`

Fünf dunkle Blautöne. Der letzte endet in warmem Koralle, wie das letzte Licht über dem Meer.

## Welcher blaue Farbverlauf für welche Aufgabe

Zwanzig Farbpaletten sind viel Auswahl. Starte bei der Aufgabe, die das Design erfüllen muss, und den Worten, die es tragen muss, und wähle dann aus der passenden Gruppe.

| Aufgabe | Probiere | Warum |
| --- | --- | --- |
| Ruhige Produkt- oder Gesundheitsseite | 1, 3, 4 | Blass, offen, leicht unter dunkler Schrift |
| Reisen, Essen, Outdoor | 6, 8, 10 | Blau mit Neigung zu Grün wirkt natürlich |
| App-Launch oder Tech-Event | 11, 13, 15 | Gesättigt und beleuchtet, wirkt als Energie |
| Hochwertig oder Finanzen | 16, 17, 19 | Tiefe Untergründe wirken ernst und tragen weiße Schrift |
| Etwas Einprägsames | 2, 14, 20 | Eine warme Note macht Blau unverwechselbar |

Ein Startpunkt für jede Art von Design. Die Nummern beziehen sich auf die Farbpaletten oben.

## Was Blau signalisiert und das Problem der Langeweile

In einem Großteil der Welt wird Blau mit Ruhe, Verlässlichkeit und Tiefe verbunden, teils wegen Himmel und Wasser. Deshalb ist es bei Banken, Versicherungen, Gesundheit und Technik so verbreitet. Es ist auch der Grund, warum ein mittelblauer Farbverlauf selten hilft, dich wiederzuerkennen: Er sieht nach der Branche aus statt nach dem Unternehmen. [Farbpsychologie](https://gradiently.design/de/guide/color-psychology) erklärt, warum Konvention in beide Richtungen wirkt.

### Konzernblau

- Ein mittleres Blau zu einem helleren Blau bei 135 Grad
- Reines, voll gesättigtes Primärblau
- Glatt und flach, ohne Textur
- Überall Blau, nichts Warmes

### Unverwechselbares Blau

- Mit Neigung zu Türkis, Indigo oder Violett
- Sehr tief oder sehr blass, nicht die Mitte
- Körnung, Glanz oder ein weiches Leuchten
- Ein warmer Akzent: Koralle, Gold oder Aprikose

Blau geht gut zu seinen Nachbarn über: Türkis, Cyan, Indigo und Violett. Zu seinen Gegenpolen geht es schlecht über. Blau direkt in Orange oder Gelb führt durch eine gräuliche Mitte, halte warme Akzente also kurz oder leite sie über Violett oder Pink. [Komplementärfarben](https://gradiently.design/de/guide/complementary-colors) erklärt warum.

## Text auf blauen Farbverläufen

| Text auf Hintergrund | Kontrast | Urteil |
| --- | --- | --- |
| Weiß auf `#0b1437` | 18,0:1 | Ausgezeichnet |
| Weiß auf `#1e3a8a` | 10,4:1 | Ausgezeichnet |
| Weiß auf `#2563eb` | 5,2:1 | In Ordnung für Fließtext |
| Weiß auf `#3b82f6` | 3,7:1 | Nur große Schrift |
| `#0b1a33` auf `#60a5fa` | 6,8:1 | Dunkle Tinte funktioniert hier |
| `#0b1a33` auf `#bae6fd` | 13,1:1 | Ausgezeichnet |

WCAG-Kontrastverhältnisse, berechnet. Fließtext braucht 4,5:1, große Schrift 3:1.

Die Falle ist die Mitte des Blaubereichs: Ein leuchtendes Kornblumenblau wie `#3b82f6` sieht stark genug für weiße Schrift aus, liegt aber unter 4,5:1. Prüfe bei einem Farbverlauf den Kontrast dort, wo das Blau hinter deinen Worten am hellsten ist. [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) hat die vollständige Methode.

Ein Statistik-Post im Hochformat mit 98 % in großer Schrift auf einem tiefen Farbverlauf

Eine tiefe Fläche lässt eine Zahl das ganze Reden übernehmen.

Eine vertikale Story mit den Worten „Atme aus“ auf einem ruhigen Farbverlauf

Eine ruhigere Story mit viel freiem Raum.

```css
.hero {
  background-color: #0b1437;
  background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
  color: #ffffff;
}
```

Farbpalette 20, Dämmerung über dem Wasser, als Header-Hintergrund. Halte Überschriften im oberen, dunkleren Teil.

Einen blauen Farbverlauf als Bild für Social Media zu exportieren braucht einen zusätzlichen Schritt. Plattformen komprimieren Uploads neu, und langsame, dunkle Blautöne gehören zu den ersten Farben, die in sichtbare Streifen zerfallen. Exportiere in der von der Plattform empfohlenen Größe, füge vor dem Speichern feine Körnung hinzu und nutze PNG, wo die Plattform es akzeptiert. [Körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) zeigt, wie viel Körnung genug ist.

Für Violett direkt neben Blau siehe [violette Farbverläufe](https://gradiently.design/de/guide/purple-gradient), für grünere Optionen [grüne Farbverläufe](https://gradiently.design/de/guide/green-gradient).

## FAQ

### Welche Farben passen in einem Farbverlauf gut zu Blau?

Türkis, Cyan, Indigo und Violett mischen sich sauber mit Blau. Warme Farben wie Koralle und Gold sind gute Akzente, wenn sie kurz bleiben, denn Blau direkt in Orange oder Gelb überzublenden wird grau.

### Was ist ein guter CSS-Code für einen blauen Farbverlauf?

Für ein tiefes, ruhiges Blau probiere linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Jede Farbpalette auf dieser Seite lässt sich als CSS kopieren.

### Ist weißer Text auf einem blauen Farbverlauf lesbar?

Auf tiefen und mitteldunklen Blautönen ja. Auf helleren Blautönen wie #3b82f6 fällt weißer Text unter das für Fließtext empfohlene Verhältnis von 4,5:1.

### Wie lasse ich einen blauen Farbverlauf weniger nach Konzern aussehen?

Neige ihn zu Türkis oder Violett, wähle sehr tiefe oder sehr blasse Blautöne statt Mittelblau, füge Körnung hinzu und nutze einen kleinen warmen Akzent.