# Rosa och lila gradient: koder från godis till skymning

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

Rosa och lila kan vara sockriga, glamorösa eller stilla dova, beroende på hur ljust och mättat du går. Här är koderna för varje steg i spannet, och hur du väljer.

## The short version

- En rosa och lila gradient blandar angränsande nyanser som rosa #ec4899, magenta #c026d3 och violett #9333ea, så att övergången förblir klar utan en bryggfärg.
- Samma par läses som godis när det är blekt, som glamour när det är mättat och som skymning när det är mörkt.
- Vit text fungerar inte på klarrosa och blek lila, så använd en djup plommonfärg där och spara vitt till magenta, violett och mörka bottnar.
- Att lägga till lite orange, blått eller guld i en rosa och lila gradient gör den mycket mindre väntad än den vanliga tvåfärgsblandningen.
- Rosa och lila passar skönhet, nattliv, musik, firanden och skaparvarumärken, och en mörk botten hindrar dem från att kännas barnsliga.

En **rosa och lila gradient** blandar två grannar på färghjulet, ett rosa som `#ec4899` och en violett som `#9333ea`, med magenta och orkidé däremellan. Eftersom nyanserna ligger intill varandra förblir blandningen livlig hela vägen. Det som förändrar allt är ljusheten: håll den blek så får du sockervadd, höj mättnaden så får du glamour, gör den mörk så får du skymning. Koderna nedan går från ljust till mörkt, så att du kan välja stämningen först och hexkoderna sedan.

## Stämningar i rosa och lila gradienter i överblick

| Stämning | Typiska stopp | Känns | Fungerar för |
| --- | --- | --- | --- |
| Godis | `#fbcfe8` till `#e9d5ff` | Söt, mjuk, ung | Bagerier, babyshower, pappersvaror |
| Orkidé | `#f0abfc` till `#c084fc` | Drömsk, romantisk | Skönhet, bröllop, välmående |
| Magenta | `#ec4899` till `#9333ea` | Djärv, glamorös | Nattliv, musik, skapare |
| Skymning | `#2e0a2f` till `#9d174d` | Dov, vuxen | Parfym, cocktails, sena event |

Fyra stämningar ur ett par. Varje steg nedåt i tabellen är mörkare eller mer mättat än det förra.

- Godisrosa: #fbcfe8
- Tuggummi: #f9a8d4
- Klarrosa: #ec4899
- Magenta: #c026d3
- Orkidéviolett: #a855f7
- Violett: #9333ea
- Lila: #e9d5ff
- Plommonsvart: #2e0a2f

En arbetspalett för paret, med de ljusa och mörka ändarna du behöver för text.

## Godisrosa och lila gradienter

Bleka rosa och lila tillsammans är så mjukt som färg blir. De passar allt sött eller milt, men kan snabbt tippa över i barnsligt. Lösningen är en något varm botten, en persika eller kräm i ena änden, och mycket självsäker mörk text.

- Sockervadd: `linear-gradient(135deg, #fce7f3 0%, #fbcfe8 45%, #e9d5ff 100%)`
- Jordgubbsmjölk: `linear-gradient(180deg, #fff1f2 0%, #f5d0fe 100%)`
- Persika, rosa, lila: `radial-gradient(circle at 25% 25%, #ffedd5 0%, #fbcfe8 45%, #ddd6fe 100%)`

Godisblandningar, alla satta med en djup plommonfärgad text. Persikan i den tredje hindrar den från att kännas sockrig.

