# Rosa Lila Farbverlauf Codes, von Candy bis Dämmerung

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

Rosa und Lila können zuckrig, glamourös oder leise düster wirken, je nachdem, wie hell und gesättigt du gehst. Hier sind die Codes für jede Stufe dieser Spanne, und wie du wählst.

## The short version

- Ein Rosa Lila Farbverlauf mischt benachbarte Farbtöne wie Pink #ec4899, Magenta #c026d3 und Violett #9333ea, der Übergang bleibt also ohne Brückenfarbe leuchtend.
- Dasselbe Paar wirkt hell wie Zuckerwatte, gesättigt wie Glamour und dunkel wie Dämmerung.
- Weißer Text scheitert auf leuchtendem Pink und hellem Flieder, nutze dort also tiefe Pflaumentinte und spare Weiß für Magenta, Violett und dunkle Gründe auf.
- Ein kleiner Anteil Orange, Blau oder Gold macht einen Rosa Lila Farbverlauf weit unerwarteter als die übliche Zwei-Farben-Mischung.
- Rosa und Lila passen zu Beauty, Nachtleben, Musik, Feiern und Creator-Marken, und ein dunkler Grund verhindert, dass sie kindlich wirken.

Ein **Rosa Lila Farbverlauf** mischt zwei Nachbarn im Farbkreis, Pink wie `#ec4899` und Violett wie `#9333ea`, mit Magenta und Orchidee dazwischen. Weil die Farbtöne angrenzen, bleibt die Mischung durchgehend leuchtend. Alles verändert die Helligkeit: Hältst du ihn blass, bekommst du Zuckerwatte, drehst du die Sättigung hoch, bekommst du Glamour, machst du ihn dunkel, bekommst du Dämmerung. Die Codes unten laufen von hell nach dunkel, sodass du zuerst die Stimmung wählen kannst und die Hex-Werte danach.

## Stimmungen von Rosa und Lila auf einen Blick

| Stimmung | Typische Stopps | Wirkung | Passt zu |
| --- | --- | --- | --- |
| Candy | `#fbcfe8` bis `#e9d5ff` | Süß, weich, jung | Bäckereien, Babypartys, Papeterie |
| Orchidee | `#f0abfc` bis `#c084fc` | Verträumt, romantisch | Beauty, Hochzeiten, Wellness |
| Magenta | `#ec4899` bis `#9333ea` | Kräftig, glamourös | Nachtleben, Musik, Creator |
| Dämmerung | `#2e0a2f` bis `#9d174d` | Düster, erwachsen | Parfüm, Cocktails, späte Events |

Vier Stimmungen aus einem Paar. Jede Stufe der Tabelle abwärts ist dunkler oder gesättigter als die vorige.

- Candy-Rosa: #fbcfe8
- Kaugummi: #f9a8d4
- Knallpink: #ec4899
- Magenta: #c026d3
- Orchideenviolett: #a855f7
- Violett: #9333ea
- Flieder: #e9d5ff
- Pflaumentinte: #2e0a2f

Eine funktionierende Palette für das Paar, einschließlich der hellen und dunklen Enden, die du für Text brauchst.

## Candy Rosa Lila Farbverläufe

Blasse Rosa- und Fliedertöne zusammen sind so sanft, wie Farbe nur sein kann. Sie passen zu allem Süßen oder Sanften, kippen aber schnell ins Kindliche. Die Lösung ist ein leicht warmer Grund, ein Pfirsich oder Creme an einem Ende und sehr selbstbewusste dunkle Schrift.

- Zuckerwatte: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Erdbeermilch: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Pfirsich, Rosa, Flieder: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Candy-Mischungen, alle mit tiefer Pflaumentinte gesetzt. Der Pfirsich in der dritten verhindert, dass sie zuckrig wirkt.

