# Rosa Blau Farbverlauf Codes: von Zuckerwatte bis Neon

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

Rosa und Blau liegen etwas zu weit auseinander, um sich im Autopilot zu mischen. Behandelst du die Mitte gut, bekommst du Zuckerwatte-Himmel oder Neonschilder; ignorierst du sie, einen stumpfen Fliederfleck.

## The short version

- Ein Rosa Blau Farbverlauf mischt Rosatöne wie #f9a8d4 oder #ec4899 mit Blautönen wie #93c5fd oder #3b82f6, meist über Flieder oder Violett in der Mitte.
- Weil Rosa und Blau keine direkten Nachbarn sind, kann eine gerade Mischung in der Mitte gräulich werden, und ein Flieder- oder Violett-Stopp behebt das.
- Blasse Rosa-Blau-Mischungen wirken wie Zuckerwatte und brauchen dunkle Tinte, gesättigtes Pink und Cyan auf fast Schwarz wirken wie Neon.
- Weder leuchtendes Pink noch mittleres Blau trägt kleinen weißen Text gut, spare Weiß also für große Überschriften oder dunkle Gründe auf.
- Rosa und Blau passen zu Babypartys, Süßwarenläden, Creatorn, Gaming und Retro-Ästhetik wie Vaporwave und Y2K.

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.

- Zwei Stopps, Standardmischung: `linear-gradient(90deg, #f472b6 0%, #60a5fa 100%)`
- Mit einer violetten Brücke: `linear-gradient(90deg, #f472b6 0%, #c084fc 50%, #60a5fa 100%)`

Dasselbe Rosa und Blau, mit und ohne Brücken-Stopp. Das zweite bleibt durch die Mitte gesättigt. [Schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) erklärt die Farbwissenschaft.

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

- Zuckerwatte: `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`
- Babydecke: `linear-gradient(180deg, #fce7f3 0%, #e0f2fe 100%)`
- Zuckerwolke: `radial-gradient(circle at 20% 20%, #fbcfe8 0%, #ddd6fe 45%, #a5f3fc 100%)`
- Pfirsichmorgen: `linear-gradient(160deg, #fff7ed 0%, #fbcfe8 40%, #c7d2fe 100%)`

Pastell Rosa-Blau-Mischungen. Jede hat eine Flieder-, Perlblau- oder Creme-Stufe, sodass nichts in der Mitte staubig wird.

Für mehr von der sanften Palette gehen [Pastell-Farbverläufe](https://gradiently.design/de/guide/pastel-gradients) und [Pastell-Farbpaletten](https://gradiently.design/de/guide/pastel-color-palettes) weiter.

> **Pastell Rosa und Blau drucken** Sehr blasse Mischungen können auf ungestrichenem Papier fast verschwinden, und leuchtende Bildschirmblautöne drucken oft matter. Vertiefe für Einladungen und Flyer jeden Stopp leicht und bitte um einen Probedruck. [Verläufe im Druck](https://gradiently.design/de/guide/print-gradients) behandelt die Details.

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

- Abendhimmel: `linear-gradient(180deg, #7dd3fc 0%, #c4b5fd 50%, #f9a8d4 100%)`
- Sorbet: `linear-gradient(120deg, #f472b6 0%, #a78bfa 50%, #38bdf8 100%)`
- Poolparty: `radial-gradient(circle at 80% 80%, #fda4af 0%, #a5b4fc 45%, #7dd3fc 100%)`

Rosa-Blau-Verläufe mit mittlerer Sättigung. Ideal für Sommeraktionen und Creator-Inhalte.

## 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](https://gradiently.design/de/guide/neon-gradients) und [Synthwave-Farben](https://gradiently.design/de/guide/synthwave-colors) behandeln den Stil ausführlich.

- Nachtfahrt: `linear-gradient(180deg, #0b0720 0%, #3b0764 55%, #ec4899 100%)`
- Neonschild: `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`
- Rosa Lampe, Cyan-Dunst: `radial-gradient(ellipse at 20% 80%, #f0abfc 0%, #7e22ce 30%, #155e75 60%, #0b0720 85%)`
- Arcade-Sonnenaufgang: `conic-gradient(from 180deg at 50% 100%, #06b6d4, #8b5cf6, #ec4899, #06b6d4)`

Neon Rosa und Blau. Blasses Rosa und Cyan sind beide hervorragende Textfarben auf den dunklen Teilen.

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

| Hintergrund | Text | Kontrast | Urteil |
| --- | --- | --- | --- |
| Kaugummi `#f9a8d4` | Schiefer `#1e293b` | 8,1:1 | Ausgezeichnet |
| Babyblau `#93c5fd` | Schiefer `#1e293b` | 8,1:1 | Ausgezeichnet |
| Candy-Rosa `#fbcfe8` | Weiß | 1,4:1 | Fällt durch |
| Knallpink `#ec4899` | Weiß | 3,5:1 | Nur große Überschriften |
| Blau `#3b82f6` | Weiß | 3,7:1 | Nur große Überschriften |
| Nacht `#0b0720` | Cyan `#67e8f9` | 13,6:1 | Ausgezeichnet, Neon als Tinte |

Schiefer erreicht an beiden Pastellenden denselben Wert, eine Tinte funktioniert also über die ganze Zuckerwatte-Mischung.

Eine Babyparty-Einladung mit dunkler Schieferschrift auf einem sanften Rosa-Flieder-Babyblau-Verlauf

Eine Einladung im Format 5×7 Zoll auf Zuckerwatte, mit Schiefer-Schrift.

Eine Stream-Ankündigung im Querformat mit heller Schrift auf dunklem Hintergrund, beleuchtet von Neonpink und Cyan

Eine Stream-Ankündigung auf Neonpink und Cyan über fast Schwarz.

## 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](https://gradiently.design/de/guide/y2k-aesthetic) 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

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

Ein Pastell-Abschnitt mit Schiefertext und ein dunkler Neon-Abschnitt mit zwei farbigen Lichtern.

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.

## FAQ

### Was ist ein guter Code für einen Rosa Blau Farbverlauf?

Für Zuckerwatte probiere `linear-gradient(135deg, #fbcfe8 0%, #e9d5ff 50%, #bfdbfe 100%)`. Für Neon `linear-gradient(90deg, #ec4899 0%, #8b5cf6 50%, #06b6d4 100%)`.

### Warum sieht mein Rosa Blau Farbverlauf in der Mitte grau aus?

Eine gerade sRGB-Mischung zwischen einem warmen Rosa und einem kühlen Blau verliert auf halbem Weg Sättigung. Füge in der Mitte einen Flieder- oder Violett-Stopp hinzu oder schreibe `in oklch` nach dem Winkel.

### Welche Textfarbe passt auf einen Pastell Rosa Blau Farbverlauf?

Ein dunkler Schiefer wie `#1e293b` liest sich an beiden Enden mit etwa 8:1 Kontrast. Weiß fällt auf Pastellrosa und -blau durch.

### Was ist ein Zuckerwatte Farbverlauf?

Eine Pastellmischung aus Rosa und Babyblau, meist mit einer Flieder-Stufe dazwischen, benannt nach der Süßigkeit.

### Wie mache ich einen Neon Rosa Blau Farbverlauf?

Nutze gesättigtes Pink und Cyan auf fast schwarzem Grund, als Glühen oder Bänder statt als volle Füllung. Der dunkle Grund lässt die Farben beleuchtet wirken.