# Magenta Farbverlauf: elektrische Codes zwischen Pink, Lila

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

Magenta ist eine der lautesten Farben auf dem Bildschirm und eine der am schwersten zu zähmenden. Diese Codes zeigen, wo es zwischen Pink und Lila sitzt, womit du es mischst und was im Druck passiert.

## The short version

- Magenta liegt im HSL-Farbkreis bei 300 Grad, auf halbem Weg zwischen Rot und Blau, weshalb es weder als Pink noch als Lila gelesen wird.
- Auf Bildschirmen ist reines Magenta `#ff00ff`, derselbe Wert, den CSS Fuchsia nennt.
- Magenta mischt sich sauber mit Violett, Blau, Orange und Cyan, wird aber grau, wenn es direkt mit Grün gemischt wird.
- Druck-Magenta ist weit weniger intensiv als Bildschirm-Magenta, helle Magenta-Verläufe wirken auf Papier daher matter.
- Weiße Schrift auf reinem Magenta erreicht nur etwa 3,1 zu 1 Kontrast, genug für große Überschriften, aber nicht für kleinen Text.

Ein **Magenta Farbverlauf** mischt die leuchtende Farbe zwischen Pink und Lila mit einem Nachbarn: Violett für etwas Elektrisches, Orange für Hitze, Cyan für einen Cyber-Look oder fast Schwarz für Tiefe. Reines Bildschirm-Magenta ist `#ff00ff` und intensiv genug, dass der Verlauf meist am besten funktioniert, wenn Magenta ein Ende der Mischung ist statt das Ganze. Die Codes unten decken jede Richtung ab, mit Hinweisen zu Schrift und dazu, wie sich Magenta im Druck verhält.

## Magenta, Pink und Lila: wo die Grenze verläuft

Im HSL-Farbkreis liegt Magenta bei 300 Grad, genau zwischen Rot und Blau. Schiebst du es Richtung Rot, wird es Pink; Richtung Blau wird es Lila und dann Violett. Magenta ist auch dafür berühmt, im Regenbogen nicht vorzukommen: Es gibt keine einzelne Wellenlänge für es, und dein Auge nimmt es wahr, wenn es rotes und blaues Licht zusammen empfängt. Das ist ein Grund, warum es so künstlich und elektrisch wirkt.

| Farbe | Hex | Neigt zu | Wirkung |
| --- | --- | --- | --- |
| Violett | `#7c3aed` | Blau | Ruhig, kreativ |
| Lila | `#a21caf` | Leicht zu Blau | Satt, königlich |
| Magenta | `#ff00ff` | Keinem | Elektrisch, laut |
| Knallmagenta | `#e6007e` | Leicht zu Rot | Kräftig, modisch |
| Pink | `#ff4fa3` | Rot | Verspielt, warm |

Die Nachbarschaft um Magenta. Ein Magenta Farbverlauf leiht sich meist eine davon als zweiten Stopp.

- Bildschirm-Magenta: #ff00ff
- Elektrisches Magenta: #e600e6
- Tiefes Magenta: #a3006f
- Wein: #5c0045
- Orchidee: #f3a6f0
- Ultraviolett: #6a00f4
- Mandarine: #ff8a3d
- Cyan: #00e5ff

Magenta und seine besten Partner. Ultraviolett, Mandarine und Cyan schieben es jeweils in eine völlig andere Richtung.