Für mehr von dieser Sanftheit behandelt [Pastell-Farbverläufe](https://gradiently.design/de/guide/pastel-gradients) die ganze Familie, und [Lavendel Farbverläufe](https://gradiently.design/de/guide/lavender-gradient) neigt weiter zu Lila.

## Orchideen- und Magenta-Verläufe

Drehst du die Sättigung hoch, wird das Paar glamourös. Das ist das Revier von Nagellack, Festival-Armbändern und Albumcovern. Nutze einen leichten Winkel oder ein radiales Glühen statt einer flachen Diagonale und lass eine ruhigere Fläche für Worte.

- Knallpink zu Violett: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Orchideenblüte: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Beeren-Glamour: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Schillernder Wirbel: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Gesättigte Rosa Lila Farbverläufe. Der konische wirkt als Schimmer, nah an [holografischen Farbverläufen](https://gradiently.design/de/guide/holographic-gradients).

## Dämmerung: dunkle Rosa Lila Farbverläufe

Machst du das Paar dunkel, wird es sofort erwachsen. Ein pflaumenschwarzer Grund mit Himbeer- und Violettlicht wirkt wie der Himmel zwanzig Minuten nach Sonnenuntergang oder eine Cocktailbar bei gedämpftem Licht. Das sind die vielseitigsten der Auswahl, und sie tragen weißen oder blassrosa Text mühelos.

- Zwanzig nach Sonnenuntergang: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Himbeerglühen: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- Pflaume zu Rose: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Violettes Bühnenlicht: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Dunkle Rosa Lila Farbverläufe. Füge feine Körnung hinzu, denn dunkle Mischungen zeigen zuerst Banding.

Sie liegen nah an [Sonnenuntergang Farbverläufen](https://gradiently.design/de/guide/sunset-gradient) und [Galaxie Farbverläufen](https://gradiently.design/de/guide/galaxy-gradient), und du kannst dich frei bei beiden bedienen.

## Eine dritte Farbe hinzufügen, ohne zu verschlammen

Die übliche Diagonale von Knallpink zu Violett ist überall, eine zusätzliche Farbe ist also der schnellste Weg, sie zu deiner zu machen. Wähle eine Farbe, die an Pink oder Lila grenzt: Orange und Korall liegen neben Pink, Blau und Indigo neben Lila. Grün liegt Magenta gegenüber, weshalb Pink in Grün in der Mitte grau wird.

- Violett, Pink, Mandarine: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Blaue Stunde: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta mit Gold: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Drei Rosa Lila Farbverläufe mit einer benachbarten dritten Farbe. Jeder Schritt bleibt gesättigt.

## So wählst du einen Rosa Lila Farbverlauf für deine Marke

1. **Entscheide zuerst hell oder dunkel** Der größte Teil der Stimmung kommt von der Helligkeit. Eine blasse Mischung sagt sanft; ein Pflaumengrund sagt Abend. Wähle eins und behalte es für jeden Post.
2. **Wähle, welche Farbe führt** Führendes Pink wirkt wärmer und verspielter. Führendes Lila wirkt kühler und geheimnisvoller. Gib der führenden Farbe etwa zwei Drittel der Fläche.
3. **Plane, wo die Worte sitzen** Setze die Überschrift über das dunklere, ruhigere Ende und das leuchtendste Pink in eine Ecke, damit du nie mit dem Hintergrund um Aufmerksamkeit kämpfst.
4. **Teste in jeder Größe** Eine Mischung, die auf einem quadratischen Post funktioniert, kann auf einer Story ihre hellste Stelle hinter den Text legen. Prüfe Post, Story und Banner, bevor du dich festlegst.

Wenn du oft postest, schreibe das Ergebnis als kurzes Rezept auf: Grund, Leitfarbe, Akzent, wo das Licht sitzt. Diese eine Zeile hält einen ganzen Feed einheitlich, was mehr zählt als jeder einzelne schöne Verlauf. [Markenkonsistenz](https://gradiently.design/de/guide/brand-consistency) geht weiter.

## Textfarben auf Rosa und Lila

Leuchtendes Pink ist heller, als es aussieht, weiße Überschriften auf Knallpink sind also schwächer, als man erwartet. Violett und Magenta tragen Weiß gut. Am hellen Ende ist tiefes Pflaumenviolett die Tinte, die das Design in einer Familie hält. Die Verhältnisse sind WCAG-Kontrast; strebe 4,5:1 für kleinen Text und mindestens 3:1 für große Überschriften an. [Farbkontrast und Barrierefreiheit](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Schwellenwerte.

| Hintergrund | Text | Kontrast | Urteil |
| --- | --- | --- | --- |
| Knallpink `#ec4899` | Weiß | 3,5:1 | Nur große Überschriften |
| Tiefes Pink `#db2777` | Weiß | 4,6:1 | Gut |
| Magenta `#c026d3` | Weiß | 4,7:1 | Gut |
| Violett `#9333ea` | Weiß | 5,4:1 | Gut |
| Kaugummi `#f9a8d4` | Pflaumentinte `#3b0a3f` | 8,9:1 | Ausgezeichnet |
| Pflaumentinte `#2e0a2f` | Kaugummi `#f9a8d4` | 9,6:1 | Ausgezeichnet, Rosa als Tinte |

Miss hinter jeder Textzeile, am hellsten Punkt des Verlaufs.

Ein Nagelsalon-Post im Hochformat mit weißer Schrift auf einem gesättigten Pink-Violett-Verlauf

Ein Nagelsalon-Post auf gesättigter Orchidee, weiße Schrift auf der violetten Seite.

Eine hohe Clubnacht-Story mit blassrosa Schrift auf einem dunklen Pflaumenverlauf, unten von Himbeere beleuchtet

Eine Clubnacht-Story auf Dämmerungspflaume mit Himbeerlicht tief im Bild.

## Rosa Lila Farbverlauf CSS

```css
.dusk {
  background-color: #1e0b2e;
  background-image:
    radial-gradient(circle at 80% 85%, #db2777 0%, transparent 45%),
    linear-gradient(180deg in oklch, #1e0b2e 0%, #581c87 100%);
  color: #fce7f3;
}

.headline-gradient {
  background: linear-gradient(90deg, #ec4899, #9333ea);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Ein Dämmerungsabschnitt mit Himbeerglühen und eine Überschrift von Pink zu Violett mit beschnittenem Hintergrundtext.

Verlaufstext ist auffällig, nutze ihn aber nur für kurze Anzeigeworte, nie für Fließtext. [CSS-Verlaufstext](https://gradiently.design/de/guide/css-gradient-text) behandelt die Fallbacks. Willst du einen Rosa-Lila-Look, den kein anderer veröffentlichen kann, lässt dich der Markt von Gradiently Marks nach Farbwörtern wie „Orchidee“ durchsuchen. Jeder Mark ist ein Unikat, und sobald du ihn sicherst, kann nur du mit ihm exportieren; außerdem hält er Schrift über beide Enden der Mischung von selbst lesbar.

## FAQ

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

Ein Klassiker ist `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. Für etwas Düstereres probiere `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Passen Rosa und Lila zusammen?

Ja. Sie sind Nachbarn im Farbkreis, mit Magenta dazwischen, und mischen sich daher in jeder Helligkeit sauber.

### Welche Textfarbe passt auf einen Rosa Lila Farbverlauf?

Weiß liest sich gut auf Magenta, Violett und dunkler Pflaume. Auf Knallpink nutze Weiß nur für große Überschriften, und auf blassem Rosa oder Flieder ein tiefes Pflaumenviolett wie `#3b0a3f`.

### Wie lasse ich einen Rosa Lila Farbverlauf weniger kindlich wirken?

Geh dunkler oder gesättigter, nutze einen Pflaumengrund und füge in einem kleinen Bereich eine erwachsene dritte Farbe wie Gold oder tiefes Blau hinzu.

### Welche Farbe liegt zwischen Rosa und Lila?

Magenta, etwa `#c026d3`, mit Orchidee als hellerer Version.