# Lila Farbverläufe: Paletten, Codes und wie du sie einsetzt [Canonical HTML page](https://gradiently.design/de/guide/purple-gradient) Lila ist eine der meistgenutzten Verlaufsfarben im Web, und das macht es zu einer sicheren Wahl und zu einer, in der man leicht untergeht. Hier sind Paletten, die durchdacht wirken, mit den Codes zum Nutzen. ## The short version - Ein lila Farbverlauf mischt Töne von Violett, Lila, Pflaume oder Lavendel, oft mit einem benachbarten Blau oder Pink. - Lila wird häufig mit Kreativität, Luxus und Fantasie verbunden und ist zu einer sehr verbreiteten Farbe im Tech-Branding geworden. - Tiefe Lilatöne wie #4c1d95 tragen weiße Schrift bequem, während helle Lavendeltöne dunkle Schrift brauchen. - Mittlere Lilatöne wie #a78bfa sind für Text am schwierigsten, weil sie zu hell für weiße Schrift und zu gesättigt sind, um unter Schwarz ruhig zu wirken. - Wärme, Tiefe oder Körnung hinzuzufügen, ist der schnellste Weg, damit ein lila Verlauf nicht wie eine Standardvorgabe aussieht. Ein **lila Farbverlauf** mischt Töne von Violett, Lila, Pflaume oder Lavendel, oft mit einem benachbarten Blau oder Pink. Er gehört zu den beliebtesten Verlaufsfarben für Websites, Apps und Social Posts, weil Lila fantasievoll und ein wenig luxuriös wirkt und auf einem dunklen Bildschirm wunderschön leuchtet. Unten findest du lila Verlaufspaletten nach Stimmung geordnet, jeweils mit CSS zum Kopieren, und danach, wie du Text daraufsetzt und wie du sie davor bewahrst, wie die aller anderen auszusehen. ## Die Lila-Familie: Violett, Lila, Pflaume und Lavendel „Lila“ umfasst eine große Bandbreite. Violett neigt zu Blau und wirkt kühl und elektrisch. Magenta neigt zu Pink und wirkt warm und laut. Pflaume ist ein tiefes, rötliches Lila, das reich wirkt; Lavendel ist ein blasses, gräuliches Lila, das weich wirkt. Wenn du weißt, welches du willst, wird jede weitere Entscheidung leichter. - Tiefviolett: #2e1065 - Amethyst: #4c1d95 - Violett: #7c3aed - Magentalila: #a21caf - Pflaume: #5b2149 - Sanftes Violett: #a78bfa - Lavendel: #c4b5fd - Fliederdunst: #ede9fe Acht Lilatöne, vom tiefsten zum blassesten. Links blaustichig, in der Mitte rotstichig, rechts weich. ## Was ein lila Farbverlauf signalisiert In weiten Teilen Europas und Amerikas wird Lila mit Kreativität, Fantasie und Luxus verbunden. Die Verbindung zum Luxus ist historisch: Jahrhundertelang war Purpurfarbstoff selten und teuer und wurde deshalb von den Mächtigen getragen. In den letzten Jahren ist Lila außerdem zu einer der häufigsten Farben im Software- und Tech-Branding geworden, wo es Erfindergeist andeutet, ohne die Ernsthaftigkeit von Blau. Anderswo gelten andere Bedeutungen; Details stehen unter [Farbbedeutungen weltweit](https://gradiently.design/de/guide/color-meanings-around-the-world). - **Kreativtools und Studios:** Violett und Magenta wirken erfinderisch und etwas verspielt. - **Beauty und Wellness:** Lavendel- und Fliedertöne wirken weich und erholsam. - **Musik, Nachtleben und Gaming:** Tiefe Lilatöne mit leuchtendem Schein wirken wie der Abend. - **Premiumprodukte:** Pflaume und fast schwarzes Amethyst wirken reich, besonders mit einem warmen Glanzlicht. Der Preis ist die Vertrautheit. Weil so viele Tech-Marken einen violetten Verlauf nutzen, muss sich deiner seinen Unterschied durch Tiefe, Wärme, Material oder konsequenten Einsatz verdienen. ## Dunkle lila Farbverläufe Dunkle lila Verläufe wirken reich und nächtlich. Sie funktionieren für Musik, Nachtleben, Premiumprodukte und alles, was sich wie der Abend anfühlen soll. Halte den dunkelsten Stopp nah an Schwarz und lass eine beleuchtete Farbe daraus aufsteigen. - Amethystnacht: `linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%)` - Violettes Leuchten: `radial-gradient(circle at 70% 20%, #7c3aed 0%, #2e1065 45%, #0b0617 100%)` - Pflaumensamt: `linear-gradient(180deg, #120a1c 0%, #3b1236 60%, #7a2d5c 100%)` - Indigo zu Violett: `linear-gradient(135deg, #0b1026 0%, #312e81 50%, #6d28d9 100%)` Vier dunkle lila Verläufe. Jeder steigt aus fast Schwarz auf, sodass weiße Schrift auf dem Großteil der Fläche bequem steht. ## Helle lila Farbverläufe und Pastell-Lila Blasse Lilatöne wirken ruhig, sanft und ein wenig verträumt. Sie passen zu Wellness, Beauty, Papeterie und allem, was weich wirken soll. Sie brauchen dunkle Schrift und sehen mit einem Hauch Wärme oder Blau am besten aus, damit sie nicht wie flaches Graulila wirken. - Fliederdunst: `linear-gradient(135deg, #f5f3ff 0%, #ddd6fe 55%, #c4b5fd 100%)` - Lavendel zu Zartrosa: `linear-gradient(135deg, #ede9fe 0%, #fbcfe8 100%)` - Immergrün zu Orchidee: `linear-gradient(160deg, #e0e7ff 0%, #ddd6fe 50%, #f5d0fe 100%)` - Lavendel zu Pfirsich: `linear-gradient(135deg, #f3e8ff 0%, #fde2c8 100%)` Sanfte lila Verläufe. Die warmen Enden (Zartrosa, Pfirsich) verhindern, dass sie kalt wirken. ## Leuchtende lila Farbverläufe Leuchtende Lilatöne sind die lautesten und die häufigsten. Nutze sie für Launches, Gaming, Events und mutige Marken und halte sie von langen Texten fern. Mischt du Lila Richtung Pink oder Orange, bleibt die Mitte hell; Richtung Grün wird sie grau. - Violett zu Pink: `linear-gradient(135deg, #6d28d9 0%, #db2777 100%)` - Elektroviolett: `linear-gradient(135deg, #4f46e5 0%, #9333ea 50%, #e879f9 100%)` - Violett zum Sonnenuntergang: `linear-gradient(135deg, #7c3aed 0%, #ec4899 50%, #fb923c 100%)` - Tiefes Magenta: `linear-gradient(135deg, #3b0764 0%, #a21caf 55%, #f472b6 100%)` Gesättigte lila Verläufe. Alle vier mischen sich zu warmen Nachbarn, sodass keiner in der Mitte stumpf wird. ## Text auf lila Farbverläufen Bei Lila macht man mit Text leicht Fehler, weil mittlere Lilatöne an einer ungünstigen Stelle liegen: zu hell für weiße Schrift, zu dunkel und gesättigt, als dass Schwarz ruhig wirkt. Wähl die Schriftfarbe danach, wo der Text tatsächlich steht. | Text auf Hintergrund | Kontrast | Urteil | | --- | --- | --- | | Weiß auf `#2e1065` | 15,2:1 | Ausgezeichnet für jeden Text | | Weiß auf `#4c1d95` | 11,0:1 | Ausgezeichnet | | Weiß auf `#7c3aed` | 5,7:1 | Gut für Fließtext und große Schrift | | Weiß auf `#a78bfa` | 2,7:1 | Fällt durch, selbst für große Schrift | | `#1e1033` auf `#a78bfa` | 6,6:1 | Dunkle Schrift funktioniert hier | | `#1e1033` auf `#ede9fe` | 15,0:1 | Ausgezeichnet | Berechnete Kontrastverhältnisse nach WCAG. Fließtext braucht 4,5:1, große Schrift 3:1. Prüfe auf einem Verlauf die hellste Stelle hinter weißer Schrift und die dunkelste hinter dunkler Schrift. [Text auf einem Farbverlauf](https://gradiently.design/de/guide/text-on-gradient) behandelt die Platzierung, und [Farbkontrast](https://gradiently.design/de/guide/color-contrast-accessibility) erklärt die Verhältnisse. Ein quadratisches Podcast-Cover mit dem Titel Nachtschicht auf einem tiefen Verlauf Dunkel und reich: ein Cover, das zum Hören am Abend passt. Ein Hochformat-Tipp-Post mit dunklem Text auf einem sanften, blassen Verlauf Weich und hell: ein sanfter Post mit dunkler Schrift. ## So wirkt ein lila Farbverlauf nicht beliebig Violett zu Pink in 135 Grad ist einer der meistgenutzten Verläufe überhaupt. Er ist attraktiv und sagt nichts mehr darüber aus, wer ihn nutzt. Vier kleine Änderungen helfen. - **Vertiefen.** Starte mit fast schwarzem Lila statt mittlerem Violett. Tiefe wirkt hochwertig. - **Wärmen.** Füge an einem Ende ein Glanzlicht in Pfirsich, Aprikose oder Gold hinzu. Lila mit warmem Licht wirkt wie Dämmerung statt wie Software. - **Die Form ändern.** Ein tiefes radiales Leuchten oder ein senkrechter Verlauf wirkt eher wie Licht als eine diagonale Füllung. Siehe [radiale Farbverläufe](https://gradiently.design/de/guide/radial-gradient). - **Ein Material hinzufügen.** Feine Körnung oder ein weicher Glanz macht aus einem flachen Übergang eine Oberfläche. Siehe [körnige Farbverläufe](https://gradiently.design/de/guide/grainy-gradients). ```css .hero { background-color: #1a0b2e; background-image: radial-gradient(circle at 75% 110%, #fdba74 0%, transparent 35%), linear-gradient(in oklch 170deg, #0f0a1f 0%, #3b1a6e 55%, #7c3aed 100%); } ``` Eine tiefviolette Fläche mit warmem Leuchten, das von unten aufsteigt. Die Vollfarbe dient als Rückfall für ältere Browser. Wenn Lila deine Markenfarbe ist, zählt Konsistenz mehr als der exakte Übergang. [Branding mit Farbverläufen](https://gradiently.design/de/guide/gradient-branding) zeigt, wie du ein Lila zu deinem machst. Du kannst im Markt von Gradiently auch nach „tiefes Violett“ oder „Lavendel“ suchen, um lebendige lila Marks zu sehen. ## FAQ ### Welche Farben passen in einem Verlauf zu Lila? Blau, Pink, Magenta und warme Glanzlichter wie Pfirsich oder Gold mischen sich sauber mit Lila. Grün und Gelb liegen gegenüber und werden in der Mitte eines Verlaufs tendenziell grau. ### Wie lautet der CSS-Code für einen lila Farbverlauf? Zum Beispiel ergibt linear-gradient(160deg, #0f0a1f 0%, #2e1065 55%, #6d28d9 100%) einen tiefen Amethyst-Verlauf. Jedes Beispiel auf dieser Seite lässt sich direkt kopieren. ### Welche Textfarbe funktioniert auf einem lila Farbverlauf? Weiß funktioniert auf tiefen und mitteldunklen Lilatönen, eine fast schwarze lila Schrift auf hellen und mittleren. Prüfe den Kontrast dort, wo der Verlauf hinter weißer Schrift am hellsten ist. ### Was signalisiert ein lila Farbverlauf? Lila wird häufig mit Kreativität, Fantasie und Luxus verbunden. Es ist auch im Tech-Branding sehr verbreitet, was es vertraut macht, aber schwerer, damit aufzufallen.