För mer av den här mjukheten täcker [pastellgradienter](https://gradiently.design/sv/guide/pastel-gradients) hela familjen, och [lavendelgradienter](https://gradiently.design/sv/guide/lavender-gradient) lutar längre mot lila.

## Orkidé- och magentagradienter

Skruva upp mättnaden så blir paret glamoröst. Det här är nagellackets, festivalarmbandens och skivomslagens territorium. Använd en lätt vinkel eller ett radiellt sken i stället för en platt diagonal, och lämna ett lugnare område för ord.

- Klarrosa till violett: `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`
- Orkidéblomning: `radial-gradient(circle at 70% 30%, #f0abfc 0%, #c026d3 45%, #6b21a8 100%)`
- Bärglamour: `linear-gradient(160deg, #db2777 0%, #a21caf 60%, #581c87 100%)`
- Skimrande virvel: `conic-gradient(from 90deg at 40% 60%, #f472b6, #a855f7, #e879f9, #f472b6)`

Mättade rosa och lila gradienter. Den koniska läses som ett skimmer, nära [holografiska gradienter](https://gradiently.design/sv/guide/holographic-gradients).

## Skymning: mörka rosa och lila gradienter

Gör paret mörkt så blir det vuxet direkt. En plommonsvart botten med hallon- och violett ljus läses som himlen tjugo minuter efter solnedgången, eller en cocktailbar med dämpad belysning. Det här är de mest mångsidiga i uppsättningen och bär vit eller blekrosa text med lätthet.

- Tjugo över solnedgång: `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`
- Hallonsken: `radial-gradient(circle at 80% 85%, #db2777 0%, #4a044e 40%, #12041a 80%)`
- Plommon till ros: `linear-gradient(135deg, #2e0a2f 0%, #6b21a8 55%, #f472b6 100%)`
- Violett scenljus: `radial-gradient(ellipse at 50% 0%, #a855f7 0%, #3b0764 45%, #0c0414 85%)`

Mörka rosa och lila gradienter. Lägg till ett fint korn, eftersom mörka blandningar får band först.

De ligger nära [solnedgångsgradienter](https://gradiently.design/sv/guide/sunset-gradient) och [galaxgradienter](https://gradiently.design/sv/guide/galaxy-gradient), och du kan låna fritt från båda.

## Lägga till en tredje färg utan att grumla

Standarddiagonalen från klarrosa till violett finns överallt, så en extra färg är det snabbaste sättet att göra den till din. Välj en färg som gränsar till antingen rosa eller lila: orange och korall sitter bredvid rosa, blått och indigo bredvid lila. Grönt sitter mitt emot magenta, vilket är varför rosa som går över i grönt blir grått i mitten.

- Violett, rosa, mandarin: `linear-gradient(120deg, #7c3aed 0%, #ec4899 55%, #fb923c 100%)`
- Blå timmen: `linear-gradient(160deg, #1e3a8a 0%, #7e22ce 50%, #f472b6 100%)`
- Magenta med guld: `radial-gradient(circle at 85% 15%, #fcd34d 0%, #a21caf 35%, #2e0a2f 80%)`

Tre rosa och lila gradienter med en angränsande tredje färg. Varje steg förblir mättat.

## Så väljer du en rosa och lila gradient för ditt varumärke

1. **Bestäm ljust eller mörkt först** Det mesta av stämningen kommer från ljusheten. En blek blandning säger milt; en plommonbotten säger kväll. Välj en och behåll den i varje inlägg.
2. **Välj vilken färg som leder** Rosa som leder känns varmare och mer lekfullt. Lila som leder känns svalare och mer mystiskt. Ge ledaren ungefär två tredjedelar av ytan.
3. **Planera var orden sitter** Lägg rubriken över den mörkare, lugnare änden och det ljusaste rosa i ett hörn, så att du aldrig kämpar mot bakgrunden om uppmärksamheten.
4. **Testa den i varje storlek** En blandning som fungerar på ett kvadratiskt inlägg kan lägga sitt ljusaste område bakom texten på en story. Kontrollera inlägg, story och banner innan du bestämmer dig.

Om du publicerar ofta, skriv ned resultatet som ett kort recept: botten, ledande färg, accent, var ljuset sitter. Den raden håller ett helt flöde konsekvent, vilket betyder mer än någon enskild vacker gradient. [Konsekvent varumärke](https://gradiently.design/sv/guide/brand-consistency) går längre.

## Textfärger på rosa och lila

Klarrosa är ljusare än det ser ut, så vita rubriker på klarrosa är svagare än folk väntar sig. Violett och magenta bär vitt väl. I den bleka änden är en djup plommonfärg texten som håller designen i en familj. Förhållandena är WCAG-kontrast; sikta på 4,5:1 för liten text och minst 3:1 för stora rubriker. [Färgkontrast och tillgänglighet](https://gradiently.design/sv/guide/color-contrast-accessibility) förklarar tröskelvärdena.

| Bakgrund | Text | Kontrast | Utlåtande |
| --- | --- | --- | --- |
| Klarrosa `#ec4899` | Vitt | 3,5:1 | Bara stora rubriker |
| Djuprosa `#db2777` | Vitt | 4,6:1 | Bra |
| Magenta `#c026d3` | Vitt | 4,7:1 | Bra |
| Violett `#9333ea` | Vitt | 5,4:1 | Bra |
| Tuggummi `#f9a8d4` | Plommonsvart `#3b0a3f` | 8,9:1 | Utmärkt |
| Plommonsvart `#2e0a2f` | Tuggummi `#f9a8d4` | 9,6:1 | Utmärkt, rosa som text |

Mät bakom varje textrad, vid gradientens ljusaste punkt.

Ett stående nagelsalongsinlägg med vit text på en mättad rosa och violett gradient

Ett nagelsalongsinlägg på mättad orkidé, vit text på den violetta sidan.

En stående klubbkvällsstory med blekrosa text på en mörk plommongradient upplyst med hallon längst ned

En klubbkvällsstory på skymningsplommon med hallonljus lågt i bilden.

## Rosa och lila gradient i 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;
}
```

En skymningssektion med ett hallonsken, och en rosa till violett rubrik med beskuren bakgrundstext.

Gradienttext är slående men använd den bara för korta displayord, aldrig brödtext. [CSS-gradienttext](https://gradiently.design/sv/guide/css-gradient-text) tar upp reservlösningarna. Om du vill ha ett rosa och lila utseende som ingen annan kan publicera låter Gradiently Marknaden dig söka Marks på färgord som ”orkidé”. Varje Mark är unik, och när du säkrat en kan bara du exportera med den; den håller också texten läsbar över båda ändarna av blandningen av sig själv.

## FAQ

### Vilken är en bra kod för rosa och lila gradient?

En klassiker är `linear-gradient(135deg, #ec4899 0%, #c026d3 50%, #9333ea 100%)`. För något dovare, prova `linear-gradient(180deg, #1e0b2e 0%, #581c87 50%, #be185d 100%)`.

### Passar rosa och lila ihop?

Ja. De är grannar på färghjulet, med magenta emellan, så de blandas rent i vilken ljushet som helst.

### Vilken textfärg passar på en rosa och lila gradient?

Vitt läses väl på magenta, violett och mörkt plommon. På klarrosa använd vitt bara för stora rubriker, och på blekrosa eller lila använd en djup plommonfärg som `#3b0a3f`.

### Hur får jag en rosa och lila gradient att se mindre barnslig ut?

Gå mörkare eller mer mättat, använd en plommonbotten och lägg till en vuxen tredje färg som guld eller djupblått på en liten yta.

### Vilken färg ligger mellan rosa och lila?

Magenta, kring `#c026d3`, med orkidé som dess ljusare version.