# Magentagradient: elektriska koder mellan rosa och lila

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

Magenta är en av de högljuddaste färgerna på en skärm och en av de svåraste att tämja. De här koderna visar var den ligger mellan rosa och lila, vad du ska blanda den med och vad som händer när den går till tryck.

## The short version

- Magenta ligger på 300 grader på HSL-färghjulet, halvvägs mellan rött och blått, och därför läses den varken som rosa eller lila.
- På skärmar är ren magenta `#ff00ff`, samma värde som CSS kallar fuchsia.
- Magenta blandas rent med violett, blått, orange och cyan, men blir grå när den blandas direkt med grönt.
- Tryckt magenta är långt mindre intensiv än magenta på skärm, så klara magentagradienter ser blekare ut på papper.
- Vit text på ren magenta når bara ungefär 3,1 till 1 i kontrast, tillräckligt för stora rubriker men inte för liten text.

En **magentagradient** blandar färgen mellan rosa och lila med en granne: violett för något elektriskt, orange för hetta, cyan för en cyberlook eller nästan svart för djup. Ren skärmmagenta är `#ff00ff`, och den är så intensiv att gradienten oftast fungerar bäst när magenta är ena änden av blandningen snarare än hela den. Koderna nedan täcker varje riktning, med anmärkningar om text och om hur magenta beter sig i tryck.

## Magenta, rosa och lila: var gränsen går

På HSL-färghjulet ligger magenta på 300 grader, precis mellan rött och blått. Glid mot rött och den blir stark rosa, glid mot blått och den blir lila och sedan violett. Magenta är också känd för att inte finnas i regnbågen: det finns ingen enskild våglängd för den, och ögat uppfattar den när det får rött och blått ljus samtidigt. Det är en del av varför den ser så konstgjord och elektrisk ut.

| Färg | Hex | Lutar åt | Känns |
| --- | --- | --- | --- |
| Violett | `#7c3aed` | Blått | Lugn, kreativ |
| Lila | `#a21caf` | Något blått | Rik, kunglig |
| Magenta | `#ff00ff` | Ingetdera | Elektrisk, högljudd |
| Stark magenta | `#e6007e` | Något rött | Djärv, modemedveten |
| Stark rosa | `#ff4fa3` | Rött | Lekfull, varm |

Området kring magenta. En magentagradient lånar oftast en av de här som sitt andra stopp.

- Skärmmagenta: #ff00ff
- Elektrisk magenta: #e600e6
- Djup magenta: #a3006f
- Vin: #5c0045
- Orkidé: #f3a6f0
- Ultraviolett: #6a00f4
- Tangerin: #ff8a3d
- Cyan: #00e5ff

Magenta och dess bästa partner. Ultraviolett, tangerin och cyan driver den var och en i en helt annan riktning.

