Blaue Farbverläufe: 20 Farbpaletten von Eis bis Mitternacht

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.

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.

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.

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.

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.

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 erklärt, warum Konvention in beide Richtungen wirkt.

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 erklärt warum.

Text auf blauen Farbverläufen

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 hat die vollständige Methode.

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

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 zeigt, wie viel Körnung genug ist.

Für Violett direkt neben Blau siehe violette Farbverläufe, für grünere Optionen grüne Farbverläufe.