Willst du eigentlich etwas Weicheres und Wärmeres, näher an Kaugummi oder Rose als an Neon, ist die Sammlung [rosa Farbverlauf](https://gradiently.design/de/guide/pink-gradient) der bessere Ausgangspunkt. Magenta verdient seinen Platz, wenn du eine Farbe willst, an der niemand vorbeiscrollen kann.

## Elektrische Magenta Farbverlauf Codes

Magenta zu Violett oder Blau ist die klassische elektrische Paarung. Sie wandert am Farbkreis entlang, ohne etwas Schlammiges zu kreuzen, die Mischung bleibt also durchgehend leuchtend. Sie passen zu Musik, Nachtleben, Gaming und kreativen Tools. Willst du diese Richtung mit mehr Blau als Magenta, übernehmen die Codes für den [lila Farbverlauf](https://gradiently.design/de/guide/purple-gradient).

- Magenta zu Ultraviolett: `linear-gradient(135deg, #ff00ff 0%, #b100e8 50%, #6a00f4 100%)`
- Magenta zu Elektroblau: `linear-gradient(135deg, #ff1fd1 0%, #a83cff 50%, #3a5bff 100%)`
- Magenta zu Cyan: `linear-gradient(135deg, #ff00ff 0%, #8f6bff 50%, #00e5ff 100%)`
- Orchideen-Pastell: `linear-gradient(135deg, #ffd6fb 0%, #f3a6f0 50%, #d68cf5 100%)`

Kühle Magentas. Magenta zu Cyan läuft in der Mitte durch ein weiches Perlblau, weshalb es nie grau wird.

## Knallmagenta und Sonnenuntergangs-Codes

Dreh dich auf dem Farbkreis in die andere Richtung, und Magenta heizt sich auf: über Pink zu Korall und Orange. Das ist der Look der Grafik der späten 1980er, von Synthwave und Vaporwave und vieler Sommerfestival-Plakate. Ein dunkler oberer Stopp macht daraus eine Dämmerung. [Vaporwave-Farben](https://gradiently.design/de/guide/vaporwave-colors) geht weiter in diese Welt.

- Magenta zu Mandarine: `linear-gradient(135deg, #e600e6 0%, #ff2e8a 45%, #ff8a3d 100%)`
- Magenta-Dämmerung: `linear-gradient(180deg, #2a0a4a 0%, #a3007d 45%, #ff3d8b 75%, #ffb36b 100%)`

Warme Magentas. Halte Orange als helleres Ende, damit der hellste Punkt warm und der tiefste magenta ist.

## Tiefes Magenta auf dunklem Grund

Magenta wirkt am hochwertigsten, wenn es aus der Dunkelheit glüht, statt das Bild zu füllen. Ein Wein- oder Pflaumengrund mit einem Magenta-Licht wirkt wie Luxusmode oder eine Bar spät in der Nacht; über ein ganzes Plakat verteilt, wirkt dasselbe Magenta wie ein Rabatt-Flyer. Dunkle Gründe geben weißer Schrift außerdem ein leichtes Zuhause.

- Tiefes Magenta: `linear-gradient(160deg, #1a0012 0%, #5c0045 50%, #a3006f 100%)`
- Magenta-Glühen auf Schwarz: `radial-gradient(circle at 70% 30%, #ff3df5 0%, #a1009b 35%, #3d0040 70%, #12000f 100%)`

Dunkle Magentas. Die Glüh-Version ist die, nach der du greifst, wenn Magenta hochwertig statt laut wirken soll.

> **Magenta zu Grün vermeiden** Grün liegt Magenta direkt gegenüber, und eine gerade Mischung zwischen ihnen läuft in der Mitte durch Grau. Willst du beides, lass sie mit einer harten Kante aufeinandertreffen oder nutze Grün als kleinen Akzent. [Schlammige Farbverläufe](https://gradiently.design/de/guide/muddy-gradients) zeigt, warum.

## Magenta am Bildschirm gegenüber dem Druck

Bildschirm-Magenta besteht aus Licht, Druck-Magenta ist Tinte, eine der vier Prozessfarben im CMYK. Prozess-Magenta ist viel weniger intensiv und wird am Bildschirm meist mit etwa `#ec008c` dargestellt. Ein Magenta Farbverlauf, der auf deinem Monitor glüht, kann auf einem Flyer also flach und rosig wirken. [RGB vs. CMYK](https://gradiently.design/de/guide/rgb-vs-cmyk) erklärt die Lücke, und [Verläufe im Druck](https://gradiently.design/de/guide/print-gradients) behandelt das Proofing.

### Bildschirm-Magenta

- Aus rotem und blauem Licht
- Reiner Wert `#ff00ff`, extrem leuchtend
- Glüht auf dunklen Hintergründen
- Funktioniert für Neon- und Elektro-Looks

### Druck-Magenta

- Aus Tinte auf Papier
- Näher an `#ec008c`, spürbar matter
- Dunkle Gründe können schlammig drucken
- Für echtes Neon bieten Druckereien fluoreszierende Sonderfarben

## Schrift auf einem Magenta Farbverlauf

Magenta ist heller, als es aussieht. Weiße Schrift auf reinem `#ff00ff` erreicht nur etwa 3,1 zu 1 Kontrast, was für große Überschriften reicht, aber nicht für kleinen Text. Schwarz auf demselben Magenta erreicht etwa 6,7 zu 1, wirkt aber schwer. In der Praxis setzt du weiße Schrift auf das tiefere Ende des Verlaufs oder dunkelst das Magenta hinter kleinen Worten zu etwas wie `#a3006f` ab.

Auf Websites ergibt Magenta auch eine auffällige Verlaufsüberschrift. Beschränke es auf große Anzeigegrößen, wo der Kontrast hält, wie unter [CSS-Verlaufstext](https://gradiently.design/de/guide/css-gradient-text) beschrieben.

```css
.headline {
  font-size: clamp(2.5rem, 6vw, 5rem);
  background: linear-gradient(90deg, #ff00ff 0%, #6a00f4 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
```

Eine Überschrift von Magenta zu Ultraviolett. Nutze sie auf einer weißen oder sehr hellen Seite: Magenta erreicht dort etwa 3,1 zu 1 und Ultraviolett etwa 7 zu 1, während das violette Ende auf Schwarz fast verschwindet.

Eine hohe Story mit leuchtendem magenta-violettem Hintergrund und den Worten Einlass um zehn in Weiß

Eine Clubnacht-Story in einem Magenta-Mark. Die Worte sitzen auf dem dunkleren Bereich, wo weiße Schrift gut sitzt.

Bei lauten Farben hilft ein Hintergrund, der auf deine Worte reagiert, am meisten. In Gradiently vertieft ein Magenta-Mark die Farbe nahe den Buchstaben und hält seinen ruhigsten Teil hinter der Überschrift, sodass das Glühen bleibt und die Worte trotzdem lesbar sind. Für das kühlere Geschwister von Magenta sieh dir die Codes für den [Cyan Farbverlauf](https://gradiently.design/de/guide/cyan-gradient) an.

## FAQ

### Wie lautet der Hex-Code für Magenta?

Auf Bildschirmen ist reines Magenta #ff00ff, das CSS auch Fuchsia nennt. Druck-Magenta ist matter und wird am Bildschirm meist mit etwa #ec008c dargestellt.

### Ist Magenta Pink oder Lila?

Keins von beiden. Es liegt im Farbkreis genau zwischen Rot und Blau; Pink neigt zu Rot und Lila zu Blau.

### Welche Farben passen zu einem Magenta Farbverlauf?

Violett, Elektroblau, Cyan, Orange und fast Schwarz mischen sich alle sauber mit Magenta. Vermeide es, es direkt in Grün zu mischen, das wird grau.

### Kann ich weißen Text auf Magenta verwenden?

Auf reinem #ff00ff erreicht Weiß etwa 3,1 zu 1 Kontrast, beschränke es also auf große Überschriften. Nutze hinter kleinerem weißem Text ein tieferes Magenta.

### Warum wirkt mein Magenta im Druck matt?

Druckfarben können die Intensität von Bildschirm-Magenta nicht wiedergeben. Rechne mit einer weicheren Farbe, bestelle einen Probedruck oder frag deine Druckerei nach fluoreszierender Pinkfarbe.