Om det du egentligen vill ha är mjukare och varmare, närmare tuggummi eller ros än neon, är samlingen [rosa gradient](https://gradiently.design/sv/guide/pink-gradient) en bättre startpunkt. Magenta förtjänar sin plats när du vill ha en färg som ingen kan scrolla förbi.

## Koder för elektrisk magentagradient

Magenta till violett eller blått är det klassiska elektriska paret. Det rör sig längs färghjulet utan att korsa något grumligt, så blandningen förblir levande hela vägen. De passar musik, nattliv, spel och kreativa verktyg. Vill du ha den här riktningen med mer blått än magenta tar koderna för [lila gradient](https://gradiently.design/sv/guide/purple-gradient) över.

- Magenta till ultraviolett: `linear-gradient(135deg, #ff00ff 0%, #b100e8 50%, #6a00f4 100%)`
- Magenta till elektriskt blått: `linear-gradient(135deg, #ff1fd1 0%, #a83cff 50%, #3a5bff 100%)`
- Magenta till cyan: `linear-gradient(135deg, #ff00ff 0%, #8f6bff 50%, #00e5ff 100%)`
- Pastellorkidé: `linear-gradient(135deg, #ffd6fb 0%, #f3a6f0 50%, #d68cf5 100%)`

Kalla magentatoner. Magenta till cyan passerar ett mjukt blåviolett i mitten, och därför blir den aldrig grå.

## Koder för het magenta och solnedgång

Vrid åt andra hållet runt hjulet och magenta blir varmare: genom stark rosa till korall och orange. Det är looken hos grafik från slutet av åttiotalet, synthwave och vaporwave, och hos många sommarfestivalaffischer. Ett mörkt toppstopp gör den till en skymning. [Vaporwave-färger](https://gradiently.design/sv/guide/vaporwave-colors) går djupare in i den världen.

- Magenta till tangerin: `linear-gradient(135deg, #e600e6 0%, #ff2e8a 45%, #ff8a3d 100%)`
- Magentaskymning: `linear-gradient(180deg, #2a0a4a 0%, #a3007d 45%, #ff3d8b 75%, #ffb36b 100%)`

Varma magentatoner. Låt orange vara den ljusare änden, så att den ljusaste punkten är varm och den djupaste magenta.

## Djup magenta på mörka bakgrunder

Magenta ser dyrast ut när den glöder fram ur mörker i stället för att fylla bilden. En vin- eller plommonfärgad botten med ett enda magentaljus läses som lyxmode eller en bar sent på natten, men spridd över en hel affisch läses samma magenta som en rabattblaska. Mörka bottnar ger också vit text ett enkelt hem.

- Djup magenta: `linear-gradient(160deg, #1a0012 0%, #5c0045 50%, #a3006f 100%)`
- Magentaglöd på svart: `radial-gradient(circle at 70% 30%, #ff3df5 0%, #a1009b 35%, #3d0040 70%, #12000f 100%)`

Mörka magentatoner. Glödversionen är den du tar till när magenta ska kännas premium snarare än högljudd.

> **Undvik magenta till grönt** Grönt ligger rakt mitt emot magenta, och en rak blandning mellan dem passerar grått i mitten. Om du vill ha båda, låt dem mötas med en hård kant eller använd grönt som en liten accent. [Grumliga gradienter](https://gradiently.design/sv/guide/muddy-gradients) visar varför.

## Magenta på skärm jämfört med i tryck

Skärmmagenta består av ljus, medan tryckt magenta är bläck, en av de fyra processfärgerna i CMYK. Processmagenta är mycket mindre intensiv och visas på skärm oftast som ungefär `#ec008c`. En magentagradient som glöder på din bildskärm kan därför se platt och rosaaktig ut på ett flygblad. [RGB mot CMYK](https://gradiently.design/sv/guide/rgb-vs-cmyk) förklarar skillnaden, och [gradienter i tryck](https://gradiently.design/sv/guide/print-gradients) tar upp provtryck.

### Magenta på skärm

- Består av rött och blått ljus
- Rent värde `#ff00ff`, ytterst levande
- Glöder mot mörka bakgrunder
- Funkar för neon och elektriska looks

### Magenta i tryck

- Består av bläck på papper
- Närmare `#ec008c`, märkbart blekare
- Mörka bottnar kan tryckas grumliga
- För äkta neon erbjuder tryckerier fluorescerande specialfärger

## Text på en magentagradient

Magenta är ljusare än den ser ut. Vit text på ren `#ff00ff` når bara ungefär 3,1 till 1 i kontrast, vilket duger för stora rubriker men inte för liten text. Svart på samma magenta når ungefär 6,7 till 1, men känns tungt. I praktiken sätter du vit text på gradientens djupare ände, eller mörkar magentan bakom små ord till något som `#a3006f`.

På webbplatser ger magenta också en slagkraftig gradientrubrik. Håll den till stora displaystorlekar, där kontrasten håller, som beskrivs i [CSS-gradienttext](https://gradiently.design/sv/guide/css-gradient-text).

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

En rubrik i magenta till ultraviolett. Använd den på en vit eller mycket ljus sida: där når magenta ungefär 3,1 till 1 och ultraviolett ungefär 7 till 1, medan den violetta änden nästan försvinner på svart.

En stående story med en levande magenta och violett bakgrund och orden Dörrarna öppnar tio i vitt

En klubbkvälls-story i en magenta Mark. Orden ligger på den mörkare ytan, där vit text känns bekväm.

Högljudda färger är precis där en bakgrund som svarar på dina ord hjälper mest. I Gradiently fördjupar en magenta Mark färgen nära bokstäverna och behåller sin lugnaste del bakom rubriken, så att glöden finns kvar och orden ändå går att läsa. För magentans svalare syskon, se koderna för [cyangradient](https://gradiently.design/sv/guide/cyan-gradient).

## FAQ

### Vilken hexkod har magenta?

På skärmar är ren magenta #ff00ff, vilket CSS också kallar fuchsia. Tryckt magenta är blekare och visas på skärm oftast som ungefär #ec008c.

### Är magenta rosa eller lila?

Ingetdera. Den ligger precis mellan rött och blått på färghjulet, där stark rosa lutar åt rött och lila lutar åt blått.

### Vilka färger passar till en magentagradient?

Violett, elektriskt blått, cyan, orange och nästan svart blandas alla rent med magenta. Undvik att blanda den rakt in i grönt, som blir grått.

### Kan jag använda vit text på magenta?

På ren #ff00ff når vitt ungefär 3,1 till 1 i kontrast, så håll det till stora rubriker. Använd en djupare magenta bakom mindre vit text.

### Varför ser min magenta blek ut när den trycks?

Tryckfärger kan inte återge intensiteten hos magenta på skärm. Räkna med en mjukare färg, beställ ett provtryck eller fråga tryckeriet om fluorescerande rosa färg.