# Blau Lila Farbverlauf: 20 Codes für saubere Übergänge

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

Blau und Lila sind Nachbarn und mischen sich daher leichter als fast jedes andere Paar. Deshalb sehen auch so viele Blau-Lila-Verläufe gleich aus. Hier sind zwanzig, bei denen das nicht so ist.

## The short version

- Ein Blau Lila Farbverlauf mischt benachbarte Farbtöne wie Blau #3b82f6, Indigo #4f46e5 und Violett #7c3aed, der Übergang bleibt also ohne Brückenfarbe sauber.
- Das häufigste Problem bei Blau-zu-Lila-Mischungen ist nicht Schlamm, sondern Gleichförmigkeit, denn die Standard-Diagonale von Indigo zu Violett wird überall benutzt.
- Mischungen zwischen Cyan und Pink oder zwischen stumpfen Blau- und stumpfen Lilatönen können in der Mitte grau werden, und die Interpolation in OKLCH hält sie leuchtend.
- Weißer Text liest sich gut auf Indigo und Violett, scheitert aber oft auf mittleren Blautönen und Lavendel, wo tiefe Indigotinte besser funktioniert.
- Ein dunkler Grund, eine sparsam genutzte dritte Farbe und etwas Körnung lassen einen Blau Lila Farbverlauf durchdacht statt standardmäßig wirken.

Ein **Blau Lila Farbverlauf** läuft zwischen benachbarten Farbtönen im Farbkreis: Blau `#3b82f6`, Indigo `#4f46e5`, Violett `#7c3aed` und die sanften Perlblau- und Lavendeltöne drumherum. Weil die Farbtöne nebeneinander liegen, bleibt die Mischung fast automatisch sauber. Schwieriger ist es, einen zu machen, der nicht aussieht wie die Tausenden App-Icons und Konferenzfolien, die schon einen nutzen. Unten stehen zwanzig Codes in vier Stimmungen, die Fälle, in denen die Mischung doch stumpf wird, und die Textfarben, die auf jedem lesbar sind.

## Warum sich Blau und Lila so gut mischen

