Rosa Blau Farbverlauf Codes: von Zuckerwatte bis Neon

Ein Rosa Blau Farbverlauf mischt ein Rosa wie #f9a8d4 oder #ec4899 in ein Blau wie #93c5fd oder #3b82f6. Die beiden liegen im Farbkreis etwas zu weit auseinander, um sich standardmäßig sauber zu mischen, die besten Versionen laufen deshalb in der Mitte über einen Flieder- oder Violett-Stopp. Hältst du das Paar blass, bekommst du Zuckerwatte; drehst du es gesättigt auf dunklem Grund auf, bekommst du Neon. Die Codes unten decken die ganze Spanne ab, mit der Lösung für die Mitte und den Textfarben, die funktionieren.

Warum ein Rosa Blau Farbverlauf in der Mitte grau wird

Browser mischen Verlaufsfarben standardmäßig in sRGB, und zwischen einem warmen Rosa und einem kühlen Blau kann diese Mischung Sättigung verlieren und leicht grau oder staubig aussehen. Es ist nicht so dramatisch wie das Mischen von Gegenfarben, aber man sieht es, besonders bei Pastellmischungen. Die Lösung: Benenne die Mitte selbst und füge einen Flieder- oder Perlblau-Stopp hinzu, damit jeder Punkt der Mischung klar bleibt.

In CSS kannst du auch linear-gradient(90deg in oklch, #f472b6, #60a5fa) schreiben, was Helligkeit und Sättigung über die Mischung gleichmäßig hält. Der Brücken-Stopp funktioniert dagegen überall und gibt dir Kontrolle darüber, welcher Flieder genau erscheint.

Zuckerwatte Farbverläufe: Pastell Rosa und Blau

Blasses Rosa, das in Babyblau übergeht, wirkt süß, leicht und ein wenig nostalgisch. Halte einen sanften Flieder oder Creme dazwischen und setze die Worte in dunklem Schiefer statt in Weiß.

Für mehr von der sanften Palette gehen Pastell-Farbverläufe und Pastell-Farbpaletten weiter.

Himmel und Sorbet: kräftigeres Rosa und Blau

Drehst du die Sättigung etwas hoch, wird das Paar sonnig und verspielt: ein Sommerhimmel am Tagesende, ein Sorbetstand, ein Poolparty-Flyer. Sie wirken noch immer freundlich statt laut.

Neon Rosa Blau Farbverläufe

Knallpink und elektrisches Cyan auf fast Schwarz sind das Markenzeichen von Vaporwave, Synthwave und viel Gaming-Design. Der dunkle Grund ist nicht optional: Er lässt die Farben glühen. Halte das Neon in Bändern, Rändern oder als Glühen und lass den größten Teil des Bildes dunkel. Neon Farbverläufe und Synthwave-Farben behandeln den Stil ausführlich.

Textfarben auf Rosa Blau Farbverläufen

Beide Enden eines Pastell-Verlaufs in Rosa und Blau sind hell, dunkler Schiefertext liest sich also auf der ganzen Fläche, was dies zu einem der leichtesten Paare für Schrift macht. Gesättigte Versionen sind kniffliger: Knallpink und mittleres Blau sind jeweils zu hell für kleinen weißen Text. Die Werte unten nutzen die WCAG-Kontrastformel.

Wo ein Rosa Blau Farbverlauf passt

• Babypartys und Gender Reveals: der traditionellste Einsatz, am besten in den blassesten Pastellen.
• Süßwarenläden, Bäckereien und Eis: Sorbet-Töne wirken essbar.
• Creator und Streamer: Neon-Versionen auf dunklen Gründen passen zu Gaming und Inhalten spät in der Nacht.
• Retro-Ästhetik: Vaporwave, Synthwave und Designs im Y2K-Look stützen sich alle auf das Paar.
• Pride: Hellblau, Rosa und Weiß sind die Farben der Transgender-Flagge, das Paar taucht daher im Pride-Monat im Design vielfach auf.

Rosa Blau Farbverlauf CSS

.cotton-candy {
  background: linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%);
  color: #1e293b;
}

.neon {
  background-color: #0b0720;
  background-image:
    radial-gradient(circle at 15% 85%, #ec4899 0%, transparent 40%),
    radial-gradient(circle at 85% 15%, #06b6d4 0%, transparent 40%);
  color: #fce7f3;
}

Das Neon-Muster, zwei radiale Lichter auf dunkler Basis, lässt sich leicht anpassen: Verschiebe die Lichter, ändere ihre Größe, füge ein drittes in Violett hinzu, wo sie sich treffen. Halte die Lichter klein; sobald sie mehr als die Hälfte des Bildes bedecken, verschwindet der dunkle Grund und mit ihm das Glühen. In Gradiently geht ein Mark weiter: Sein Licht bewegt sich langsam, und seine Schrift passt sich dem Teil der Mischung an, auf dem sie sitzt. Ein Design wird als Standbild-Post exportiert oder mit Pro als MP4- oder GIF-Schleife.