Lila ist Blau mit etwas Rot darin. Geh von einem zum anderen, und jeder Schritt dazwischen ist eine echte, gesättigte Farbe: Blau, Indigo, Violett. Vergleiche das mit dem Mischen von Blau in Orange, wo der Mittelpunkt ein flaches Grau ist. [Analoge Farben](https://gradiently.design/de/guide/analogous-colors) erklärt das Prinzip, und der [Farbkreis](https://gradiently.design/de/guide/color-wheel) zeigt, wo jeder Farbton sitzt.

- Mitternacht: #0f0a2e
- Tiefes Indigo: #1e1b4b
- Königsblau: #1d4ed8
- Blau: #3b82f6
- Indigo: #4f46e5
- Violett: #7c3aed
- Lavendel: #a78bfa
- Perlblauer Dunst: #c7d2fe

Die Blau-zu-Lila-Familie. Wähle drei oder vier benachbarte Farbfelder, und der Verlauf bleibt durchgehend leuchtend.

## Dunkle Blau Lila Farbverläufe: Nacht und Tiefe

Fang dunkel an, und der Verlauf wirkt sofort weniger beliebig. Ein Mitternachtsgrund mit Indigo- und Violettlicht wirkt wie ein Nachthimmel, ein Konzertsaal oder eine Premium-App. Diese fünf tragen helle Schrift wunderbar.

- Mitternachtsindigo: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`
- Violetter Mondaufgang: `radial-gradient(circle at 75% 20%, #7c3aed 0%, #1e1b4b 40%, #07051a 80%)`
- Marine zu Pflaume: `linear-gradient(135deg, #172554 0%, #312e81 50%, #581c87 100%)`
- Horizontglühen: `radial-gradient(ellipse at 50% 110%, #6366f1 0%, #1e1b4b 45%, #050414 85%)`
- Tiefe Strömung: `linear-gradient(200deg, #0b1023 0%, #1d4ed8 55%, #6d28d9 100%)`

Dunkle Blau Lila Farbverläufe. Banding zeigt sich bei solchen Mischungen am stärksten, füge also vor dem Export Körnung hinzu.

## Sanfte Blau Lila Farbverläufe: Perlblau und Lavendel

Hellst du die Familie auf, wird sie ruhig, verträumt und ein wenig nostalgisch. Das passt zu Wellness, Schlaf, Papeterie und allem, das auf eine sanfte Stimmung zielt. Halte die Tinte dunkel; Weiß verschwindet auf den meisten. Mehr findest du unter [Pastell-Farbverläufe](https://gradiently.design/de/guide/pastel-gradients).

- Perlblauer Hauch: `linear-gradient(135deg, #e0e7ff 0%, #c7d2fe 50%, #ddd6fe 100%)`
- Morgenlavendel: `linear-gradient(180deg, #dbeafe 0%, #e9d5ff 100%)`
- Fliederwolke: `radial-gradient(circle at 30% 30%, #f5f3ff 0%, #c4b5fd 55%, #a5b4fc 100%)`
- Kornblumenfeld: `linear-gradient(120deg, #bfdbfe 0%, #a5b4fc 50%, #c4b5fd 100%)`
- Papier zu Violett: `linear-gradient(160deg, #f8fafc 0%, #e0e7ff 45%, #a78bfa 100%)`

Sanfte Perlblau- und Lavendel-Mischungen. Tiefe Indigoschrift liest sich auf jeder davon.

## Elektrische Blau Lila Farbverläufe

Drehst du die Sättigung hoch, wird das Paar laut, synthetisch und sehr digital. Das passt zu Gaming, Musik, Tech-Launches und allem Nächtlichen. Nutze sie in Bändern oder als Glühen statt über ein ganzes Plakat, und kombiniere sie mit fast Schwarz, damit sie etwas haben, vor dem sie glühen. [Neon Farbverläufe](https://gradiently.design/de/guide/neon-gradients) zeigt die ganze Technik.

- Elektrisches Violett: `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`
- Himmel zu Orchidee: `linear-gradient(90deg, #0ea5e9 0%, #6366f1 50%, #a855f7 100%)`
- Indigo-Puls: `radial-gradient(circle at 50% 50%, #818cf8 0%, #4338ca 40%, #0f0a2e 80%)`
- Ultraviolett-Wirbel: `conic-gradient(from 200deg at 50% 50%, #1d4ed8, #7c3aed, #c026d3, #1d4ed8)`
- Schwarz zu Ultraviolett: `linear-gradient(180deg, #000000 0%, #312e81 60%, #8b5cf6 100%)`

Gesättigte Blau Lila Farbverläufe. Der erste ist der Klassiker; die übrigen sind unerwartetere Versionen davon.

## Blau Lila Farbverläufe mit einer dritten Farbe

Der schnellste Weg, einen Blau Lila Farbverlauf zu deinem eigenen zu machen, ist eine zusätzliche Farbe, sparsam genutzt. Pink führt ihn Richtung Dämmerung, Petrol Richtung Polarlicht, Gold Richtung Luxus und Pfirsich Richtung sanfter Sonnenaufgang.

- Dämmerung mit Pink: `linear-gradient(160deg, #1e1b4b 0%, #6d28d9 55%, #f472b6 100%)`
- Polarlicht-Petrol: `linear-gradient(135deg, #0f766e 0%, #3b82f6 45%, #7c3aed 100%)`
- Indigo mit Gold: `radial-gradient(circle at 85% 15%, #fbbf24 0%, #4c1d95 30%, #0f0a2e 75%)`
- Lavendel-Sonnenaufgang: `linear-gradient(180deg, #c7d2fe 0%, #c4b5fd 50%, #fed7aa 100%)`
- Blau, Violett, Karmesin: `linear-gradient(120deg, #1d4ed8 0%, #7c3aed 50%, #e11d48 100%)`

Zwanzig Codes insgesamt. Pink, Petrol und Karmesin liegen im Farbkreis neben Blau oder Lila; Gold bleibt ein kleines Licht und Pfirsich bleibt blass, sodass keine Mischung durch Grau läuft.

## Wenn ein Blau Lila Farbverlauf schlammig wird

Blau zu Violett ist sicher. Zwei verwandte Mischungen sind es nicht. Cyan in Pink durchquert einen großen Teil des Kreises, und stumpfe, gräuliche Blautöne in stumpfe Lilatöne ergeben eine leblose Mitte. In beiden Fällen ist die Lösung dieselbe: in OKLCH interpolieren, das Helligkeit und Sättigung über die Mischung gleichmäßig hält. [Schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) und [Verlaufs-Interpolation](https://gradiently.design/de/guide/gradient-interpolation) gehen tiefer.

```css
/* Default sRGB blend: can dull in the middle */
.card--srgb {
  background: linear-gradient(90deg, #06b6d4, #ec4899);
}

/* OKLCH blend: stays bright, passes through violet */
.card--oklch {
  background: linear-gradient(90deg in oklch, #06b6d4, #ec4899);
}

/* A safe blue purple hero with a fallback */
.hero {
  background-color: #1e1b4b;
  background-image: linear-gradient(160deg in oklch, #0f0a2e, #4f46e5 60%, #7c3aed);
  color: #eef2ff;
}
```

Das Hinzufügen von `in oklch` ändert, wie der Browser die Stopps mischt. Ältere Browser ignorieren die ganze Deklaration, behalte also eine Hintergrundfarbe als Fallback.

## Wie du einen Blau Lila Farbverlauf weniger beliebig wirken lässt

Die Diagonale von Violett zu Blau ist so vertraut, dass Menschen sie als Standard lesen, bevor sie irgendetwas lesen, das du daraufgeschrieben hast. Du brauchst keine exotischen Farben, um das zu vermeiden. Kleine, bewusste Entscheidungen genügen, und sie summieren sich.

- **Wähle zuerst einen Grund.** Ein Mitternachts- oder Papiergrund bestimmt die Stimmung mehr als das Blau oder Lila und hebt dich sofort vom leuchtenden Standard ab.
- **Nimm das Licht von der Diagonale.** Setze das hellste Violett mit einem radialen Verlauf in eine Ecke, statt es bei 135 Grad von Rand zu Rand laufen zu lassen.
- **Nutze ungleiche Stopps.** Lass Indigo 60 Prozent der Fläche halten und Violett nur die letzte Strecke. Gleiche Drittel wirken maschinell.
- **Füge einen Akzent an einer Stelle hinzu.** Ein Streifen Pink, Petrol oder Gold, wie in der Auswahl oben, bleibt viel stärker in Erinnerung als die Grundfarben.
- **Schließe mit Körnung ab.** Eine feine Rauschschicht verbirgt Banding und macht aus einer Bildschirmmischung eine Oberfläche; [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients) hat den Code.
- **Rendere jede Größe einzeln.** Das Licht sollte auf einer Story und auf einem Banner sinnvoll landen, nicht dort, wo ein Zuschnitt es lässt.

Auch Stimmungsnamen helfen. „Mitternachtsindigo mit Goldrand“ ist eine Entscheidung, die du über ein ganzes Jahr an Posts wiederholen kannst; „Blau Lila Farbverlauf“ ist es nicht.

## Text auf einem Blau Lila Farbverlauf

| Hintergrund | Text | Kontrast | Urteil |
| --- | --- | --- | --- |
| Indigo `#4f46e5` | Weiß | 6,3:1 | Gut |
| Violett `#7c3aed` | Weiß | 5,7:1 | Gut |
| Blau `#3b82f6` | Weiß | 3,7:1 | Nur große Überschriften |
| Lavendel `#a78bfa` | Weiß | 2,7:1 | Fällt durch |
| Lavendel `#a78bfa` | Tiefes Indigo `#1e1b4b` | 5,9:1 | Gut |
| Perlblauer Dunst `#c7d2fe` | Tiefes Indigo `#1e1b4b` | 10,7:1 | Ausgezeichnet |

WCAG-Kontrastverhältnisse. Mittleres Blau ist heller, als es aussieht, was viele Blau-zu-Lila-Designs am blauen Ende erwischt.

Ein quadratischer LinkedIn-Post, der Version 3 ankündigt, mit weißer Schrift auf einem dunklen Indigo-Violett-Verlauf

Ein LinkedIn-Post auf dunklem Indigo-Grund. Helle Schrift, das violette Glühen bleibt auf einer Seite.

Eine hohe Story mit dunkler Indigoschrift auf einem blassen Perlblau-Lavendel-Verlauf

Eine Story auf sanftem Perlblau mit tiefer Indigotinte.

Wenn Worte vom dunklen zum hellen Ende desselben Verlaufs wechseln, funktioniert keine einzelne Tinte überall. [Text auf Verläufen](https://gradiently.design/de/guide/text-on-gradient) behandelt die Optionen. In Gradiently erledigt Automatische Farbe das pro Zeile und wählt helle oder dunkle Schrift aus der eigenen Palette des Marks, sodass ein Blau-Lila-Hintergrund eine Überschrift nie verschluckt.

## FAQ

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

Ein verlässlicher ist `linear-gradient(135deg, #2563eb 0%, #7c3aed 100%)`. Für etwas Unerwarteteres starte von einem dunklen Grund: `linear-gradient(160deg, #0f0a2e 0%, #1e1b4b 45%, #4f46e5 100%)`.

### Passen Blau und Lila in einem Verlauf zusammen?

Ja. Sie sind Nachbarn im Farbkreis, daher ist jeder Schritt dazwischen eine saubere, gesättigte Farbe wie Indigo.

### Warum sieht mein Blau-zu-Pink-Verlauf in der Mitte grau aus?

Der Browser mischt standardmäßig in sRGB, was Mischungen dämpfen kann, die einen großen Teil des Kreises durchqueren. Füge `in oklch` nach dem Winkel hinzu, damit die Mitte leuchtend bleibt.

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

Weiß liest sich gut auf Indigo und Violett. Auf mittlerem Blau, Lavendel und Perlblau ist ein tiefes Indigo wie `#1e1b4b` sicherer.

### Welche Farbe liegt zwischen Blau und Lila?

Indigo. Ein typisches Indigo für Design ist `#4f46e5`, und dunklere Indigotöne liegen um `#312e81`.